react-native键盘遮盖底部输入框问题修复

qlj2242024-12-29 17:40

在开发react native项目时碰到软键盘弹起时遮盖输入框的问题，使用官方提供的组件KeyboardAvoidingView效果不是很好，在github上找了一个组件react-native-keyboard-aware-scroll-view，地址：https://github.com/APSL/react-native-keyboard-aware-scroll-view，用法也比较简单

使用

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

需要注意插件版本

v0.4.0 requires RN>=0.48

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.

复制代码

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

可以也配置一些参数，满足不同的场景，自行去github查看