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');

this.scrollView = ref}
  onTouchStart= {()=> {this._onTouchStart()}}
  onScroll = {()=> {this._onScroll()}}>

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

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

2、第三个问题解决办法

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

 {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

你可能感兴趣的:(React Native 多InputText问题)