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

九路 等级 1219 0 0
标签: react

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

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

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

您可以使用Shellnpx react-native initexpo 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的相同属性,我们使用了stylekeyboardType,并且可以使用智能感知来发现其他道具。

具有自定义遮罩的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库加星号。

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

收藏
评论区

相关推荐

一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
面向初学者的 React 路由-React Router的完整指南!
因此,您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人,都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。什么是React Router?React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
VSCode 搭建 React Native 环境
### 安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: ![](https://img2018.cnblogs.com/blog/1312841/201906/1312841-20190619104115078-1529635773.jpg) ### 创建的react-na
RN开发快速切换底部导航时react
目前react-native平台最好用的轮播图组件:[react-native-swiper](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fleecade%2Freact-native-swiper%2F) 最近在项目迭代开发测试中发现一个问题,就是在快速切换
React Native (一) react
React Native (一) react-native-video实现音乐播放器和进度条的功能 ------------------------------------------------- 功能: --- 1.卡片滑动切歌 2.显示进度条 效果图: ---- ![](https://oscimg.oschina.net/oscnet/3c
React Native 0.58 正式版中文更新日志
原文地址:[https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#0580](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Freact-na
React Native 常用第三方组件
* [React-Native-Elements](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.jianshu.com%3Ft%3Dhttps%3A%2F%2Fgithub.com%2Freact-native-community%2FReact-Native-Elemen
React Native和React之间有什么区别?
### 问题: _I have started to learn _React_ out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Goog
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React native project deleted on xcode, can't run “run
**1 - Delete your ios and android folder** **2 - In your project directory:** react-native upgrade **3 - link for any native dependency:** react-native link
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。  新的react包包含了React.crea
ReactNative 0.61之Fast Refresh
原文链接:[https://facebook.github.io/react-native/blog/2019/09/18/version-0.61](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fblog%2F201
ReactNative—Text标签中的Style学习
1.引用需要的组件 ========= 这里用到_AppRegistry,StyleSheet,Text,View_ import React, { Component } from 'react'; import { AppRegistry,//JS运行所有React Native应用的入口,必须引用 Style
React入门第三弹—— 一切从React开始
_译注_: 这是今年5月份React Native刚发布的时候,在code.facebook.com发布的一篇博客。时隔5个月,这篇文章依然值得一读,尤其是对于想了解为何 Facebook要开发并发布React Native的新手、对于React Native的由来以及和其它框架的区别感兴趣的同学,都可以读一读这篇文章。 _如果你对React没有什