如何在React Native和Expo中掩盖Text和TextInput组件

在本文中，我将向您展示如何在React Native和Expo中使用自定义蒙版，可用于iOS，Android和Web！

我们将使用一个名为react-native-mask-text的库，这是一个没有本机代码的完整javascript库，然后您可以在React Native环境的所有CLI中使用。

您可以使用Shellnpx react-native init或expo init在Shell上简单地启动一个新项目。

假设您已经创建了一个React Native CLI或Expo CLI。您将需要添加遮罩库：

NPM：

npm i react-native-mask-text

Enter fullscreen mode Exit fullscreen mode

或者

纱：

yarn add react-native-mask-text

Enter fullscreen mode Exit fullscreen mode

安装后，您可以从该库中导入两个组件：

<MaskedTextInput /> 向React Native TextInput组件添加自定义蒙版。

<MaskedText /> 向React Native Text组件添加自定义蒙版。

我们mask在组件中有一个道具，然后允许我们添加自定义掩码格式，以所需的格式传递字符串。

遮罩组件中使用的图案：

9 -接受数字。
A -接受Alpha。
S -接受字母数字。

在此示例中，让我们看一个自定义日期掩码的简单实现。
在下面，您将看到两个组件中每个组件的用法：

具有自定义遮罩的MaskedTextInput：

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { MaskedTextInput} from "react-native-mask-text";
export default function App() {
  const [maskedValue, setMaskedValue] = useState("");
  const [unMaskedValue, setUnmaskedValue] = useState("");
  return (
    <View style={styles.container}>
      <MaskedTextInput
        mask="99/99/9999"
        onChangeText={(text, rawText) => {
          setMaskedValue(text);
          setUnmaskedValue(rawText);
        }}
        style={styles.input}
        keyboardType="numeric"
      />
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

Enter fullscreen mode Exit fullscreen mode

您可以看到该组件接受了来自React Native的TextInput的相同属性，我们使用了style和keyboardType，并且可以使用智能感知来发现其他道具。

具有自定义遮罩的MaskedText：

import React from "react";
import { StyleSheet, View } from "react-native";
import { MaskedText } from "react-native-mask-text";
export default function App() {
  return (
    <View style={styles.container}>
      <MaskedText mask="99/99/9999" style={styles.paragraph}>
        30081990
      </MaskedText>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: "center",
  },
});

Enter fullscreen mode Exit fullscreen mode

如您所见，我们可以将React Native Text组件中的本地道具添加到我们的MaskedText组件中。