經過 react-native-keyboard-aware-scroll-view 解決鍵盤遮蓋輸入框的問題

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