一：
前段时间写了一个密码输入框的组件，现在拿出来分享一下。
二：
1-：就是一个仿支付宝密码输入框的组件
三：Coding
1-：其实密码输入框只要一个TextInput就好了
//TextInput的长度决定了密码输入框有多少个，我这里暂定6个，可以根据需要更改
<TextInput
style={styles.textInputMsg}
ref={ (ref)=>this.textInput = ref }
maxLength={6}
autoFocus={true}
keyboardType="number-pad"
defaultValue={this.state.Msg}
onChangeText={
(text) => {
this.setState({
Msg:text
});
if (text.length === 6) {
this.onEnd(text);
}
}
}/>
2-:TextInput要不可见，所以不能设置它的宽和高，并且把它置顶就好了
textInputMsg:{
zIndex:99,
position:'absolute',
}
3-:然后我们要做的是遍历这个Msg（字符串名）
let inputItem=[];
let {Msg}=this.state;
//理论上TextInput的长度是多少，这个i就小于它
for (let i = 0; i < 6; i++) {
inputItem.push(
//i是从0开始的所以到最后一个框i的值是5
//前面的框的右边框设置为0，最后一个边框再将右边框加上
<View key={i} style={i===5?[styles.textInputView,{borderRightWidth:1}]:[styles.textInputView,{borderRightWidth:0}]}>
{i < Msg.length
? <View style={{width: 16,
height: 16,
backgroundColor: '#222',
borderRadius: 8}} />
: null}
</View>)
}
return inputItem;
};
4-:因为是遍历，所以View需要设置一下，不然中间的线会变成2陪的宽度
textInputView:{
height:85/2,
width:85/2,
borderWidth:1,
borderColor:'#c9c7c7',
justifyContent:'center',
alignItems:'center',
},
完整代码
render() {
return (
<View style={styles.container}>
<View style={{flexDirection:'row',marginTop :36,justifyContent:'center'}}>
<TextInput
style={styles.textInputMsg}
ref={ (ref)=>this.textInput = ref }
maxLength={6}
autoFocus={true}
keyboardType="number-pad"
defaultValue={this.state.Msg}
onChangeText={
(text) => {
this.setState({
Msg:text
});
if (text.length === 6) {
this.onEnd(text);
}
}
}/>
{
this._getInputItem()
}
</View>
</View>
);
}
onEnd= (text) => {
alert(this.state.Msg)
};
_getInputItem=()=>{
let inputItem=[];
let {Msg}=this.state;
//理论上TextInput的长度是多少，这个i就小于它
for (let i = 0; i < 6; i++) {
inputItem.push(
//i是从0开始的所以到最后一个框i的值是5
//前面的框的右边框设置为0，最后一个边框再将右边框加上
<View key={i} style={i===5?[styles.textInputView,{borderRightWidth:1}]:[styles.textInputView,{borderRightWidth:0}]}>
{i < Msg.length
? <View style={{width: 16,
height: 16,
backgroundColor: '#222',
borderRadius: 8}} />
: null}
</View>)
}
return inputItem;
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#ffffff',
justifyContent:'center',
alignItems:'center'
},
textInputView:{
height:85/2,
width:85/2,
borderWidth:1,
borderColor:'#c9c7c7',
justifyContent:'center',
alignItems:'center',
},
});
运行效果图
密码输入框.gif
提醒：如果不想输入6个后就不能更改，你可以把alert去掉，因为alert会去掉TextInput的焦点，然后你在想要获取焦点就比较麻烦了。
四：
一个简单的密码输入框组件，如果有什么不对的地方希望大神们帮忙指出，如果对你又帮助就更好了。
