2021-01-22

LogReact Native

React Native 入力欄がキーボードで隠れないようにする

KeyboardAvoidingViewを使うことで対応できた。

【React Native】キーボードで画面が隠れる場合の対処法 - bagelee(ベーグリー) を参考にした。ドキュメントにbehaviorについての記載がない分、この記事は各プロパティの動作が説明されていた。

android - height vs position vs padding in KeyboardAvoidingView "behavior" - Stack Overflow の回答も参考になった。

TextInputがマルチラインになっているとフォーカスが効かない。 issue は立っていたが解消されていない模様。

react-native-keyboard-aware-scroll-view を使えばマルチラインにも対応可能。

またScrollViewを使っていると期待した動作にならなかったが、下記のようにすることで動作した。

<KeyboardAvoidingView>
  <ScrollView>
    <View>
      {/* content */}
    </View>
  </ScrollView>
</KeyboardAvoidingView>

reactjs - KeyboardAvoidingView with ScrollView - Stack Overflow を参考にした。

Android デバイスを指定してビルドする

コマンドからデバイス ID を指定することができる。 デバイス ID はadb devicesから取得可能。

npx react-native run-android --deviceId [DEVICE_ID]

React Native で実行対象の Android デバイスを選択してビルドする - つよくなるブログ を参考。