如何在不使用库的情况下在React Native中自定义掩码输入？

Question

我对react-native完全陌生，一直在尝试自定义掩码输入。但是，即使我在 TextInput 下指定了掩码，我也只能得到超过 10 的数字。我不确定我做错了什么。我们将非常感谢您的帮助。

请参阅下面我的代码：

import React, { Component } from "react";
import { StyleSheet, SafeAreaView, TextInput } from "react-native";


export default class InputMask extends Component {

    state = {
        mask: '',
    }

    customMask = (mask) => {
        if ( typeof mask == 'String') {
            for (let i = 0; i < mask.length; i++) {

                if ( mask == '9') {
                    return mask.replace(/[^0-9]+/g, '')
                }
                if ( mask == 'a') {
                    return mask.replace(/[^a-zA-Z]+/g, '')
                }
                if ( mask == 's') {
                    return mask.replace(/[^a-zA-Z0-9]+/g, '')
                }
                if ( mask == '*') {
                    return mask
                }
            }
        }
        this.setState({
            mask: mask.substring(0, mask.length) || ''
        })
    }

    render() {

        return (
            <SafeAreaView style={styles.container}>
                <TextInput
                    mask= '[phone]'
                    placeholder="Enter phone number"
                    value={this.state.mask}
                    onChangeText={this.customMask}
                    style={styles.input}
                    keyboardType="phone-pad"

                />
            </SafeAreaView>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
    },
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10,
    },
});

Answer 1

首先，您尝试传递给 RN TextInput 的 mask props 似乎不可用，您可以通过 here 查看可用的 props。其次，似乎您正在接近的方式并不是您想要继续的方式，我建议您了解文本输入的道具如何提供以及提供什么，然后开始创建自定义组件。对于您的屏蔽输入，您可以使用像 this 这样的外部库（不只是宣传一个示例），因为它们的存在是为了让我们的生活更轻松，但如果您仍然热衷于制作自定义组件，您可以浏览他们的 GitHub 存储库 并了解如何使用他们已经实现了它并尝试了类似的东西，比如this。