如何在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：

1import React, { useState } from "react";
2import { StyleSheet, View } from "react-native";
3import { MaskedTextInput} from "react-native-mask-text";
4export default function App() {
5  const [maskedValue, setMaskedValue] = useState("");
6  const [unMaskedValue, setUnmaskedValue] = useState("");
7  return (
8    <View style={styles.container}>
9      <MaskedTextInput
10        mask="99/99/9999"
11        onChangeText={(text, rawText) => {
12          setMaskedValue(text);
13          setUnmaskedValue(rawText);
14        }}
15        style={styles.input}
16        keyboardType="numeric"
17      />
18  );
19}
20const styles = StyleSheet.create({
21  container: {
22    flex: 1,
23    justifyContent: "center",
24    backgroundColor: "#ecf0f1",
25    padding: 8,
26  },
27  input: {
28    height: 40,
29    margin: 12,
30    borderWidth: 1,
31  },
32}); 

Enter fullscreen mode Exit fullscreen mode

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

具有自定义遮罩的MaskedText：

1import React from "react";
2import { StyleSheet, View } from "react-native";
3import { MaskedText } from "react-native-mask-text";
4export default function App() {
5  return (
6    <View style={styles.container}>
7      <MaskedText mask="99/99/9999" style={styles.paragraph}>
8        30081990
9      </MaskedText>
10    </View>
11  );
12}
13const styles = StyleSheet.create({
14  container: {
15    flex: 1,
16    justifyContent: "center",
17    backgroundColor: "#ecf0f1",
18    padding: 8,
19  },
20  paragraph: {
21    margin: 24,
22    fontSize: 18,
23    textAlign: "center",
24  },
25}); 

Enter fullscreen mode Exit fullscreen mode

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

就是这样！🎉

现在，您可以从React Native将所需的任何蒙版添加到Text和Input组件中！
如果您喜欢此内容，请不要忘了给Github上的react-native-mask-text库加星号。

https://github.com/akinncar/react-native-mask-text