React-native键盘遮挡输入框问题的解决.doc

React-native键盘遮挡输入框问题的解决
RN中要解决键盘遮挡输入框的问题其实有挺多方式，在这里只是记录其中的一些个人实际开发中使用到的。
方式一、使用scrollTo方法，这也是最简单最粗暴的，只是需要计算scrollview滚动的距离，并且处理一些体验的bug问题。大致思路是：组件render方法中使用scrollview，并且设置scrollview的keyboardShouldPersistTaps={true}（此步一定不能少，如果缺少该属性，接下来的一步将会不起作用），然后在scrollview中用一个view作为container包裹所有剩余的子视图，比如Text，TouchableHighlight之类的，并且用onStartShouldSetResponderCapture截取该view的事件，用以解决当点击页面上的按钮时，第一次点击只会收起键盘，第二次点击才会响应按钮方法的bug。然后在TextInput的onFocus方法中滚动scrollview，在onEndEditing中恢复scrollview的滚动。以下是在具体实现中的代码。
render方法的实现：
render:function() {
　　return(
　　　　<View style={}>
　　　　<NavigationBar title={'绑定手机号'} onBackPress={}/>
　　　　<ScrollView ref='scroll' keyboardShouldPersistTaps={true} >
　　　　　　<View style={} onStartShouldSetResponderCapture={(e) => {
　　　　　　　　const target = ;
　　　　　　　　if (target !== () && target !== ()) {
　　　　　　　　　　();
　　　　　　　　　　();
　　　　　　　　}}}>
　　　　　　　　<TextInput
　　　　　　　　　　style = {}
　　　　　　　　　　ref = 'phoneInput'
　　　　　　　　　　onFocus={(this)}
　　　　　　　　　　onEndEditing={()=>{(0)}}
　　　　　　　　　　onChange = {(this)}
　　　　　　　　　　pla