React Native 多InputText问题

出现的问题是：
　　　　在注册的时候有多个信息需要填写，所以就要有多个InputText，这样当键盘弹出的时候就会挡住底下的InputText！！
**要的结果是：
　　　　0、当键盘没有弹出的时候，页面不满一屏所以不让页面滚动，弹出键盘的时候可以滚动
　　　　1、当点击InputText以外的地方隐藏键盘，并且页面回到初始状态
　　　　2、当点击InputText的时候弹出键盘，切换InputText的时候键盘不消失
　　　　3、当键盘弹出，手指滚动页面的时候，页面可以滚动并且键盘不隐藏
**

0、第一个问题解决办法

在最外层包裹一个ScrollView控件，这样如果ScrollView里面的控件的高度用的百分比就会出问题，要指定具体高度，但是如果写具体数字适配会出问题，所以建议用屏幕高度的百分比，比如HEIGHT/10，用屏幕高度的1/10 作为InputText的高度，这样可以解决页面包裹ScrollView变形的问题。
　　但是页面还是不会滚动，因为整个页面的高度不够一屏，所以需要在页面最底层添加一个空白View，高度建议设置成键盘高度或者设置成屏幕高度的一半，这样当键盘弹出的时候页面就可以自由滚动了。

1、第二个问题解决办法

给ScrollView添加 onTouchStart这个属性，这个方法就是点击空白处执行的回调，所以这里可以隐藏键盘

var dismissKeyboard = require('dismissKeyboard');

<ScrollView style={{flex: 1}}
　　keyboardShouldPersistTaps='always'
　　ref = {(ref)=>this.scrollView = ref}
　　onTouchStart= {()=> {this._onTouchStart()}}
　　onScroll = {()=> {this._onScroll()}}>

_onTouchStart(){
　　dismissKeyboard();
　　this.scrollView.scrollTo({x:0,y:0,animated:true})
}

这样就可以隐藏键盘了。
　　但是这样当切换InputText的时候也会隐藏键盘然后弹出，这样体验非常不好，这样就是第三个问题了。

2、第三个问题解决办法

需要回调InputText的焦点，所以需要得到InputText的获取焦点和失去焦点回调，

<TextInput style={styles.input}
                             placeholder='请输入手机号'
                             numberOfLines={1}
                             underlineColorAndroid={'transparent'}
                             keyboardType={'numeric'}
                             maxLength={11}
                             onFocus={()=> {this._onFocus()}}
                             onBlur={()=> {this._onBlur()}}/>

其中onFocus是得到焦点的回调，OnBlur是失去焦点的回调

3、第四个问题解决办法

这个要和上面问题一起解决，因为要监听滚动回调，所以需要给ScrollView添加onScroll这个回调，因为滚动也会影响键盘，所以要在这几个回调的方法里面，在适当时机隐藏和打开键盘

/**
     * input 获取焦点
     * @private
     */
    _onFocus(){
        isHide = true;
    }

    /**
     * input 失去焦点
     * @private
     */
    _onBlur(){
        isHide = false;
    }

    /**
     * 点击空白处  相应的函数
     * @private
     */
    _onTouchStart(){
        setTimeout(()=> {
            if (!isHide){
                dismissKeyboard();
                this.scrollView.scrollTo({x:0,y:0,animated:true})
            };
            isHide = false;
        }, 500);
    }

    _onScroll(){
        isHide = true;
    }

总结：以上是在加注册功能时候遇到的问题，目前只是适配Android机型，后续更新本篇文章来适配IOS