我在前面也寫了一篇關於鍵盤遮擋問題的解決方案，這次的原理也差不多，不過在後續的研究中發現官方給了一個有意思的元件叫 KeyboardAvoidingView。然後就動手去試了一試，然而效果並不好！具體用法可以參考這裡：點選開啟連結

不過隨著RN的更新，這個官網肯定會解決的，但是在官方還沒填坑前，還是得自己動手解決啦。

我前面部落格的處理方法：點選開啟連結

其實原理是要獲取到鍵盤的高度和輸入框的位置，然後去計算偏移位置就可以了。

那麼今天這篇是寫什麼呢？

我前面的方法主要是自己寫了原生的程式碼，然後獲取鍵盤寬高，但是我今天才知道，原來RN的Keyboard元件已經有這個了，所以可以把之前方法中的原生部分可以剪掉了，畢竟還是官方的靠譜呀~

然後，今天的第二個發現就是RN中獲取一個元件在螢幕的位置，這個以前我不知道，是通過元件和父元件的位置，去計算元件在螢幕的位置，這個的麻煩就是層次越深，越不好計算，你要傳的資料就太多了，導致計算繁瑣，不好得到正確的位置。今天我就告訴大家一個好方法，也是RN自帶的叫measure。每個view都有這個屬性，它裡面就有6個引數，分別為ox，oy，width，height，px，py。這裡的px，py就是元件在螢幕的位置啦！真是太棒啦~~

於是，我根據這些新發現，寫了一個元件，在需要用的TextInput元件下面直接使用，就可以啦！直接貼程式碼好了：

import React, { Component, PropTypes} from 'react';
import {
  StyleSheet, View, Keyboard, LayoutAnimation
} from 'react-native';

export default class InputBoard extends Component {
  constructor(props) {
    super(props);
    this.state={
      marginTop: 0,
    };
    this.keyboardShow = false;//當前鍵盤的狀態，顯示與否
    this.baseLayout = null;
    this.config = {
      duration: 150,
      create: {
        type: LayoutAnimation.Types.easeOut,
        property: LayoutAnimation.Properties.opacity,
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut,
      }
    };
    this.basePos = null;
  }
  static propTypes = {
    spaceHeight: PropTypes.number, //固定增加高度
  }
  static defaultProps = {
    spaceHeight: 0,
  }
  componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }
  componentDidMount() {
    if (this.root){
      this.root.measure((ox, oy, width, height, px, py)=>{
        this.basePos = {
          ox: ox,
          oy: oy,
          width: width,
          height: height,
          px: px,
          py: py
        };
        console.log(this.basePos);
      });
    } 
  }
  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidShow(e) {//當鍵盤彈起來
    this.keyboardShow = true;
    // let moveY = -(e.startCoordinates.height-this.baseLayout.y-this.baseLayout.height-this.props.spaceHeight);
    // if (moveY > 0){
    //   console.log("did show", e, 'move y: ' + moveY);
    //   LayoutAnimation.configureNext(this.config);
    //   this.setState({
    //     marginTop: moveY 
    //   });
    // }

    this.root.measure((ox, oy, width, height, px, py)=>{
      if (this.basePos)
      this.basePos = {
        ox: ox,
        oy: oy,
        width: width,
        height: height,
        px: px,
        py: py
      };
      let moveY = -(e.startCoordinates.height-this.basePos.py-this.props.spaceHeight);
      if (moveY > 0){
        console.log("did show", e, 'move y: ' + moveY);
        LayoutAnimation.configureNext(this.config);
        this.setState({
          marginTop: moveY 
        });
      }
    });
  }
  _keyboardDidHide(e) {//當鍵盤收起後
    this.keyboardShow = false;
    if (this.state.marginTop != 0){
      LayoutAnimation.configureNext(this.config);
      console.log("did hide", e);
      this.setState({
        marginTop: 0,
      });
    }
  }
  onLayout(event){
    // if (event.nativeEvent.target == ReactNative.findNodeHandle(this.root))
    if (this.baseLayout == null){
      this.baseLayout = event.nativeEvent.layout;
    }
  }
  render() {
    console.log('render board');
    return (
      <View ref={(r)=>{this.root = r}} 
        style={[styles.container, this.props.style, {marginTop: this.state.marginTop}]}
        onLayout={this.onLayout.bind(this)} />
    );
  }
}

const styles = StyleSheet.create({
    container:{
    }
});
 

<TextInput style={styles.textInput} />
<InputBoard spaceHeight={44}/>//textInput的高度是44.

如果誰可以給這個進行改良，希望可以發給我~哈哈