React Native 中实现确认码组件示例详解

目录
  • 正文
  • 实现原理
  • 开源方案

正文

确认码控件也是一个较为常见的组件了，乍一看，貌似较难实现，但实则主要是障眼法。

实现原理

上图 CodeInput 组件的 UI 结构如下：

<View style={[styles.container]}>
  <TextInput autoFocus={true} />
  <View
    style={[styles.cover, StyleSheet.absoluteFillObject]}
    pointerEvents="none">
    {cells.map((value: string, index: number) => (
      <View style={[styles.cell]}>
        <Text style={styles.text}>{value}</Text>
      </View>
    ))}
  </View>
</View>

TextInput 用于弹出键盘，接收用户输入，在它上面使用绝对定位覆盖了一个用于旁路显示的 View[style=cover]。

这就是 CodeInput 的实现原理了。

需要注意以下几个点：

  • 设置 TextInput 的 autoFocus 属性，控制进入页面时是否自动弹出键盘。
  • 设置作为覆盖物的 View[style=cover] 的 pointerEvents 属性为 none，不接收触屏事件。这样当用户点击该区域时，底下的 TextInput 会获得焦点。
  • 设置作为容器的 View[style=container] 的高度，这个高度就是数字单元格的宽高。使用 onLayout 回调来获得容器的高度，用来设置数字单元格的宽高。
const { onLayout, height } = useLayout()
const size = height
return (
  <View style={[styles.container, style]} onLayout={onLayout}>
    <TextInput />
    <View style={[styles.cover, StyleSheet.absoluteFillObject]}>
      {cells.map((value: string, index: number) => (
        <View
          style={[
            styles.cell,
            { width: size, height: size, marginLeft: index === 0 ? 0 : spacing }
          ]}>
          <Text style={styles.text}>{value}</Text>
        </View>
      ))}
    </View>
  </View>
)
  • cells 是一个字符数组，用于存放数字单元格的文本内容，它的长度是固定的。它的内容由用户输入的值拆分组成，如果长度不够，则填充空字符串 ""。
export default function CodeInput({ value, length = 4 }) {
  const cells = value.split('').concat(Array(length - value.length).fill(''))
}

开源方案

GitHub 上这个库实现了比较酷炫的效果。有需要的小伙伴可以使用。

这里有一个示例，供你参考。

