React-Native解决键盘遮挡问题（Keyboard遮挡问题）

我在前面也写了一篇关于键盘遮挡问题的解决方案，这次的原理也差不多，不过在后续的研究中发现官方给了一个有意思的组件叫 KeyboardAvoidingView。然后就动手去试了一试，然而效果并不好！具体用法可以参考这里：点击打开链接

不过随着RN的更新，这个官网肯定会解决的，但是在官方还没填坑前，还是得自己动手解决啦。

我前面博客的处理方法：点击打开链接

其实原理是要获取到键盘的高度和输入框的位置，然后去计算偏移位置就可以了。

那么今天这篇是写什么呢？

我前面的方法主要是自己写了原生的代码，然后获取键盘宽高，但是我今天才知道，原来RN的Keyboard组件已经有这个了，所以可以把之前方法中的原生部分可以剪掉了，毕竟还是官方的靠谱呀~

然后，今天的第二个发现就是RN中获取一个组件在屏幕的位置，这个以前我不知道，是通过组件和父组件的位置，去计算组件在屏幕的位置，这个的麻烦就是层次越深，越不好计算，你要传的数据就太多了，导致计算繁琐，不好得到正确的位置。今天我就告诉大家一个好方法，也是RN自带的叫measure。每个view都有这个属性，它里面就有6个参数，分别为ox，oy，width，height，px，py。这里的px，py就是组件在屏幕的位置啦！真是太棒啦~~

于是，我根据这些新发现，写了一个组件，在需要用的TextInput组件下面直接使用，就可以啦！直接贴代码好了：

[javascript]view plaincopy 
   
 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:{  
     }  
 });  

然后使用：

[html]view plaincopy 
   
 <TextInput style={styles.textInput} />  
 <InputBoard spaceHeight={44}/>//textInput的高度是44.  

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