005-密码输入框组件 --react-native

一：
前段时间写了一个密码输入框的组件，现在拿出来分享一下。

二：

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的焦点，然后你在想要获取焦点就比较麻烦了。

四：
一个简单的密码输入框组件，如果有什么不对的地方希望大神们帮忙指出，如果对你又帮助就更好了。