VerifyCodeInput.js

import React, { PureComponent } from 'react';
import {
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';
import lodash from 'lodash';
import PropTypes from 'prop-types';
import styles from './VerifyCode.style';

const propTypes = {
    onChangeText: PropTypes.func.isRequired, // 验证码实时变化值
    verifyCodeLength: PropTypes.number.isRequired, // 验证码数
};

const defaultProps = {
    onChangeText: () => {},
    verifyCodeLength: 6, // 默认6位
};

// 验证码组件
class VerifyCode extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            verifyCode: '', // 验证码
        };
        this.onTouchInput = this.onTouchInput.bind(this);
    }

    onTouchInput() {
        const isFocused = this.textInput.isFocused();
        if (!isFocused) {
            this.textInput.focus();
        }
    }

    renderVerifyCode(value) {
        const { verifyCodeLength } = this.props;
        const paddedValue = lodash.padEnd(value, verifyCodeLength, ' ');
        const valueArray = paddedValue.split('');
        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={this.onTouchInput}
                style={styles.verifyTextContainer}
            >
                {valueArray.map((digit, index) => (
                    <View
                        key={index}
                        style={digit === ' ' ? styles.textInputItem : styles.textInputItemIn}
                    >
                        <Text style={styles.verifyText}>{digit}</Text>
                    </View>
                ))}
            </TouchableOpacity>
        );
    }

    render() {
        const { verifyCode } = this.state;
        const { onChangeText, verifyCodeLength } = this.props;
        return (
            <View style={styles.verifyContainer}>
                {this.renderVerifyCode(verifyCode)}
                <TextInput
                    ref={(ref) => { this.textInput = ref; }}
                    underlineColorAndroid="transparent"
                    caretHidden
                    style={styles.textInput}
                    autoFocus={true}
                    keyboardType={'numeric'}
                    maxLength={verifyCodeLength}
                    onChangeText={(text) => {
                        const reg = /^[0-9]*$/;
                        if (reg.test(text)) {
                            this.setState({ verifyCode: text });
                            onChangeText(text);
                        }
                    }}
                    value={verifyCode}
                />
            </View>
        );
    }
}

VerifyCode.propTypes = propTypes;
VerifyCode.defaultProps = defaultProps;

export default VerifyCode;