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

时间 2019-11-13

标签经过 react native keyboard aware scroll view 解决键盘遮盖输入问题栏目 React 繁體版

原文原文链接

1.安装javascript

yarn add react-native-keyboard-aware-scroll-view

2.引入java

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

3.调用react

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

4.经常使用方法react-native

（1）跳到自定输入框ide

_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:this

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

5.效果图code