ReactNative:ソフトキーボードで要素が隠れてしまう場合の対処方法

This post is also available in: English-US (英語)

ReactNativeでスマホアプリを開発している際に、ソフトウェアキーボードでテキストインプット要素やボタン要素などが隠れてしまう場合があり、その際の対処方法をメモ代わりに書いています。

KeyboardAvoidingViewを使う

KeyboardAvoidingViewというコンポーネントがあり、ソフトウェアキーボードが動きに合わせて隠れてしまう予定の部分も同時に移動させるという便利なやつです。

<KeyboardAvoidingView behavior="height" style={styles.container}>
  <TextInput
    placeholder="sample01"
  />
  <TextInput
    placeholder="sample02"
  />
  <TextInput
    placeholder="sample03"
  />
</KeyboardAvoidingView>

behavior　には　['height', 'position', 'padding']　といくつか種類があります。
詳しくは公式サイト参照してください。
https://facebook.github.io/react-native/docs/keyboardavoidingview.html

ScrollViewを使う

KeyboardAvoidingView 私も試したのですが、どうも使いにくいです。
そこで、ScrollViewコンポーネントを用いて、隠れている部分をスクロールで表示するという荒業もできますよっていう紹介です。
keyboardShouldPersistTaps　で、スクロールビュー内のタップ時の動作を指定することができます。

こちらも、詳しくは公式サイト参照してください。
https://facebook.github.io/react-native/docs/scrollview.html

<ScrollView keyboardShouldPersistTaps="always">
  <TextInput
    placeholder="sample01"
  />
  <TextInput
    placeholder="sample02"
  />
  <TextInput
    placeholder="sample03"
  />
</ScrollView>