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

九路 等级 859 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

收藏
评论区

相关推荐

基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)
前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor
《彻底掌握redux》之开发一个任务管理平台(上)
前言 redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳
10分钟教你手写8个常用的自定义hooks
前言 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细
25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
从中断机制看 React Fiber 技术
带你了解计算机的中断机制(操作系统心脏)是如何提在 React Fiber 中应用及提高了页面渲染性能和用户体验。 前言 React 16 开始,采用了 Fiber 机制替代了原有的同步渲染 VDOM 的方案,提高了页面渲染性能和用户体验。Fiber 究竟是什么,网上也有很多优秀的技术揭秘文章,本篇主要想从计算机的中断机制来聊聊 React Fiber 技术
30行代码实现Javascript中的 MVC
从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一连串的名字走马观花式的出现
使用 State Hook – React
使用 State Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。中使用下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { //
给 React Native 库添加 Example
本文翻译自 ,也夹杂了一些私货,如有帮助,请不吝点赞。你为 React Native 制作了一个闪亮的新库,现在该向全世界展示它。但是您需要添加一个示例应用程序,以便人们可以在安装之前进行尝试。有一个示例程序也能让你在开发时测试。这看起来很简单,真的是吗?不幸的是,它不是那么简单,并且可能会非常具有挑战性。我将描述我使用的过程,也许会对您有所帮助。请注意
React Native 调试最佳实践
本文翻译自 本文首发于 人非圣贤孰能无过。这句话还(更确切地说:尤其是...)适用于软件开发者。这就是为什么在每一个开发者的职业生涯中最重要的是知道如何处理这些失误。作为一个 React Native 开发者,我经常想要写出没有 BUG 的代码,但是当出现问题时,我需要确保我能够追踪并解决问题。在这篇文章中,我想讨论一些日常用于移动应用程序开发的工具
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
React 之源码概览
本节将对 React 的源码架构,约定及其实现进行概述。如果您想 的开发,我们希望这份指南可以帮助你更加轻松地进行修改。我们并不推荐在 React 应用中遵循这些约定。有许多约定是历史原因,并且之后也许会有所修改。 项目根目录当克隆 之后,你们将看到项目根目录的信息: 包含元数据(比如 package.json)和 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