使用RN输入验证码(四个输入框)

先安装

yarn add react-native-confirmation-code-field

RN代码

import React, { useState } from 'react';
import { SafeAreaView, Text, StyleSheet, Dimensions } from 'react-native';import { CodeField, Cursor } from 'react-native-confirmation-code-field';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const styles = StyleSheet.create({root: { flex: 1, padding: 20 },title: { textAlign: 'center', fontSize: 30 },codeFiledRoot: { marginTop: 20, width: width / 1.2 },// 里面每个密码小框的样式cell: {width: 50,height: 50,lineHeight: 38,fontSize: 24,borderWidth: 2,borderColor: '#00000030',textAlign: 'center',borderRadius: 10,},// 当里面的每个密码小框被选中之后的样式focusCell: {borderColor: '#000',},
});function Index() {const [vcodeTxt, setVcodeTxt] = useState('')function onVcodeChangeText(e) {// 这里是输入框的值console.log('e', e);setVcodeTxt(e)}return (<CodeFieldvalue={vcodeTxt}onChangeText={onVcodeChangeText}// 输入密码框的个数cellCount={4}rootStyle={styles.codeFiledRoot}keyboardType="number-pad"renderCell={({ index, symbol, isFocused }) => (<Textkey={index}style={[styles.cell, isFocused && styles.focusCell]}>{symbol || (isFocused ? <Cursor style={{ height: 2 }} /> : null)}</Text>)}/>);
}export default Index;

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Aurora IP的Framing帧接口和Streaming流接口

本文介绍Aurora IP配置时要选择的接口类型以及两种接口类型之前的区别。 Aurora IP接口有两种模式&#xff1a;Framing帧接口&#xff0c;Streaming流接口 目前一直在用的都是Framing帧接口。 Framing帧接口和Streaming流接口的主要区别是什么呢&#xff1f; 顾名思义&#x…

国内用户掌握ChatGPT,你已超越万人!

在数字时代&#xff0c;掌握前沿技术往往意味着拥有更多的机遇和可能。ChatGPT&#xff0c;作为当前最热门的人工智能技术之一&#xff0c;已经证明了其在各个领域的广泛应用价值。但在中国&#xff0c;能熟练使用ChatGPT的人究竟领先了多少人&#xff1f;让我们深入探讨。>…

【Git】日志功能

1. git日志显示 # 显示前3条日志 git log -3# 单行显示 git log --oneline# 图表日志 git log --graph# 显示更改摘要 git log --stat# 显示更改位置 git log --patch 或 git log -p# 查看指定文件的提交历史记录 git log {filename}例子1&#xff1a;单行显示 例子2&#xff…

2024年最新阿里云服务器价格表_CPU内存+磁盘+带宽价格

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

ManageEngine EventLog Analyzer: 功能丰富的日志分析工具

来自 Zoho Corp. 的 ManageEngine EventLog Analyzer 是一个小型应用程序&#xff0c;提供了许多功能。该产品采用无代理方式收集和分析机器生成的日志。该工具可以收集和规范化事件日志和机器数据&#xff0c;并在易于使用的基于 Web 的界面中提供分析、搜索、报告生成和存档等…

华院计算荣获CSDN“创新企业”和“年度创新产品与解决方案”大奖

日前&#xff0c;全国最大的专业开发者社区CSDN发布“2023中国开发者影响力年度榜单”&#xff0c;华院计算凭借其卓越的认知智能引擎平台荣获“创新企业”和“年度创新产品与解决方案”两项大奖。 CSDN 以数据为基础&#xff0c;经过个人或企业提交资料、层层筛选、深入调研、…

【Redis】数据类型、事务执行、内存淘汰策略

目录 数据类型 Redis事务执行步骤 步骤&#xff1a; redis内存淘汰策略 设置内存淘汰策略 1.设置配置文件 2.通过命令设置 数据类型 官网解释 Understand Redis data types | Redis 首先&#xff0c;Redis 的所有键都是字符串,常用的数据类型有 5 种&#xff1a;Strin…

SpringBoot整合WebService

WebService是一个SOA&#xff08;面向服务的编程&#xff09;的架构&#xff0c;它是不依赖于语言&#xff0c;不依赖于平台&#xff0c;可以实现不同的语言间的相互调用&#xff0c;通过Internet进行基于Http协议的网络应用间的交互。 其实WebService并不是什么神秘的东西&…

推荐一款电子翻页书制作软件

随着数字化时代的到来&#xff0c;电子书籍越来越受到人们的喜爱。而一款优秀的电子翻页书制作软件&#xff0c;则能够帮助你轻松制作出专业级的电子书&#xff0c;让你的阅读体验更加丰富多彩。 今天&#xff0c;我们就来为大家推荐一款优秀的电子翻页书制作软件——FLBOOK在线…

数据结构 --- 复杂度概念及计算讲解(时间复杂度,空间复杂度)

今天没有sao话&#xff0c;今天认真学习 一、时间复杂度 1、概念讲解 2、计算讲解 二、空间复杂度 1、概念讲解 2、计算讲解 三、常见复杂度对比 四、完结撒❀ 前言&#xff1a; 经常刷题的人都知道&#xff0c;我们在解决一道题时可能有多个解法&#xff0c;那么如何…

使用EasyYapi插件简化导出yapi接口

安装 &#xff1a; 关键配置&#xff1a; 其中的token在这里拿&#xff1a; 使用&#xff1a; 导出当前Controller下的所有api&#xff1a;使用下图命令可仅导出指定的api: 附&#xff1a;配置部分参考了idea&#xff1a;使用easyYapi插件导出yapi接口

Docker Stack(堆栈) 部署多服务集群,多服务编排

1、Docker Stack简介 Docker Stack(堆栈) 是在 Swarm 上管理服务堆栈的工具。而在以前文章docker swarm集群搭建 介绍的 Docker Swarm 只能实现对单个服务的简单部署&#xff0c;于是就引出了Docker Stack。 上面我们介绍到 docker-compose&#xff1a;可以在一台机器上使用…

在阿里云服务器添加ssh,方便远程登录

前言&#xff1a; 添加ssh密钥步骤&#xff1a; chmod 700 .ssh #创建ssh cd .ssh chmod 700 authorized_keys #添加权限密钥 vim authorized_keys #编辑密钥 添加本地电脑ssh密钥 vim /etc/ssh/sshd_config #更改ssh配置文件 配置文件 # no default banner path #Banner no…

【分享】CMMI V3.0版本做了哪些改变?哪些企业适合申请CMMI3.0

​ CMM是由美国卡内基梅隆大学软件工程研究所1987年开发成功的&#xff0c;它基于过去所有软件工程过程改进的成果&#xff0c;吸取了以往软件工程的经验教训&#xff0c;提供了一个基于过程改进的框架&#xff1b;CMMI(Capability Maturity Model Integration能力成熟度模型集…

网络安全-文件包含

一、php://input 我们先来看一个简单的代码 <meta charset"utf8"> <?php error_reporting(0); $file $_GET["file"]; if(stristr($file,"php://filter") || stristr($file,"zip://") || stristr($file,"phar://&quo…

压力测试面试题及答案!

压力测试是软件测试中的一种测试方式&#xff0c;用于评估软件系统在各种压力条件下的性能表现。以下是常见的压力测试面试题及答案&#xff1a; 什么是压力测试&#xff1f; 压力测试是一种测试方式&#xff0c;用于模拟实际用户在正常和峰值负载条件下对软件系统施加的压力&…

Shell脚本入门

1.shell脚本的创建和执行 创建一个文件 写一个shell脚本 上面这种方法不常用&#xff0c;常用下面 所有可执行文件是绿色 绝对路径 相对路径 在该文件下运行.sh文件 souce 要在该文件的文件夹下执行 . hello.sh和./hello.sh是完全不同的&#xff0c;点空格是点命令 2.变量 …

IT部门都想要的跨网文件交换解决方案,了解一下

近年来全球网络安全威胁态势的加速严峻&#xff0c;使得企业对于网络安全有了前所未有的关注高度&#xff0c;企业的网络安全体系建设正从“以合规为导向”转变到“以风险为导向”&#xff0c;从原来的“保护安全边界”转换到“保护核心数据资产”的思路上来。 为了保护企业的核…

EPSON的实时时钟模块RX8010SJ丰富的定时功能及超低功耗特性

温控器是用于控制温度的设备&#xff0c;目前市面上的温控器用于控制地暖空调、热水器、中央新风系统等设备。随着智能家居理念深入人心&#xff0c;人们也期望温控器不仅能控得"准”&#xff0c;还能控得“智能”。为了实现智能控制&#xff0c;温控器一般需要实时时钟模…

【随笔】Git -- 基本概念和使用方式(五)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…