ReactNative 密码生成器实战

效果展示图

在这里插入图片描述

使用插件

  • Formik

    负责表单校验、监听表单提交、数据校验错误信息展示

  • Yup

    负责表单校验规则

分析页面

从上述的展示图我们可以看到的主要元素有：输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0，所以我们可以限定密码长度输入框的规则，即密码长度最小 4 位，最大 16 位，所以我们需要进行表单数据校验操作。

因为我们生产的密码包含大小写、数字和特殊字符，所以我们需要有辅助的功能函数来帮我们来支撑业务。而密码生产的业务功能函数可以划分这几个部分：

  • 生成密码字符串

    存放大小写、数字和特殊字符变量，并且判断用户是否勾选了对应的生成条件，例如是否勾选了是否包含小写字母，并且调用创建密码的功能函数

  • 创建密码

    通过用户制定的规则生成对应的密码并返回

  • 重置密码状态

    重置密码生成器中所有数据的状态

构建页面

根据页面分析和页面展示，我们可以首先实现页面的整体搭建和样式名称的定义，具体代码如下：

export default function PasswordCheck() {return (<ScrollView keyboardShouldPersistTaps="handled"><SafeAreaView style={styles.appContainer}><View style={styles.formContainer}><Text style={styles.title}>密码生产器</Text><View style={styles.inputWrapper}><View style={styles.inputColumn}><Text style={styles.heading}>密码长度</Text></View><TextInputstyle={styles.inputStyle}placeholder="Ex. 8"keyboardType="numeric"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包含小写字母</Text><BouncyCheckboxdisableBuiltInStateisChecked={lowerCase}fillColor="#29AB87"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包括大写字母</Text><BouncyCheckboxdisableBuiltInStateisChecked={upperCase}fillColor="#FED85D"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包括数字</Text><BouncyCheckboxdisableBuiltInStateisChecked={numbers}onPress={() => setNumbers(!numbers)}fillColor="#C9A0DC"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包含符号</Text><BouncyCheckboxdisableBuiltInStateisChecked={symbols}fillColor="#FC80A5"/></View><View style={styles.formActions}><TouchableOpacity style={styles.primaryBtn}><Text style={styles.primaryBtnTxt}>生成密码</Text></TouchableOpacity><TouchableOpacity style={styles.secondaryBtn}><Text style={styles.secondaryBtnTxt}>重置</Text></TouchableOpacity></View></View>{isPassGenerated ? (<View style={[styles.card, styles.cardElevated]}><Text style={styles.subTitle}>生成结果:</Text><Text style={styles.description}>长按密码进行复制</Text><Text selectable={true} style={styles.generatedPassword}>{password}</Text></View>) : null}</SafeAreaView></ScrollView>);
}

编写样式

定义好框架后，我们也有对应的样式名称，那么我们就可以逐步实现样式。

const styles = StyleSheet.create({appContainer: {flex: 1,},formContainer: {margin: 8,padding: 8,},title: {fontSize: 32,fontWeight: "600",marginBottom: 15,},subTitle: {fontSize: 26,fontWeight: "600",marginBottom: 2,},description: {color: "#758283",marginBottom: 8,},heading: {fontSize: 15,},inputWrapper: {marginBottom: 15,alignItems: "center",justifyContent: "space-between",flexDirection: "row",},inputColumn: {flexDirection: "column",},inputStyle: {padding: 8,width: "30%",borderWidth: 1,borderRadius: 4,borderColor: "#16213e",},errorText: {fontSize: 12,color: "#ff0d10",},formActions: {flexDirection: "row",justifyContent: "center",},primaryBtn: {width: 120,padding: 10,borderRadius: 8,marginHorizontal: 8,backgroundColor: "#5DA3FA",},primaryBtnTxt: {color: "#fff",textAlign: "center",fontWeight: "700",},secondaryBtn: {width: 120,padding: 10,borderRadius: 8,marginHorizontal: 8,backgroundColor: "#CAD5E2",},secondaryBtnTxt: {textAlign: "center",},card: {padding: 12,borderRadius: 6,marginHorizontal: 12,},cardElevated: {backgroundColor: "#ffffff",elevation: 1,shadowOffset: {width: 1,height: 1,},shadowColor: "#333",shadowOpacity: 0.2,shadowRadius: 2,},generatedPassword: {fontSize: 22,textAlign: "center",marginBottom: 12,color: "#000",},
});

