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

Simulator Screen Shot - iPhone X - 2018-07-18 at 13.32.02.png Simulator Screen Shot - iPhone X - 2018-07-18 at 13.32.09.png

---

代码如下：

VerificationCodeInput:

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

export default class VerificationCodeInput extends Component {


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

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


    static propTypes = {
        inputSize: PropTypes.number
    };

    /**
     *   初始化 text
     * @param callback
     * @returns {Array}
     */
    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
                        style={styles.intextInputStyle}
                        onChangeText={(text) => {
                            this.setState({
                                textString: text,
                            });
                        }}
                        underlineColorAndroid="transparent"
                        maxLength={this.props.inputSize}
                        autoFocus={true}
                        keyboardType="numeric"
                        selectionColor="transparent"
                    />
                </View>
            </View>
        )
    }


}

const styles = StyleSheet.create({

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

使用方式

import React, {Component} from 'react'
import {StyleSheet, Text, TextInput, View} from "react-native";
import VerificationCodeInput from "./VerificationCodeInput";

export default class Test extends Component {


    render() {
        return (
            <View style={{flex: 1}}>


                <VerificationCodeInput
                    inputSize={6}//默认value是 6
                />

            </View>
        )
    }
}