ReactNative的iOS下KeyboardAvoidingView问题解决
背景
当我们在应⽤中包含输⼊框，⽽当点击输⼊框弹出键盘时，如果输⼊框的位置⽐较靠下的话，会导致键盘遮挡住输⼊框
⽅案
问题
我⽤的iOS测试，使⽤官⽹demo能⽣效，但是在我⾃⼰的case⾥，点击弹出键盘后，问题没有解决！
解决
1. 仔细分析对⽐代码样式的差异，注释⽆关代码，没有发现不妥！
2. 反复研究demo，原来demo代码的效果⼤概就是把⼀个flex:1的容器压缩了⼀下，也就是说，这个组件做的事情，是键盘弹出以后，告知RN
react native 端⾼度变⼩。⽽在我的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来实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。