ユーザ用ツール

サイト用ツール


サイドバー

reactnative:keyboardavoidingview

KeyboardAvoidingView

ソフトウェアキーボードが表示されると画面を上に持ち上げて、キーボードにより入力しているテキストが隠れることを防止する。

基本

一番トップ階層に「KeyboardAvoidingView 」を持ってくる。
その内側のViewでは「justifyContent:'flex-end'」を設定するとうまく動作する。
画面の下から上に押し上げる動作のためと思われる。

        <KeyboardAvoidingView 
        style={{flex:1}} 
        behavior='padding'
        keyboardVerticalOffset={80}> //topから入力位置までの距離を設定し調整する。
        <View style={{justifyContent:'flex-end'}}> //これをしない動かない?

注意点

TextInputでマルチラインの設定をしていると、改行すれば自動で拡張していく。
自動で画面の位置がスクロールするわけではない。
そのためそのうちキーボードに隠れて見えなくなる。

behavior

どのように画面をずらすかの設定と思われる。
Androidの場合は、
未設定:キーボードが表示されてもズレない。
height:キーボードが表示されるとずれるが、キーボードが隠れても元の位置に戻らない。
position・padding:ともに正常に動作した。

reactnative/keyboardavoidingview.txt · 最終更新: 2019/02/11 10:26 by ips