rn中键盘遮住输入框的几种情况

1、键盘弹起的时候，底部有元素固定在下方(rn没有fixed)

2、View, ScrollView,FastList，SectionList这些list中有输入框

3、Modal中底部有输入框或者中间有输入框

通过google，业界有的解决方案主要有react-native自带的KeyboardAvoidView和第三方react-native-keyboard-aware-scroll-view

案例

整体样式结构

现象

这张图中就包含了这3个情况，1.底部的全选固定底部，2.列表中有输入框，3.点击驳回弹出Modal，Modal中有输入框

键盘弹起的时候，底部有元素固定在下方

底部的元素使用了position: absolute,bottom: 0, 在android中没问题，底部元素没有跟随上去(验收和测试的时候，都没发现这个问题，自己试了几种方法，没有找到方法，不影响太大用户体验)

查验的资料

针对 Android 开发者：发现这种方法是处理这个问题最好，也是唯一的办法。在 AndroidManifest.xml 中添加 android:windowSoftInputMode="adjustResize"。操作系统将为你解决大部分的问题

代码中存在这条设置

失败的尝试

<View style={{flexDirection: 'column'}}>
    <View style={{ flex: 1 }}>
        <SectionList></SectionList>
    </View>
    <View></View> // 底部View
</View>

View, ScrollView, FastList, SectionList这些list中有输入框，键盘弹出，list不跟随上滚

方法1 通过监听Keyboard事件，keyboardWillShow时设置向上滚动多少距离，keyboardWillHide时向下回收多少距离

frames.endCoordinates.height //获取键盘高度

方法2 react-native-keyboard-aware-scroll-view提供了高阶组件替换View, ScrollView, FastList, SectionList这些组件

里面会自动计算好(网上找了好多资料，这句话都没说明，这么好用的方法，应该划重点，我还算了半天的高度)

Modal中底部有输入框或者中间有输入框

现象

结果

使用KeyboardAvoidingView包裹View，android中不需要设置

ios伪代码

<RNModal>
    <KeyboardAvoidingView behavior="padding" style={styles.container}>
    </KeyboardAvoidingView>
</RNModal>

可以看出ios中键盘是内容的一部分，android中键盘和content是分开的，可能与android
中设置android:windowSoftInputMode="adjustResize"有关

数字键盘右上角添加完成按钮

数字键盘中在ios中默认是没有完成按钮的，添加returnKeyType="done"右上角显示done，returnKeyType只有几个枚举值，比h5中input的type="number"中不能添加文字好点，参考链接

一般以为returnKeyType设置的是右下角的按钮文字，在数字键盘中可以对ios设置右上角

<TextInput
  returnKeyType="done"
  keyboardType={'numeric'}
/>

点击键盘上面的完成不隐藏键盘(遇到报错的时候)

通过监听keyboardWillHide，在_keyboardWillHide中设置textInput的focus，但是键盘会先消失，再出现的效果。

Keyboard.addListener('keyboardWillHide', this._keyboardWillHide)

最后编辑于：2019.11.22 13:47:28