ReactNative学习笔记--注册登录等多输入框的键盘遮盖问题

ReactNative --多输入框的键盘遮盖问题解决办法

先看效果

至于容器是ScrollView还是ListView都是一样的，下面直接上代码。

1.ScrollView的onTouchStart方法和keyboardShouldPersistTaps方法很重要一个控制着更换输入框键盘的隐藏问题，一个控制着点击ScrollView的非输入区域的用来收回键盘的

<ScrollView
                    ref = {(ref)=>this.scrollView = ref}
                    keyboardShouldPersistTaps = 'always'
                    contentInset = {{bottom:keyboardSpace}}
                    onTouchStart= {this._onTouchStart}
                >
                    <View
                        style={{paddingTop:32}}
                    >
                        {
                            items.map((item,i)=>{
                                return(
                                    <TestInputCell
                                        ref={ref=>this.textInputView.push(ref)}
                                        item={item}
                                        endEditing={this._endEditing}
                                        beginEditing={this._beginEditing}
                                        key={i}
                                    >
                                    </TestInputCell>
                                )    
                            })
                        }
                    </View>
</ScrollView>

onTouchStart方法为了隐藏键盘，这里用到dismissKeyboard()方法，先引入
var dismissKeyboard = require('dismissKeyboard');
后面的调节ScrollView的滚动位置可自行调节，这里是复位到初始位置

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

2.输入组件TextInputCell.js

里面的输入规则可以选择性的查看，不保证完美有效，其他的可自行研究。

'use strict'

import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity
} from 'react-native';

import Button from '../../common/Button'
import Const from '../../util/const'
import System_styles from '../../util/system_styles'
import SvgImage from '../../common/SvgImage'

export default class TextInputView extends Component {

    static defaultProps={
        item:{
            icon:undefined,////输入框的icon
            wrongIcon:undefined,///错误iocn
            placeholder:'',////占位符
            notice:'输入有误或者该手机未注册',///输入有误的时候的警示语
            keyboardType:'default',///enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
            defaultValue:'',
            maxLength:-1,///长度限制
            minLength:-1,///最小长度
            secureTextEntry:false,///密码保护****
            judgementType:0,///0,手机号码规则  1,密码规则    2,邮箱规则
        },
    };

    constructor(props){
        super(props);
        this.state = {
            cellStatus: true,
            warnText:props.item.notice,
        };
    }

    blur = ()=>{
        this.textInput.blur()
    }

    showWarn = (warnText)=>{
        this.setState({
            warnText:warnText,
            cellStatus:false,
        });
    };

    ///输入规则判断
    _judegeMentTextStatus = (text)=>{
        const {item}=this.props;
        switch (item.judgementType){
            case 0:{
                var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号验证规则
                var phoneFlag = phoneReg.test(text);
                if(!phoneFlag){
                    return '输入的手机号码不合法';
                }else{
                    return 'right';
                }//bool
            }break;
            case 1:{
                //TODO 测试使用

                return 'right'

                var pwdReg =  /[0-9]*(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+))+[a-zA-Z]*/;///判断只有数字和字母、且不为全数字或全字母
                var pwdReg0 =  /(\w)*(\w)\2{2}(\w)*/g;///密码验证规则判断连续3个或以上重复

                var pwdFlag = pwdReg.test(text);
                var pwdFlag0 = pwdReg0.test(text);
                if(!pwdFlag){
                    return '密码只能用数字和字母,且不完全是数字或字母'
                }else if(pwdFlag0){
                    return '密码中不能包含3个连续相同字符'
                }else {
                    return 'right'
                }
            }break;
            case 2:{///长度判断
                var length = text.length;
                return (length>item.minLength-1&&length<item.maxLength+1)?'right':item.notice;

            }break;
            default:{
                return 'right'
            }break;
        }
    };

    ///结束编辑时的状态和回调
    _onEndEditing = (event)=>{
        const {item,endEditing} = this.props;
        var text =event.nativeEvent.text.length>0?event.nativeEvent.text:item.defaultValue;
        const {warnText,cellStatus}=this.state;
        //TODO 根据规则判断
        var warnNotice =  this._judegeMentTextStatus(text);
        this.setState({
            warnText:warnNotice !== 'right'?warnNotice:warnText,
            cellStatus:warnNotice !== 'right'?false:true,
        });
        endEditing(text,item.index,warnNotice !== 'right'?false:true)
    };

    ///开始编辑时的状态和回调
    _beginEditing = ()=>{
        this.setState({
            cellStatus:true
        });
        const {item,beginEditing} = this.props;
        beginEditing(item.index);
    }

    render() {
        const {callback,item} = this.props;
        const {cellStatus,warnText} = this.state;

        return (
            <View style={[{height:72,paddingHorizontal:31},this.props.style]}>
                <View style={[{height:40,backgroundColor:System_styles.hei_240,borderColor:System_styles.hei_240,borderRadius:4,flexDirection:'row',
                justifyContent:'center',alignItems:'center',borderWidth:1,paddingHorizontal:8},!cellStatus&&{borderColor:System_styles.hong}]}>
                    <SvgImage
                        source = {cellStatus?item.icon:item.wrongIcon}
                    />
                    <TextInput
                        ref={ref=>{this.textInput=ref}}
                        style={[{marginLeft:10,flex:1,color:System_styles.hei_84 },!cellStatus&&{color:System_styles.hong}]}
                        placeholder={item.placeholder !== undefined ? item.placeholder : '未知占位符'}
                        placeholderTextColor={System_styles.hei_24}
                        onChange={this._onEndEditing}
                        onFocus={this._beginEditing}
                        autoCorrect={false}
                        autoCapitalize="none"
                        // clearButtonMode='while-editing'
                        maxLength={item.maxLength !== -1 ? item.maxLength : 999}
                        keyboardType={item.keyboardType}
                        underlineColorAndroid='transparent'
                        defaultValue = {item.defaultValue}
                        secureTextEntry={item.secureTextEntry}
                    />
                </View>
                <View style={{flex:1,alignItems:'flex-end',height:32,justifyContent:'center'}}>
                    <Text
                        style={[System_styles.getChanggui(15,System_styles.hong)]}>
                        {cellStatus? '' : warnText}
                    </Text>
                </View>
            </View>
        );
    }
}