react-native - React Native 中的信用卡/借记卡自定义输入字段

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>
    )
}

而已。^^ 希望有所帮助