使用指南：React Native 密码遮罩文本组件

使用指南：React Native 密码遮罩文本组件

react-native-masked-text react-native-masked-text - 提供React Native组件，用于创建带掩码的文本输入，如电话号码、CPF、CNPJ等格式的输入。 项目地址: https://gitcode.com/gh_mirrors/re/react-native-masked-text

---

项目介绍

React Native 密码遮罩文本 是一个专为 React Native 设计的纯 JavaScript 组件，提供了丰富的文本遮罩功能，适用于各种输入场景，如电话号码、身份证号、信用卡号等。这个库支持 React Native 版本 0.32.0 或更高版本，便于开发者轻松实现格式化输入，并且可以处理动态遮罩和值验证。

---

项目快速启动

安装

首先，你需要通过npm来安装react-native-masked-text库：

npm install react-native-masked-text --save

基础使用

在你的React Native组件中，你可以这样导入并使用TextInputMask：

import React from 'react';
import { TextInputMask } from 'react-native-masked-text';

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = { phoneNumber: '' };
    }

    render() {
        return (
            <TextInputMask
                type={'cel-phone'}
                options={{
                    maskType: 'BRL',
                    withDDD: true,
                    dddMask: '(99) ',
                }}
                value={this.state.phoneNumber}
                onChangeText={(text) => this.setState({ phoneNumber: text })}
            />
        );
    }
}

export default MyApp;

这将创建一个巴西格式的电话号码输入框（例如：(99) 9999-9999）。

---

应用案例和最佳实践

自定义遮罩

对于更复杂的输入需求，比如自定义信用卡格式，你可以这样做：

<TextInputMask
    type={'credit-card'}
    options={{ obfuscated: false }} // 显示完整卡号而不是隐藏部分数字
    value={this.state.creditCard}
    onChangeText={(text) => this.setState({ creditCard: text })}
/>

验证和获取原始值

利用isValid()方法检查CPF的有效性，并使用getRawValue()获得未经遮罩处理的值：

<TextInputMask
    type={'cpf'}
    value={this.state.cpf}
    onChangeText={(text) => this.setState({ cpf: text })}
    ref={(ref) => { this.cpfRef = ref; }}
/>

// 检查CPF是否有效
const isValidCPF = this.cpfRef.isValid();

// 获取原始CPF值
const rawCPF = this.cpfRef.getRawValue();

---

典型生态项目

虽然该项目本身不直接与其他特定生态系统项目关联，但结合如Redux进行状态管理或者在使用时集成UI框架（如React Native Paper或React Native Elements）可增强用户体验。例如，当你在表单应用中使用此组件时，可以将其与Formik一起使用来管理表单的状态和提交逻辑，确保数据的一致性和验证的简便性。

---

以上是关于如何使用react-native-masked-text的基本指导，它简化了React Native应用中的格式化输入处理。根据具体需求调整选项，可以让用户的输入体验更加流畅和符合预期。

react-native-masked-text react-native-masked-text - 提供React Native组件，用于创建带掩码的文本输入，如电话号码、CPF、CNPJ等格式的输入。 项目地址: https://gitcode.com/gh_mirrors/re/react-native-masked-text