在本文中，我将向您展示如何在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组件中。
就是这样！🎉
现在，您可以从React Native将所需的任何蒙版添加到Text和Input组件中！
如果您喜欢此内容，请不要忘了给Github上的react-native-mask-text库加星号。