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)
网友评论