先日、「iOSで入力欄がキーボードの後ろに隠れてしまう時の対処法」についての記事を投稿しましたが、こちらを Android 端末で実行したところ見事にバグったのでその修正方法についてです。
KeyboardAvoidingView
についての公式サイトのリンクはこちら。
KeyboardAvoidingView · React Native
https://reactnative.dev/docs/keyboardavoidingview
で、この問題を修正するのに参考にさせていただいた記事がこちら。
Android で React Native の KeyboardAvoidingView の behavior を指定すると、逆に Input がキーボードに隠れてしまう – idubmorganのブログ
https://dev-dub.hatenablog.com/entry/2019/02/02/121229
まず、React Native の公式サイトを参考にして、最初に書いていたコードがこちら。
import { getInset } from 'react-native-safe-area-view'; const bottomPadding = getInset('bottom', false); const offset = bottomPadding > 0 ? 90 : 65;
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} keyboardVerticalOffset={offset} style={{ flex: 1 }}> ...... </KeyboardAvoidingView>
iOS では問題なく動作するのですが、同じコードで Android アプリを起動したところ、キーボード表示時に高さが変わったページとキーボードとの間に隙間が空いてしまったり、逆に中途半端に入力欄が隠れてしまったりしました。
また、テキストを入力して入力候補が表示されると、完全に入力欄が隠れてしまうという状況に…。
で、対処方法としては、Android の時は、behavior
の値を null
にすると理想通りの動作になりました!
変更後のコードはこちらです。
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : null} keyboardVerticalOffset={offset} style={{ flex: 1 }}> ...... </KeyboardAvoidingView>
公式のサンプルコードをそのまま鵜呑みにしてしまっていたのがダメでした…。
というか、behavior
に指定する値って、height、position、padding だけではなく、null
でも良いんですね。知りませんでした…。
ちなみに、この方法を知るまで、keyboardVerticalOffset
の値を変えてみたり、enabled
を、Android の時のみ false
にして、KeyboardAvoidingView
を無効にしてみたりもしたのですが…どれもダメでした。
皆さんは素直に behavior
に null
を指定してください。
以上、React Native の KeyboardAvoidingView を Android でのみ無効にする方法についてでした。
ご参考になれば幸いです。