React Native防止键盘遮挡输入框 解决方案

方法一： 安卓自带的效果 用Container，Content 控件包裹着就可以了，效果不好 会把顶部导航，底部导航给顶上去，画面不美观
方法二：用KeyboardAvoidingView 包裹着 效果跟方法一一样，画面不美观
如图：

方法三：用Keyboard,ScrollView控件 计算需要滚动的高度

需要的代码如下:
–监听键盘显示事件

componentWillMount(){
 		this.keyboardWillHideListener =  Keyboard.addListener('keyboardDidHide',this._keyboardDidHide.bind(this));     
 }

–键盘显示的逻辑

_keyboardDidHide(e) {
	  this.setState({
	      keyboardVis:false--设定一个空白view 目的是顶起input 
	  });
	}

–删除监听

componentWillUnmount(){
  		this.keyboardWillHideListener && this.keyboardWillHideListener.remove();
}

– 绑定滚动

  <ScrollView style={{height:screenHeight-240}} ref={(view) => { this.myScrollView = view; }}>
  ........
  </ScrollView >

–点击input 设定scroll条逻辑

clickToScroll = () => {
	    this.myScrollView.scrollToEnd({ animated: false}); --滚动到对底部	       
	}

– 设定空白VIew高度
–目的是顶起input 让input在键盘上方 height 根据自己的条件设定

`{  this.state.keyboardVis && <View style={{height:170}}/>}

–调用事件

<View onTouchStart={(e)=>{this.setState({keyboardVis:true})}}>       
	   <Input 
	       autoCapitalize="none"
	       value={_state.addr}
	       placeholder={I18n.t('Account.Enter')}
	       placeholderTextColor={'#7A7E83'}
	       onFocus = {v => this.clickToScroll()}            
	       onChangeText={v => this.handleChange('addr', v)}
	       style={styles.TextInput} />
</View>

效果如下：