码迷,mamicode.com
首页 > 其他好文 > 详细

《React-Native系列》基于多个TextInput的键盘遮挡处理方案优化

时间:2017-02-20 19:05:02      阅读:1154      评论:0      收藏:0      [点我收藏+]

标签:contents   ejb   xor   yam   dtc   sae   new   ifd   zoie   

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看

1、《React-Native系列》33、 键盘遮挡问题处理

2、《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView


以前给出的解决方案,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方)。

这个方案存在以下问题:

1、移动距离的计算不精确

2、如果表单中有多个TextInput,怎么处理? 


今天,我们来给出个比较好的方案。

‘use strict‘;
import React, { Component } from ‘react‘;
import {
    View,
    Text,
    ScrollView,
    NativeModules,
    TouchableOpacity,
    TouchableHighlight,
    AppRegistry,
    Image,
    Platform,
    TextInput,
    Dimensions,
    Keyboard,
}from ‘react-native‘;
var dismissKeyboard = require(‘dismissKeyboard‘);
const {width, height} = Dimensions.get(‘window‘);
import styles from ‘../styles/goods/Spec.css‘;

export default class Spec extends Component {
    constructor(props) {
        super(props);
        this.state = {
            groupValueList:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
        };
        this.contentHeight = 0;
        this.textInputView = null;//当前编辑的textInput
        this.moveH = 0;//ScrollView滑动的距离
        this.lastMoveH = 0;//保留上次滑动的距离
        this.needMove = false;//弹出键盘时,textInputView是否需要滑动
    }

    componentWillMount(){
      if (Platform.OS === ‘ios‘) {
        this.subscriptions = [
          Keyboard.addListener(‘keyboardDidShow‘, this._keyboardDidShow),
          Keyboard.addListener(‘keyboardDidHide‘, this._keyboardDidHide)
        ];
      }
    }
    componentWillUnmount(){
      if (Platform.OS === ‘ios‘) {
        this.subscriptions.forEach((sub) => sub.remove());
      }
    }
    _keyboardDidShow = (e) => {
      if(! this.textInputView) return ;
      this.needMove = false;
      this.refs[this.textInputView].measure((ox, oy, w, h, px, py)=>{
        let leftHeight = height - py;//输入框距离底部的距离 = (屏幕的高度 - 当前TextInput的高度)
        //输入框距离底部的距离小于键盘的高度,需要滑动
        if(  leftHeight < e.startCoordinates.height + 25  ){
          this.needMove = true;
          // 需要移动的距离
          let moveHeight = 30 + (e.startCoordinates.height - leftHeight);
          console.log("this.moveH=" + this.moveH,"this.contentHeight=" + this.contentHeight,"height=" + height);

          //moveH 异常数据处理
          if(this.moveH + height > this.contentHeight) {
            this.moveH = this.contentHeight - height;
            console.log("===error===");
          }
          this.lastMoveH = this.moveH;
          this.refs.scroll.scrollTo({y:this.moveH + moveHeight ,x:0});
        }
      });
    }

    _keyboardDidHide = () => {
      if(this.needMove){
        this.refs.scroll.scrollTo({y:this.lastMoveH ,x:0});
      }
      this.textInputView = null;
    }

    /**
    * 展示规格项组合项
    */
    _renderGroupItem(item , i) {
      let refId = i;
      return (
        <View key={i} style={{      marginLeft:15,borderTopWidth:1,
              borderTopColor:‘#DBDBDB‘,justifyContent:‘center‘,height:70}}>
                <TextInput
                  ref={ refId }
                  style={{
                    width:110,
                    alignSelf:‘center‘,
                    borderWidth: 1,
                    borderColor:‘#BDBDBD‘,
                    textAlign:‘center‘,
                    fontSize:13,
                    color:‘#333333‘,
                    height:25,
                  }}
                  maxLength={5}
                  placeholderTextColor="#b2b2b2"
                  placeholder="请输入价格"
                  multiline={false}
                  keyboardType="numeric"
                  returnKeyType={‘done‘}
                  value={"" }
                  onFocus={()=>{this.textInputView = refId}}
                  />
        </View>
      );
    }


    render(){
        return (
            <View style={{flex: 1,backgroundColor: ‘#ffffff‘}}>
              <View/>
            <ScrollView ref=‘scroll‘  onContentSizeChange ={(contentWidth, contentHeight)=>{
                this.contentHeight = parseInt(contentHeight);
              }}
            onScrollEndDrag={(e)=>{
                this.moveH = e.nativeEvent.contentOffset.y;
                // console.log("this.moveH",this.moveH);
              }}>
              <View onStartShouldSetResponderCapture={(e)=>{dismissKeyboard();}}>
                {  this.state.groupValueList.map((item,i)=>this._renderGroupItem(item,i))   }
              </View>
            </ScrollView>
          </View>
        );
    }
}
AppRegistry.registerComponent(‘你的模块‘,() => Spec);


代码注释比较详细了,但是这里还是简单说明下以下几个点:

1、只对iOS平台进行处理,RN已经对Android做了键盘的处理

2、当前TextInput的高度

获取到当前正在被编辑的textInput ,this.textInputView 

在键盘弹出监听_keyboardDidShow 中,调用 this.refs[this.textInputView].measure((ox, oy, w, h, px, py)=>{});

此时的py就是当前TextInput在屏幕上的高度
       

3、 输入框距离底部的距离  (leftHeight)

       输入框距离底部的距离 = (屏幕的高度 - 当前TextInput在屏幕上的高度)

      判断leftHeight 是否大于键盘高度,如果大于键盘的高度,默认不处理,如果小于键盘的高度,那么说明TextInput被键盘覆盖


4、移动距离的计算

通过ScrollView的onScrollEndDrag方法,计算ScrollView滑动的距离。   this.moveH = e.nativeEvent.contentOffset.y;

通过键盘的高度和leftHeight ,计算出需要移动的距离


5、moveH异常数据的处理

当快速滑动的时候,点击TextInput还是会出现移动距离错误的情况,因为ScrollView滑动的距离计算有误

譬如向下滑动到顶部后,继续滑动,this.moveH 会出现负数   ,此情况不需要处理,因为TextInput在键盘上方

向上滑动到底部后,继续滑动,this.moveH会有问题 ,此情况需要处理

技术分享

解决方案:我们将moveH的数据纠正

如果 moveH + 屏幕的高度 大于 ScrollView内容的高度,说明moveH数值偏高,此时需要将moveH的值纠正为this.contentHeight - height,即:滑动到页面底部的状态。

技术分享

          if(this.moveH + height > this.contentHeight) {
            this.moveH = this.contentHeight - height;
            console.log("===error===");
          }

下图可见:moveH数据异常

技术分享


界面展示如下:

技术分享


以上都是基于 RN 0.29.2版本,如果使用其他版本,可能API会有不一致的情况。


如果您有更好的方案,希望可以交流,联系我见:与我联系


参考:

http://blog.csdn.net/lxq0426/article/details/51838653

http://blog.csdn.net/pz789as/article/details/53404352


《React-Native系列》基于多个TextInput的键盘遮挡处理方案优化

标签:contents   ejb   xor   yam   dtc   sae   new   ifd   zoie   

原文地址:http://blog.csdn.net/codetomylaw/article/details/55519919

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!