通过 react-native-keyboard-aware-scroll-view 解决键盘遮盖输入框的问题

最新推荐文章于 2024-08-22 10:00:18 发布

weixin_33994444

最新推荐文章于 2024-08-22 10:00:18 发布

阅读量1.2k

点赞数

文章标签：移动开发

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.效果图