004-TextInput和ref与android之间的故事 --react-native

一：
前段时间写了一个登录页面,TextInput的组件在android的模拟器上面出现了一系列的问题，今天终于解决了，趁着有记忆的时候记录并分享一下。

二：

1-：可以通过点击事件来获取TextInput的焦点

2-：解决了一个输入问题

三：Coding
1-：首先先写一个TextInput和点击事件组件

const styleChange=(this.state.nameMsg != ''
                ? (styles.textInputMsgChange)
                : (styles.textInputMsg))
        ;
this.topChangeFocus()}
    style={styles.topMsgView}>
    姓
    名
    :
    
        this.topTextInput = ref }
            style={styleChange}
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="twitter"
            placeholder="请输入您的姓名"
            placeholderTextColor='#000000'
            onChangeText={(text)=>{
                this.setState({
                nameMsg:text
                })
            }}/>
    

2-：写点击事件的方法

topChangeFocus=()=>{
        if (this.topTextInput !== null) {
            this.topTextInput.focus();
        }
    };

这样就完成用ref来是TextInput在点击事件中获取焦点

接下来就是重点了，前面的代码在ios的模拟器中可以完美的运行，但是到androi的模拟起中就出现严重的问题，第一次对TextInput输入值时并不会显示你输入的值而只是使模拟器判定TextInput中有值

大致情况如下面运行效果

TextInput.gif

现在我们开始修改代码解决这个问题

3-：我们先改变点击事件的代码

topChangeFocus=()=>{
        if (this.topTextInput !== null) {
            this.topTextInput.focus();
            //通过给nameMsg一个null的值来使获取到焦点的时候直接改变状态
            this.setState({
                nameMsg:null
            })
        }
    };

然后我们在TextInput组件中添加点东西

//获得到焦点时回调一个方法,使之间点击TextInput的时候也不会出现上诉的错误
onFocus={()=>this.topOnFocus()}
//失去焦点时回调一个方法，判断nameMsg是否为null，以来改变状态
onBlur={()=>this.topOnBlur()}
//当text为空的时候nameMsg为null
onChangeText={(text)=>{
    this.setState({
    nameMsg:text||null
    })
}}

4-：现在开始我们来写刚刚添加的方法

topOnBlur=()=>{
        if(this.state.nameMsg==null){
            this.setState({
                nameMsg:''
            })
        }
    };
    
topOnFocus=()=>{
        this.setState({
            nameMsg:null
        })
    };

完整的代码

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';
const {width,height}=Dimensions.get('window');
export default class NewPage extends Component {
    constructor(props) {
        super(props);
        this.state={
            nameMsg:'',
            IDNumberMsg:''
        };
    };


    topChangeFocus=()=>{
        if (this.topTextInput !== null) {
            this.topTextInput.focus();
            //通过给nameMsg一个null的值来使获取到焦点的时候直接改变状态
            this.setState({
                nameMsg:null
            })
        }
    };


    bottomChangeFocus=()=>{
        if (this.bottomTextInput !== null) {
            this.bottomTextInput.focus();
            this.setState({
                IDNumberMsg:null
            })
        }
    };

    topOnBlur=()=>{
        if(this.state.nameMsg==null){
            this.setState({
                nameMsg:''
            })
        }
    };

    topOnFocus=()=>{
        this.setState({
            nameMsg:null
        })
    };


    bottomOnFocus=()=>{
        this.setState({
            IDNumberMsg:null
        })
    };


    bottomOnBlur=()=>{
        if(this.state.IDNumberMsg==undefined){
            this.setState({
                IDNumberMsg:''
            })
        }
    };

    render() {
        const styleChange=(this.state.nameMsg != ''
                ? (styles.textInputMsgChange)
                : (styles.textInputMsg))
        ;
        return (
            
                
                this.topChangeFocus()}
                    style={styles.topMsgView}>
                    姓
                    名
                    :
                    
                        this.topTextInput = ref }
                            style={styleChange}
                            //获得到焦点时回调一个方法,使之间点击TextInput的时候也不会出现上诉的错误
                            onFocus={()=>this.topOnFocus()}
                            //失去焦点时回调一个方法，判断nameMsg是否为null，以来改变状态
                            onBlur={()=>this.topOnBlur()}
                            autoCapitalize="none"
                            autoCorrect={false}
                            keyboardType="twitter"
                            placeholder="请输入您的姓名"
                            placeholderTextColor='#000000'
                            //当text为空的时候nameMsg为null
                            onChangeText={(text)=>{
                                this.setState({
                                nameMsg:text||null
                                })
                            }}/>
                    
                
                this.bottomChangeFocus()}
                    style={styles.bottomMsgView}>
                    身份证号
                    :
                    
                        this.bottomTextInput = ref }
                            style={this.state.IDNumberMsg!=''
                            ?(styles.textInputMsgChange)
                            :(styles.textInputMsg)}
                            onFocus={()=>this.bottomOnFocus()}
                            onBlur={()=>this.bottomOnBlur()}
                            autoCapitalize="none"
                            autoFocus={this.state.focus}
                            autoCorrect={false}
                            keyboardType="numeric"
                            placeholder="请输入你的身份证号"
                            placeholderTextColor='#000000'
                            onChangeText={(text)=>{
                                this.setState({
                                    IDNumberMsg:text||null
                                })
                            }}/>
                    
                
                
                    查询
                
                
                    点击"查询"即表示您已同意《平台免费协议与隐私条款》
                
            
        );
    }
}

四：运行效果

TextInputchange.gif

到这里问题应该就解决了，如果还有什么遗漏的地方希望大神们留言告诉我，我一定第一时间改正。