RN中要解决键盘遮挡输入框的问题其实有挺多方式,比如博客:http://www.cnblogs.com/pofabs/p/5109021.html,但是此种方法并没有试,感觉一个输入法遮盖问题在RN就需要这么麻烦,不太科学,肯定有插件去做这件事,又去社区转了一圈,发下有人回帖说:
react-native-keyboard-spacer:https://github.com/Andr3wHur5t/react-native-keyboard-spacer
但是又看到有人遇到的:
在 ScrollView / ListView 组件内部存在 TextInput 组件,要求输入框获取焦点时,视图容器自动调整滚动高度,确保输入框出现在键盘上方。
实现方式:
KeyboardAvoidingView:http://facebook.github.io/react-native/docs/keyboardavoidingview.html
React Native 提供的组件,但要求 react-native 版本大于等于 0.29
本人只是一个登陆界面的用户名和密码输入被遮盖问题,以上三种都没有采用,而是:
react-native-keyboard-aware-scroll-view:https://github.com/APSL/react-native-keyboard-aware-scroll-view
社区提供的一个解决方案:
版本支持:
v0.2.0 requires RN>=0.32.0.
v0.1.2 requires RN>=0.27.2 but you should use 0.2.0 in order to make it work with multiple scroll views.
v0.0.7 requires react-native>=0.25.0.
Use v0.0.6 for older RN versions.
用法:
根目录命令提示符:npm i react-native-keyboard-aware-scroll-view –save
然后在输入框的component中引入:
import { KeyboardAwareScrollView } from ‘react-native-keyboard-aware-scroll-view’
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>