React本机中的信用卡/借记卡自定义输入字段

Question

我想创建inputText输入信用卡号。我可以使用16种不同的方法来实现此目的，但是如果没有任何npm库，还有其他方法可以实现此目的。还有如何突出显示光标

Answer 1

以前我在使用OTP输入视图时遇到过这种情况。

我的想法是，您需要创建：

• 一个可自定义的自定义CardNumberInput（用户实际上未在此处输入），因此您可以轻松自定义此输入的指示符

• 和一个“不可见”输入字段，当用户单击您的CardNumberInput时，该输入字段已聚焦，该输入字段的值将更新您创建的CardNumberInput的UI。

您可以检查我的代码：

renderDigits(idx) {
    let { cardNumber } = this.state;
    let filled = (idx === cardNumber.length);
    let hasValue = (idx <= cardNumber.length)
    let value = cardNumber.charAt(idx - 1);

    return (
        <View style={{
            backgroundColor: (filled) ? 'rgb(119,183,246)' : 'white',
            alignItems: 'center', justifyContent: 'center',
            padding: 5, width: 25
        }}>
            <Text
                style={{
                    fontSize: 20,
                    color: (filled) ? 'rgb(41, 112, 184)' : 'rgb(216, 216, 216)',
                }}
                emphasize
            >
                {(hasValue) ? value + '' : '_'}
            </Text>
        </View>
    );
}

render() {
    let cardNumberView = [];
    for (let idx = 1; idx <= 6; idx += 1) {
        cardNumberView.push(this.renderDigits(idx));
    }

    return (
        <View>
            <Text>Card number</Text>

            <TextInput
                style={{opacity: 0, width: 0, height: 0}}
                ref={(input) => {
                    this.cardNumberInput = input;
                }}
                onChangeText={(text) => {
                    this.setState({otp: text});
                }}
                keyboardType={'number-pad'}
                maxLength={6}
                value={this.state.otp}
            />

            <TouchableOpacity
                onPress={() => {
                    this.cardNumberInput.focus();
                }}
                style={{ width: '100%' }}>
                <View style={{ flexDirection: 'row' }}>
                    {cardNumberField}
                </View>
            </TouchableOpacity>

        </View>
    )
}

就是这样。 ^^希望有帮助