react native处理键盘弹起事件，获取键盘高度，防止阻挡TextInput输入框

需要用到react native官网的组件

KeyboardAvoidingView

官网解释：本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置，调整自身的 position 或底部的 padding，以避免被遮挡。
官网地址

ScrollView

需要用到滚动视图，目的可以点击屏幕关闭键盘。
如果没有添加ScrollView的话，点击屏幕空白处是没有人任何反应的。
官网地址

Keyboard

官网解释：Keyboard模块可以监听原生键盘事件以做出相应回应，比如收回键盘。
当视图被ScrollView包裹的时候，键盘弹起会多出和键盘高度一致的白色遮挡层，
这个时候就需要使用KeyboardAvoidingView组件的keyboardVerticalOffset属性偏移处理。
官网地址
我们可以看看没有处理偏移的效果

未处理偏移

添加了keyboardVerticalOffset需要是负数，让它向下偏移，如果是正数就是向上偏移。
这个偏移量我们可以通过获取键盘的高度来设置。

componentWillMount() {  // 监听键盘高度
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }

  _keyboardDidShow(e) {  // 获取键盘高度
    this.setState({
      keyboardHeight: e.endCoordinates.height
    })
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0
    })
  }

  componentWillUnmount() {  // 移除监听
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

然后把获取的高度设置为偏移的高度

keyboardVerticalOffset={-this.state.keyboardHeight}

设置好了偏移，我们可以看看最终的效果

添加了偏移处理

最终代码

import React, { Component } from 'react';
import {
  View,
  Keyboard,
  TextInput,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native'

export default class Test6 extends Component {
  state = {
    text: '',
    keyboardHeight: ''  // 键盘高度
  }

  componentWillMount() {  // 监听键盘高度
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }

  _keyboardDidShow(e) {  // 获取键盘高度
    this.setState({
      keyboardHeight: e.endCoordinates.height
    })
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0
    })
  }

  componentWillUnmount() {  // 移除监听
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  render() {
    return (
      
        
          
            {
              Array(20).fill('').map((item, index) => (
                 this.setState({ text })}
                  placeholder={`输入框${index}`}
                  secureTextEntry={true}
                  value={this.state.text}
                />
              ))
            }
          
        
      
    )
  }
}