美文网首页
React Native的iOS下KeyboardAvoidin

React Native的iOS下KeyboardAvoidin

作者: 小胖子嘿嘿嘿 | 来源:发表于2020-09-27 14:26 被阅读0次

    背景

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

    方案

    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来实现

    相关文章

      网友评论

          本文标题:React Native的iOS下KeyboardAvoidin

          本文链接:https://www.haomeiwen.com/subject/wgtluktx.html