React-Native解决键盘遮挡问题(Keyboard遮挡问题)
React 解决 native 键盘 问题 遮挡 keyboard
2023-09-27 14:29:03 时间
我在前面也写了一篇关于键盘遮挡问题的解决方案,这次的原理也差不多,不过在后续的研究中发现官方给了一个有意思的组件叫 KeyboardAvoidingView。然后就动手去试了一试,然而效果并不好!具体用法可以参考这里:点击打开链接
不过随着RN的更新,这个官网肯定会解决的,但是在官方还没填坑前,还是得自己动手解决啦。
我前面博客的处理方法:点击打开链接
其实原理是要获取到键盘的高度和输入框的位置,然后去计算偏移位置就可以了。
那么今天这篇是写什么呢?
我前面的方法主要是自己写了原生的代码,然后获取键盘宽高,但是我今天才知道,原来RN的Keyboard组件已经有这个了,所以可以把之前方法中的原生部分可以剪掉了,毕竟还是官方的靠谱呀~
然后,今天的第二个发现就是RN中获取一个组件在屏幕的位置,这个以前我不知道,是通过组件和父组件的位置,去计算组件在屏幕的位置,这个的麻烦就是层次越深,越不好计算,你要传的数据就太多了,导致计算繁琐,不好得到正确的位置。今天我就告诉大家一个好方法,也是RN自带的叫measure。每个view都有这个属性,它里面就有6个参数,分别为ox,oy,width,height,px,py。这里的px,py就是组件在屏幕的位置啦!真是太棒啦~~
于是,我根据这些新发现,写了一个组件,在需要用的TextInput组件下面直接使用,就可以啦!直接贴代码好了:
然后使用:
注意一点的是,我内部是使用的marginTop,所以在样式上有一定的要求,不能使用固定的位置,否则计算的位置有误差,甚至是不动。
相关文章
- 8分钟为你详解React、Angular、Vue三大前端技术
- React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式(2-1)
- 关于React Native Android打包报Duplicate resources错的解决方法
- 从零学React Native之13 持久化存储
- Chrome如何安装react-developer-tools插件及解决安装后报出的错误:Uncaught TypeError: Cannot read properties of undefined
- React
- React Native 填坑之神奇的报错,已解决
- react:使用Context传递参数给孙子组件
- React笔记:快速构建脚手架(1)
- react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)
- 一则Iris分类器系统介绍(DecisionTree + Flask + React)
- React事件初探
- React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
- React Native通过修改ScrollableTabView和ViewPager来解决左右滑动冲突的问题
- React-Native iOS启动闪白屏问题完美解决方案:react-native-launch-image
- React-native键盘遮挡输入框问题的解决