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>

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。