一：
前段时间写了一个登录页面,TextInput的组件在android的模拟器上面出现了一系列的问题，今天终于解决了，趁着有记忆的时候记录并分享一下。
二：
1-：可以通过点击事件来获取TextInput的焦点
2-：解决了一个输入问题
三：Coding
1-：首先先写一个TextInput和点击事件组件
const styleChange=(this.state.nameMsg != ''
? (styles.textInputMsgChange)
: (styles.textInputMsg))
;
<TouchableOpacity
//点击事件，获取TextInput的焦点
onPress={()=>this.topChangeFocus()}
style={styles.topMsgView}>
<Text style={styles.surNameMsg}>姓</Text>
<Text style={styles.reputationMsg}>名</Text>
<Text style={styles.symbolMsg}>:</Text>
<View style={styles.textInputView}>
<TextInput
//用ref来使TextInput获取到焦点
ref={ (ref)=>this.topTextInput = ref }
style={styleChange}
autoCapitalize="none"
autoCorrect={false}
keyboardType="twitter"
placeholder="请输入您的姓名"
placeholderTextColor='#000000'
onChangeText={(text)=>{
this.setState({
nameMsg:text
})
}}/>
</View>
</TouchableOpacity>
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 (
<View style={styles.container}>
<Image
style={styles.backgroundImg}
source={require('./img/beijing.png')}
/>
<TouchableOpacity
//点击事件，获取TextInput的焦点
onPress={()=>this.topChangeFocus()}
style={styles.topMsgView}>
<Text style={styles.surNameMsg}>姓</Text>
<Text style={styles.reputationMsg}>名</Text>
<Text style={styles.symbolMsg}>:</Text>
<View style={styles.textInputView}>
<TextInput
//用ref来使TextInput获取到焦点
ref={ (ref)=>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
})
}}/>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.bottomChangeFocus()}
style={styles.bottomMsgView}>
<Text style={styles.IDNumberMsg}>身份证号</Text>
<Text style={styles.bottomSymbolMsg}>:</Text>
<View style={styles.textInputView}>
<TextInput
ref={ (ref)=>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
})
}}/>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnView}>
<Text style={styles.enquiriesMsg}>查询</Text>
</TouchableOpacity>
<View style={styles.bottomView}>
<Text style={styles.conditionsMsg}>点击"查询"即表示您已同意《平台免费协议与隐私条款》</Text>
</View>
</View>
);
}
}
四：运行效果
TextInputchange.gif
到这里问题应该就解决了，如果还有什么遗漏的地方希望大神们留言告诉我，我一定第一时间改正。
网友评论