React-Native 验证码输入框(TextInput)

参考：

React-Native 验证码输入框(TextInput)

测试：

import React, {Component} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import PropTypes from 'prop-types';

export default class Test extends React.Component {

    render() {
        return (
            <View style={{flex: 1}}>
                {/*//默认value是 6*/}
                <VerificationCodeInput inputSize={4}/>
            </View>
        );
    }
}

//https://www.jianshu.com/p/3bd764988bdf

class VerificationCodeInput extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            isFocused: true,
            textString: '',
        };
    }

    /**
     * 默认value
     */
    static defaultProps = {
        inputSize: 6,
    };


    static propTypes = {
        inputSize: PropTypes.number,
    };

    _onChangeText(text) {
        let _that = this;
        this.setState({
            textString: text,
        }, () => {
            if (_that.state.textString.length === _that.props.inputSize) {
                alert(this.state.textString);
                _that.setState({
                    textString: '',
                });
            }
        });
    }

    /**
     *   初始化 text
     */
    renderText(callback) {
        let inputs = [];
        for (let i = 0; i < this.props.inputSize; i++) {
            inputs.push(
                <Text style={[styles.text,
                    this.state.textString.length === i ? styles.focusText : null]}>
                    {this.state.textString[i]}
                </Text>,
            );
        }

        return inputs;
    }

    render() {
        return (
            <View style={[styles.viewBox]}>

                <Text style={{height: 80, color: 'white', fontSize: 24}}>请输入验证码</Text>

                <View>
                    {/**text*/}
                    <View style={[styles.textBox, {flexDirection: 'row', justifyContent: 'center'}]}>
                        {this.renderText()}
                    </View>


                    {/**input*/}
                    <TextInput
                        ref="input"
                        style={styles.intextInputStyle}
                        value={this.state.textString}
                        onChangeText={(text) => {
                            this._onChangeText(text);
                        }}
                        underlineColorAndroid="transparent"
                        maxLength={this.props.inputSize}
                        autoFocus={true}
                        keyboardType="numeric"
                        caretHidden={true}
                    />
                </View>
            </View>
        );
    }


}

const styles = StyleSheet.create({

    viewBox: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        backgroundColor: '#000000',
    },
    textBox: {
        position: 'absolute',
        left: 20,
        right: 36,
    },
    text: {
        height: 40,
        width: 40,
        lineHeight: 40,
        borderWidth: 2,
        borderColor: '#ff0000',
        color: 'white',
        fontSize: 25,
        marginLeft: 16,
        textAlign: 'center',
    },
    focusText: {
        borderColor: '#ffff00',
    },
    inputItem: {
        lineHeight: 20,
        width: 80,
        textAlign: 'center',
        height: 40,
    },
    intextInputStyle: {
        width: 400,
        height: 40,
        fontSize: 25,
        color: 'transparent',
    },
});

注意：

caretHidden={true} ： 隐藏光标

underlineColorAndroid=“transparent” ： 隐藏下划线

效果图：