以上就是React Native 中实现确认码组件示例详解的详细内容，更多关于React Native确认码组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React Native 启动流程详细解析

    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v0.64.2. 我们知道上述工程是一个安卓应用,打开 android/ 目录下源码文件,首先发现它创建了两个 java 文件:MainApplication.java 和 MainActivity.java,分别做了应用以及主 Activity 的定义. 安卓应用的启动流程是:在启动第一个 acti

  • React Native 加载H5页面的实现方法

    目录 一.基本使用 1.1 RN向H5发送数据 1.2 H5向RN传递数据 1.3 双向传值 二.属性和方法 2.1 属性 2.2 方法 三.使用示例 3.1 加载外源网页信息 3.2 登陆场景 3.3 功能模块嵌入到 RN 中 3.4 完整示例 一.基本使用 作为目前流行的移动跨平台开发技术,React Native 提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架.使用React Native开发时,经常会遇到加载H5网页的需求,此时需要用到react-native-w

  • React Native集成支付宝支付的实现方法

    React Native集成支付宝支付的实现方法

    在RN应用开发过程中,集成支付宝和微信支付除了直接使用第三方的插件之,比如:react-native-yunpeng-alipay,我们还可以借助RN提供的NativeModules调用原生模块来实现支付.NativeModules是JS代码调用原生模块的桥梁.所以,我们只需要在原生工程中集成支付宝和微信支付的sdk,然后使用NativeModules调用即可. 首先,我们去支付宝官网下载支付宝SDK,下载对应的Android版本. 然后,将aar文件放入android/app/libs 文件夹

  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

    Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需

  • React Native JSI实现RN与原生通信的示例代码

    React Native JSI实现RN与原生通信的示例代码

    目录 什么是JSI JSI有什么不同 在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法 原生调用JS 原生调用带参数的JS方法 在原生端调用js的函数参数 总结 问题 参考资料 什么是JSI React Native JSI (JavaScript Interface) 可以使 JavaScript 和 原生模块 更快.更简单的通信.它也是React Native 新的架构体系中Fabric UI层 和 Turbo 模块的核心部分. JSI有什么不同 JSI 移除了原生代

  • React-Native之截图组件react-native-view-shot的介绍与使用小结

    React-Native之截图组件react-native-view-shot的介绍与使用小结

    目录 一.现象 二.解决 三.总结: 一.现象 1.需求:把某展示页面进行截取保存到相册.并可进行以海报的形式分享出去: 2.支持iOS和安卓 二.解决 1.安装: npm i --save react-native-view-shot 2.进行链接处理:react-native link react-native-view-shot 3.当为IOS时执行还需要执行一下命令(安卓不用):cd ios && pod install && cd .. 4.使用: (1).引用:

  • React Native 中实现确认码组件示例详解

    React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • React Native中NavigatorIOS组件的简单使用详解

    一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android

  • React Native中实现动态导入的示例代码

    React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • react中使用antd及immutable示例详解

    react中使用antd及immutable示例详解

    目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im

  • React Native采用Hermes热更新打包方案详解

    React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • RxJS中的Observable和Observer示例详解

    RxJS中的Observable和Observer示例详解

    目录 引言 概念 牛刀小试 Observable Observable 剖析 Observer 结束语 引言 最近在项目当中别的小伙伴使用到了Rxjs,我一眼看上去有点懵,感觉挺复杂,挺绕的.于是抓紧补补课,然后就可以和小伙伴们一起交流怎么能优雅的使用Rxjs.由于内容比较多,会分为三篇来讲解说明 初识 RxJS中的 Observable 和 Observer 细说 RxJS中的 Operators 在谈 RxJS中的 Subject和Schedulers 概念 RxJS是一个库,可以使用可观察

  • Python PyQt5中窗口数据传递的示例详解

    目录 单一窗口数据传递 多窗口数据传递:调用属性 多窗口数据传递:信号与槽 开发应用程序时,若只有一个窗口则只需关心这个窗口里面的各控件之间如何传递数据.如果程序有多个窗口,就要关心不同的窗口之间是如何传递数据. 单一窗口数据传递 对于单一窗口的程序来说,一个控件的变化会影响另一个控件的变化通过信号与槽的机制就可简单解决. import sys from PyQt5.QtWidgets import QWidget, QLCDNumber, QSlider, QVBoxLayout, QAppl

  • react echarts tree树图搜索展开功能示例详解

    目录 前言 最终效果 版本信息 核心功能: 关键思路: 附上代码 数据data.js 功能: TreeUtils 总结: 前言 umi+antd-admin 框架中使用类组件+antd结合echarts完成树图数据展示和搜索展开功能 最终效果 版本信息 "antd": "3.24.2", "umi": "^2.7.7", "echarts": "^4.4.0", "echart

  • C语言中文件常见操作的示例详解

    目录 文件打开和关闭 文件写入 文件读取 fseek函数 ftell函数 Demo示例 解决读取乱码 FILE为C语言提供的文件类型,它是一个结构体类型,用于存放文件的相关信息.文件打开成功时,对它作了内存分配和初始化. 每当打开一个文件的时候,系统会根据文件的情况自动创建一个FILE结构的变量,并填充其中的信息,使用者不必关心细节. 一般都是通过一个FILE的指针来维护这个FILE结构的变量,这样使用起来更加方便. 文件打开和关闭 C语言的安全文件打开函数为_wfopen_s和_fopen_s

  • React实现数字滚动组件numbers-scroll的示例详解

    目录 一.设计原理 二.实现方式 三.使用方式 四.参数说明 数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭. 最近接了大屏的需求,数字滚动肯定是免不了的,所以开始撸袖子,造轮子了( numbers-scroll ). 首先给大家看下轮子的效果吧: 一.设计原理 如果要做到数字滚动效果,就一定要让数字有从下往上移动的感觉.如果只是纯粹的数字变化,显示出来的效果就会比较普通了,没有什么视

随机推荐