PUROGU LADESU

ポエムがメインのブログです。

【ReactNative】KeyboardAvoidingViewを使う

KeyboardAvoidingViewはTextInputなどでキーボードを出したときに、 入力欄がせり上がってきたキーボードで隠れてしまわないように画面をせり上げてくれるものです。

タグを追加しただけだとちょっとしか動かなくて隠れたままになってしまっていました。 問題を解決するにはこちらを参考にしました。

dev.to

keyboardVerticalOffsetに追加でずらす高さを指定してあげます。 ヘッダー分とステータスバーの分らしいです。 ちなみにOSで違うようなのと、iPhoneの機種でも違うみたいです。

ヘッダーの高さのとり方は下記に載っています。(react-navigationを使ってる場合)

reactnavigation.org

const headerHeight = useHeaderHeight();

  <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
      keyboardVerticalOffset={headerHeight + 64}
    >