React Native的iOS下KeyboardAvoidin

背景

当我们在应用中包含输入框，而当点击输入框弹出键盘时，如果输入框的位置比较靠下的话，会导致键盘遮挡住输入框

方案

https://reactnative.cn/docs/keyboardavoidingview，RN内置的keyboardavoidingview组件正是为解决这个问题而生，只需要参考文档说明，把自己的内容用组件包裹起来即可

问题

我用的iOS测试，使用官网demo能生效，但是在我自己的case里，点击弹出键盘后，问题没有解决！

解决

1. 仔细分析对比代码样式的差异，注释无关代码，没有发现不妥！
2. 反复研究demo，原来demo代码的效果大概就是把一个flex:1的容器压缩了一下，也就是说，这个组件做的事情，是键盘弹出以后，告知RN端高度变小。而在我的case里，因为内容高度是固定的，容器高度变小，对内部元素的排版不会有影响！
3. 在keyboardavoidingview内部包裹一个scrollview组件，这样弹出键盘以后，scrollview就自动滚动上去了！

结论

1. 如果内容比较多，一定要用scrollview, 不过如果本来就有flatlist或者secitionlist，则没有必要，因为本来就继承了scrollview；
2. 内容少的话(不够1屏)，这时候不添加scrollview容器也可以

优化

在ios端，点击空白或者键盘的确定按钮，不能关闭键盘。这时候，我们需要引入RN自带的Keyboard和TouchableWithoutFeedback，用TouchableWithoutFeedback包裹整个可视区域，并且点击的时候，执行Keyboard.dismiss()方法，这样点击任何一个空白区域，都会导致键盘被关闭！

也有另外一个问题，我本来在底部，嵌入了一个绝对定位的图片，弹出键盘以后，这个图片就和输入框重叠了，影响美观。我现在做的解决方案是，引入RN自带的Animated，当弹出键盘时，让他通过这个动画移动到可视区域下方，而当键盘显示的时候，再移动回来。键盘移动/隐藏的监听可通过Keyboard监听keyboardDidShow和keyboardDidHide来实现