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

在开发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查看

相关推荐
Miketutu19 分钟前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
摘星编程23 分钟前
React Native for OpenHarmony 实战:Swiper 滑动组件详解
javascript·react native·react.js
鸣弦artha40 分钟前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
摘星编程3 小时前
React Native for OpenHarmony 实战:DisplayInfo 显示信息详解
android·react native·react.js
LongJ_Sir3 小时前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java3 小时前
JavaScript 中定义全局变量的教程
javascript
哈哈你是真的厉害4 小时前
React Native 鸿蒙跨平台开发:FlatList 基础列表代码指南
react native·react.js·harmonyos
午安~婉4 小时前
整理知识点
前端·javascript·vue
向前V4 小时前
Flutter for OpenHarmony数独游戏App实战:底部导航栏
javascript·flutter·游戏
人道领域4 小时前
JavaWeb从入门到进阶(javaScript)
开发语言·javascript·ecmascript