通过 react-native-keyboard-aware-scroll-view 解决键盘遮盖输入框的问题
2024-08-24 14:03:07
1.安装
yarn add react-native-keyboard-aware-scroll-view
2.引入
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
3.调用
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
4.常用方法
(1)跳到自定输入框
_scrollToInput (reactNode: any) {
// Add a 'scroll' ref to your ScrollView
this.scroll.scrollToFocusedInput(reactNode)
} <KeyboardAwareScrollView innerRef={ref => {this.scroll = ref}}>
<View>
<TextInput onFocus={(event: Event) => {
// `bind` the function if you're using ES6 classes
this._scrollToInput(ReactNative.findNodeHandle(event.target))
}} />
</View>
</KeyboardAwareScrollView>
(2)监听 键盘显示或隐藏 onKeyboardWillShow
和 onKeyboardWillHide
:
<KeyboardAwareScrollView
onKeyboardWillShow={(frames: Object) => {
console.log('Keyboard event', frames)
}}>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
5.效果图
最新文章
- STM32学习及应用笔记一:SysTick定时器学习及应用
- Unity依赖注入使用详解
- Spark+Hadoop+Hive集群上数据操作记录
- JfreeChart使用(转载)
- Struts2之自定义类型转换器
- hdu 4655 Cut Pieces
- 初试mysql存储过程&;触发器
- HDOJ 1004题 Let the Balloon Rise strcmp()函数
- SRM 586 DIV1
- 用Cython加速Python程序以及包装C程序简单测试
- 设置为互斥按钮的一组Radio按钮的用法
- 【Contest Hunter 5302】金字塔
- 《剑指offer》-和为S的正整数序列
- AGC006D Median Pyramid Hard
- 类与接口(二)java的四种内部类详解
- React Native 填坑一
- [转]C++之运算符重载(1)
- [Web前端]由cookies安全说开去
- (转)【javascript基础】原型与原型链
- 使用JSON Web Token设计单点登录系统