编写对应功能函数

我们完成了页面的布局，接下来就是实现生产密码的功能，我这里拆解成生成密码字符串、创建密码和重置密码状态三个功能函数，具体的功能函数如下：

/*** 生成密码字符串* @param passwordLength 密码长度*/const generatePasswordString = (passwordLength: number) => {let characterList = ''; // 生产密码的所有相关字符const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';const digitChars = '0123456789';const specialChars = '!@#$%^&*()_+';// 根据用户的选择，把相关字符拼接到characterList中if (upperCase) {characterList += upperCaseChars}if (lowerCase) {characterList += lowerCaseChars}if (numbers) {characterList += digitChars}if (symbols) {characterList += specialChars}const passwordResult = createPassword(characterList, passwordLength)setPassword(passwordResult)setIsPassGenerated(true)}/*** 根据密码总字符串和密码长度生产随机字符串** @param characters 生产密码的所有相关字符* @param passwordLength 密码长度* @returns 生成的随机密码*/const createPassword = (characters: string, passwordLength: number) => {let result = ''for (let i = 0; i < passwordLength; i++) {const characterIndex = Math.round(Math.random() * characters.length)result += characters.charAt(characterIndex)}return result}/*** 密码重置*/const resetPasswordState = () => {setPassword('')setIsPassGenerated(false)setLowerCase(true)setUpperCase(false)setNumbers(false)setSymbols(false)}

表单校验

在简单介绍 React Native 整合 Formik 实现表单校验中我只是简单介绍了Formik的常用的几个属性，而这次我们要使用如下几个属性：

属性类型说明
touched{ [field: string]: boolean }判断表单字符是否已经访问或者修改过
isValidboolean如果没有错误（即错误对象为空），则返回 true，否则返回 false
handleChange(e: React.ChangeEvent) => void主键更新 values[key]对应的值，其中 key 是事件发出输入的名称属性。如果 name 属性不存在，handleChange 将查找输入的 id 属性

具体的代码如下：

<FormikinitialValues={{ passwordLength: "" }}validationSchema={PasswordSchema}onSubmit={(values) => {generatePasswordString(+values.passwordLength);}}
>{({values,errors,touched,isValid,handleChange,handleSubmit,handleReset,}) => (<><View style={styles.inputWrapper}><View style={styles.inputColumn}><Text style={styles.heading}></Text>{touched.passwordLength && errors.passwordLength && (<Text style={styles.errorText}>{errors.passwordLength}</Text>)}</View><TextInputstyle={styles.inputStyle}value={values.passwordLength}onChangeText={handleChange("passwordLength")}placeholder="例如：8"keyboardType="numeric"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包含小写字母</Text><BouncyCheckboxdisableBuiltInStateisChecked={lowerCase}onPress={() => setLowerCase(!lowerCase)}fillColor="#29AB87"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包括大写字母</Text><BouncyCheckboxdisableBuiltInStateisChecked={upperCase}onPress={() => setUpperCase(!upperCase)}fillColor="#FED85D"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包括数字</Text><BouncyCheckboxdisableBuiltInStateisChecked={numbers}onPress={() => setNumbers(!numbers)}fillColor="#C9A0DC"/></View><View style={styles.inputWrapper}><Text style={styles.heading}>是否包含符号</Text><BouncyCheckboxdisableBuiltInStateisChecked={symbols}onPress={() => setSymbols(!symbols)}fillColor="#FC80A5"/></View><View style={styles.formActions}><TouchableOpacitydisabled={!isValid}style={styles.primaryBtn}onPress={() => handleSubmit()}><Text style={styles.primaryBtnTxt}>生成密码</Text></TouchableOpacity><TouchableOpacitystyle={styles.secondaryBtn}onPress={() => {handleReset();resetPasswordState();}}><Text style={styles.secondaryBtnTxt}>重置</Text></TouchableOpacity></View></>)}
</Formik>

完整代码下载

完整代码下载

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

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

相关文章

各种文件类型

各种文件类型

1.配置文件 json app.json 是当前⼩程序的全局配置&#xff0c;包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。 普通快速启动项⽬ ⾥边的 app.json 字段的含义 1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径&#xff0c;这是为了让微信客⼾端知道…
阅读更多...
【day8】驱动

【day8】驱动

作业&#xff1a;通过GPIO子系统编写LED灯的驱动&#xff0c;应用程序测试 在led驱动中设置一个定时器&#xff0c;实现底板三盏灯一秒亮一秒灭 1.找引脚 led1---->gpioz组5号引脚 led2---->gpioz组6号引脚 led3---->gpioz组7号引脚 2.加设备树节点 //led的设备树节点…
阅读更多...
无涯教程-PHP - 移除的扩展

无涯教程-PHP - 移除的扩展

以下扩展已从PHP 7开始删除- eregmssqlmysqlsybase_ct 以下SAPI已从PHP 7开始删除- aolserverapacheapache_hooksapache2filtercaudiumcontinuityisapimilternsapiphttpdpi3webroxenthttpdtuxwebjames PHP - 移除的扩展 - 无涯教程网无涯教程网提供以下扩展已从PHP 7开始删除…
阅读更多...
2023年国赛 高教社杯数学建模思路 - 案例：感知机原理剖析及实现

2023年国赛 高教社杯数学建模思路 - 案例：感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…
阅读更多...
【QT5-自我学习-线程qThread练习-两种使用方式-2：通过继承Qobject类-自己实现功能函数方式-基础样例】

【QT5-自我学习-线程qThread练习-两种使用方式-2：通过继承Qobject类-自己实现功能函数方式-基础样例】

【QT5-自我学习-线程qThread练习-两种使用方式-2&#xff1a;通过继承Qobject类-自己实现功能函数方式-基础样例】 1、前言2、实验环境3-1、学习链接-参考文章3-2、先前了解-自我总结&#xff08;1&#xff09;线程处理逻辑事件&#xff0c;不能带有主窗口的事件&#xff08;2&…
阅读更多...
SQL中ON筛选和Where筛选的区别

SQL中ON筛选和Where筛选的区别

转载&#xff1a;sql连接查询中on筛选与where筛选的区别https://zhuanlan.zhihu.com/p/26420938 结论:on后面接上连接条件&#xff0c;where后面接上过滤条件
阅读更多...
iFluor 594 Styramide是一种荧光染料，常用于生物分子标记和成像

iFluor 594 Styramide是一种荧光染料，常用于生物分子标记和成像

试剂 | 基础知识概述&#xff08;部分&#xff09;: 中文名称&#xff1a;Alexa Fluor 594酪Styramide 分子量&#xff1a;1341.71 胺的优异替代品 100 Slides 英文名称&#xff1a;iFluor 594 Ex (nm)&#xff1a;588 Em (nm)&#xff1a;604 规格标准&#xff1a;1g&am…
阅读更多...
opencv 案例实战01-停车场车牌识别实战

opencv 案例实战01-停车场车牌识别实战

需求分析&#xff1a; 车牌识别技术主要应用领域有停车场收费管理&#xff0c;交通流量控制指标测量&#xff0c;车辆定位&#xff0c;汽车防盗&#xff0c;高速公路超速自动化监管、闯红灯电子警察、公路收费站等等功能。对于维护交通安全和城市治安&#xff0c;防止交通堵塞…
阅读更多...
单片机的ADC

单片机的ADC

如何理解ADC。ADC就是将模拟量转换成数字量的过程&#xff0c;就是转换为计算机所能存储的0和1序列&#xff0c;比如将模拟量转换为一个字节&#xff0c;所以这个字节的大小要能反应模拟量的大小&#xff0c;比如一个0-5V的电压测量量&#xff08;外部输入电压最小0V,最大为5V&…
阅读更多...
YOLOv5算法改进（3）— 添加CBAM注意力机制

YOLOv5算法改进（3）— 添加CBAM注意力机制

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。注意力机制是近年来深度学习领域内的研究热点&#xff0c;可以帮助模型更好地关注重要的特征&#xff0c;从而提高模型的性能。CBAM&#xff08;Convolutional Block Attention Module&#xff09; 是一种用于前馈卷积神经…
阅读更多...
nginx代理webSocket链接，webSocket频繁断开重连

nginx代理webSocket链接，webSocket频繁断开重连

一、场景 1、使用nginx代理webSocket链接&#xff0c;消息发送和接收都是正常的&#xff0c;但webSocket链接会频繁断开重连 2、如果不使用nginx代理则一切正常 3、程序没有做webSocket心跳处理 如下图 二、nginx代理配置 upstream cloud_ass {#ip_hash;server 192.168.1.…
阅读更多...
战略是通过分析战领一个位置

战略是通过分析战领一个位置

战略定位派&#xff1a;战略形成是一个分析过程【安志强趣讲266期】 趣讲大白话&#xff1a;占个有利位置 **************************** 定位通俗讲就是占个有利位置 企业界“心智定位”和“战略定位”吵得很凶 定位这个词最先由特劳特提出&#xff0c;营销要占领消费者的心智…
阅读更多...
功能强大、超低功耗的STM32WL55JCI7、STM32WL55CCU7、STM32WL55CCU6 32位无线远距离MCU

功能强大、超低功耗的STM32WL55JCI7、STM32WL55CCU7、STM32WL55CCU6 32位无线远距离MCU

STM32WL55xx 32位无线远距离MCU嵌入了功能强大、超低功耗、符合LPWAN标准的无线电解决方案&#xff0c;可提供LoRa、(G)FSK、(G)MSK和BPSK等各种调制。STM32WL55xx无线MCU的功耗超低&#xff0c;基于高性能Arm Cortex-M4 32位RISC内核&#xff08;工作频率高达48MHz&#xff09…
阅读更多...
R语言实现网状Meta分析（1）

R语言实现网状Meta分析（1）

#R语言实现网状Meta library(gemtc) help(package"gemtc") data<-gemtc::smoking #注意按照实例格式编写数据 net<-mtc.network(data$data.ab) #网状图 plot(net,mode"circle",displaylabelsT,boxed.labelF) summary(net) #网状model model<-mtc…
阅读更多...
SpringBoot整合Mybatis 简单试用

SpringBoot整合Mybatis 简单试用

1. 导入依赖 我使用MySQL&#xff0c;需要导入MySQL的驱动依赖此外要在SpringBoot中使用Mybatis&#xff0c;则需要导入Mybatis启动器 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifact…
阅读更多...
精益求精：通付盾安卓应用加固升级，为移动安全保驾护航！

精益求精：通付盾安卓应用加固升级，为移动安全保驾护航！

在如今竞争激烈的移动应用领域&#xff0c;保障应用资源的安全性成为刻不容缓的任务。最近&#xff0c;通付盾针对资源加密方案进行了全面升级&#xff0c;大幅增强了其兼容性&#xff0c;实现了更全面的资源文件类型保护。这次升级为移动应用的安全性和稳定性迈出了坚实的一步…
阅读更多...
kingbase(人大金仓)数据库的常用知识点与简单巡检

kingbase(人大金仓)数据库的常用知识点与简单巡检

查看服务是否已设为开机自启 systemctl list-dependencies |grep kingbasehttps://blog.csdn.net/gyqailxj/article/details/127290687
阅读更多...
【C# 基础精讲】使用async和await进行异步编程

【C# 基础精讲】使用async和await进行异步编程

在C#中&#xff0c;使用async和await关键字进行异步编程是一种强大的工具&#xff0c;可以在不阻塞主线程的情况下执行耗时操作&#xff0c;提高程序的并发性和响应性。本文将深入探讨async和await的基本概念、使用场景、编码规范以及一些示例&#xff0c;以帮助您更好地理解如…
阅读更多...
爬虫：绕过5秒盾Cloudflare和DDoS-GUARD

爬虫：绕过5秒盾Cloudflare和DDoS-GUARD

本文章仅供技术研究参考&#xff0c;勿做它用&#xff01; 5秒盾的特点 <title>Just a moment...</title> 返回的页面中不是目标数据&#xff0c;而是包含上面的代码&#xff1a;Just a moment... 或者第一次打开网页的时候&#xff1a; 这几个特征就是被Cloud…
阅读更多...
VMware 17 Player下CentOS的安装与配置

VMware 17 Player下CentOS的安装与配置

本文详细记录VMware 17 Player的安装&#xff0c;以及其中Centos虚拟机的安装&#xff1b;内容包含下载、安装全过程&#xff1b;另外包含一些基本的应用测试阐述。 安装VMware VMware下载 点击即可下载&#xff1a;https://www.vmware.com/go/getplayer-win 官网里面找版本&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023