React-Native键盘遮挡问题进阶发现

参考：http://blog.csdn.net/pz789as/article/details/53404352

我在前面也写了一篇关于键盘遮挡问题的解决方案，这次的原理也差不多，不过在后续的研究中发现官方给了一个有意思的组件叫 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.

注意一点的是，我内部是使用的marginTop，所以在样式上有一定的要求，不能使用固定的位置，否则计算的位置有误差，甚至是不动。

如果谁可以给这个进行改良，希望可以发给我~哈哈