React Native 中的信用卡/借记卡自定义输入字段答案

【问题标题】：Credit/Debit card custom input fields in React nativeReact Native 中的信用卡/借记卡自定义输入字段
【发布时间】：2020-05-25 09:03:28
【问题描述】：

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

【问题讨论】：

标签： react-native react-native-android react-native-ui-components

【解决方案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>
    )
}

就是这样。 ^^ 希望对你有所帮助

【讨论】：