解决react-native软键盘弹出挡住输入框的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huhao0829/article/details/78502806

解决react-native软键盘弹出挡住输入框的问题

写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况。用了RN官方的KeyboardAvoidingView组件,会有多出来一块灰色区域的bug,于是我就找第三方来解决这个问题,最后用的是react-native-keyboard-aware-scroll-view


1. 安装react-native-keyboard-aware-scroll-view

npm i react-native-keyboard-aware-scroll-view --save
yarn add react-native-keyboard-aware-scroll-view

2. 使用

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

3. 想要拓展功能的

前往https://github.com/APSL/react-native-keyboard-aware-scroll-view

4. 谢谢阅读

欢迎大家评论交流

展开阅读全文

没有更多推荐了,返回首页