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.mzph.cn/news/50003.shtml

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

相关文章

idea的断点调试

idea的断点调试

1、行断点 首先在代码的最左侧点击会显示红色的圆圈 第二步在main方法中右键选中debug run进行运行 会出现下面图片的情况 出现上图之后&#xff0c;点击console 下一步 这个时候就可以看到调试的结果了 6、方法调用栈&#xff1a;这里显示了该线程调试所经过的所有方法&…
阅读更多...
C语言小白急救 指针进阶讲解1

C语言小白急救 指针进阶讲解1

文章目录 指针一、 字符指针二、 指针数组三、数组指针1.数组的地址2.数组指针3.数组指针的应用 四、数组参数、指针参数1. 一维数组传参2.二维数组传参3.一级指针传参4.二级指针传参 五、函数指针1.函数的地址2.函数指针3.练习 指针 指针的概念&#xff1a; 1.指针就是个变量…
阅读更多...
跨越边界：从前端切图仔走进iOS开发（Swift版--上集）

跨越边界：从前端切图仔走进iOS开发（Swift版--上集）

本文简介 点赞 关注 收藏 学会了 本文将以前端开发者的视角&#xff0c;和各位工友进入iOS开发的世界。 本文以实战为导向&#xff0c;快速掌握iOS开发这个技能。 无论你是想要扩展技能领域&#xff0c;还是对iOS开发充满好奇&#xff0c;花一个下午学习本文都能打开iOS开…
阅读更多...
微服务中间件--http客户端Feign

微服务中间件--http客户端Feign

http客户端Feign http客户端Feigna.Feign替代RestTemplateb.自定义Feign的配置c.Feign的性能优化d.Feign的最佳实践分析e.Feign实现最佳实践(方式二) http客户端Feign a.Feign替代RestTemplate 以前利用RestTemplate发起远程调用的代码&#xff1a; String url "http:…
阅读更多...
【ARM】Day9 cortex-A7核I2C实验（采集温湿度）

【ARM】Day9 cortex-A7核I2C实验（采集温湿度）

1. 2、编写IIC协议&#xff0c;采集温湿度值 iic.h #ifndef __IIC_H__ #define __IIC_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "led.h" /* 通过程序模拟实现I2C总线的时序和协议* GPIOF ---> AHB4* I2C1_S…
阅读更多...
GMS基本模块TIN、Solids、Modflow2000/2005、MT3DMS、MODPATH。及其在地下水流动、溶质运移、粒子追踪方面的应用

GMS基本模块TIN、Solids、Modflow2000/2005、MT3DMS、MODPATH。及其在地下水流动、溶质运移、粒子追踪方面的应用

解决地下水数值模拟技术实施过程中遇到的困难&#xff0c;从而提出切实可行的环境保护措施&#xff0c;达到有效保护环境、防治地下水污染&#xff0c;推动经济社会可持续发展的目的。 &#xff08;1&#xff09;水文地质学&#xff0c;地下水数值模拟基础理论&#xff1b;&am…
阅读更多...
构建智慧停车场：4G DTU实现无线数据高速传输

构建智慧停车场：4G DTU实现无线数据高速传输

物联网技术的快速发展使得各种设备能够实现互联互通&#xff0c;无线网络技术给我们的日常生活带来了极大的便利。其中的网络技术如无线WiFi及4G网络已经成为了物联网应用中不可或缺的组成部分。而在工业领域中对4G无线路由器的应用是非常广泛的&#xff0c;人们通过4G工业路由…
阅读更多...
意外发现Cortex-M内核带的64bit时间戳，比32bit的DWT时钟周期计数器更方便，再也不用担心溢出问题了

意外发现Cortex-M内核带的64bit时间戳，比32bit的DWT时钟周期计数器更方便，再也不用担心溢出问题了

视频&#xff1a; https://www.bilibili.com/video/BV1Bw411D7F5 意外发现Cortex-M内核带的64bit时间戳&#xff0c;比32bit的DWT时钟周期计数器更方便&#xff0c;再也不用担心溢出问题了 介绍&#xff1a; 看参数手册的Debug章节&#xff0c;System ROM Table里面带Timestam…
阅读更多...
【Java】基础练习（十）

【Java】基础练习（十）

1.判断邮箱 输入一个电子邮箱&#xff0c;判断是否是正确电子邮箱地址。 正确的邮箱地址&#xff1a; 必须包含 字符&#xff0c;不能是开头或结尾必须以 .com结尾和.com之间必须有其他字符 (1) Email类&#xff1a; package swp.kaifamiao.codes.Java.d0823; /** 输入一个…
阅读更多...
Android——基本控件下（十七）

Android——基本控件下（十七）

1. 文本切换&#xff1a;TextSwitcher 1.1 知识点 &#xff08;1&#xff09;理解TextSwitcher和ViewFactory的使用。 1.2 具体内容 范例&#xff1a;切换显示当前时间 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools&…
阅读更多...
docker安装redis

docker安装redis

docker安装redis 一、基本介绍二、前期准备三、docker安装redis3.1 redis镜像拉取3.2 Docker挂载redis配置文件3.3 启动redis容器3.4 验证Redis容器是否正常运行 四、Docker删除Redis容器五、Docker删除Redis镜像 一、基本介绍 Docker 是一个开源的应用容器引擎,参考链接&…
阅读更多...
探索最短路径问题：寻找优化路线的算法解决方案

探索最短路径问题：寻找优化路线的算法解决方案

1. 前言&#xff1a;最短路径问题的背景与重要性 在现实生活中&#xff0c;我们常常面临需要找到最短路径的情况&#xff0c;如地图导航、网络路由等。最短路径问题是一个关键的优化问题&#xff0c;涉及在图中寻找两个顶点之间的最短路径&#xff0c;以便在有限时间或资源内找…
阅读更多...
【管理运筹学】第 5 章 | 整数规划 （2，割平面法及 0-1 变量的特性）

【管理运筹学】第 5 章 | 整数规划 （2，割平面法及 0-1 变量的特性）

文章目录 引言三、割平面法四、0-1 型整数规划4.1 0-1 变量的特性4.1.1 投资问题4.1.2 约束条件满足个数问题 写在最后 引言 前文我们介绍了整数规划的一种求解方法——分支定界法&#xff0c;可以求解纯整数和混合整数规划问题。现在我们来学习另一种整数规划求解方法——割平…
阅读更多...
Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

&#x1f389;工作中遇到这样一个需求场景&#xff1a;由于ES数据库中历史数据过多&#xff0c;占用太多的磁盘空间&#xff0c;需要定期地进行清理&#xff0c;在一定程度上可以释放磁盘空间&#xff0c;减轻磁盘空间压力。 &#x1f388;在经过调研之后发现&#xff0c;某服务…
阅读更多...
MyBatid动态语句且模糊查询

MyBatid动态语句且模糊查询

目录 什么是MyBtais动态语句&#xff1f;&#xff1f;&#xff1f; MyBatis常用的动态标签和表达式 if标签 Choose标签 where标签 MyBatis模糊查询 #与$的区别 ​编辑 MyBatis映射 resultType resultMap 什么是MyBtais动态语句&#xff1f;&#xff1f;&#xff1f;…
阅读更多...
视频转音频mp3怎么弄？

视频转音频mp3怎么弄？

视频转音频mp3怎么弄&#xff1f;在很多人看来&#xff0c;音频就是视频中的一部分&#xff0c;其实这时是一定道理的&#xff0c;视频是一种包含图像和有声音的多媒体文件&#xff0c;没有声音的视频是不完美的。时代发展到现在&#xff0c;短视频已经融入了我们生活的方方面面…
阅读更多...
【日常积累】Linux中vi/vim的使用

【日常积累】Linux中vi/vim的使用

概述 vim是由vi发展演变过来的文本编辑器&#xff0c;因其具有语法高亮显示、多视窗编辑、代码折叠、支持插件等功能&#xff0c;由于其功能相比vi来说更加强大&#xff0c;所以在实际工作中的使用更加广泛。 vim工作模式 Vim具有多种工作模式&#xff0c;常用的工作模式有&…
阅读更多...
微服务架构2.0--云原生时代

微服务架构2.0--云原生时代

云原生 云原生&#xff08;Cloud Native&#xff09;是一种关注于在云环境中构建、部署和管理应用程序的方法和理念。云原生应用能够最大程度地利用云计算基础设施的优势&#xff0c;如弹性、自动化、可伸缩性和高可用性。这个概念涵盖了许多方面&#xff0c;包括架构、开发、…
阅读更多...
Prometheus+Grafana+AlertManager监控Linux主机状态

Prometheus+Grafana+AlertManager监控Linux主机状态

文章目录 PrometheusGrafanaAlertManager监控平台搭建开始监控Grafana连接Prometheus数据源导入Grafana模板监控Linux主机状态 同系列文章 PrometheusGrafanaAlertManager监控平台搭建 Docker搭建并配置Prometheus Docker拉取并配置Grafana Docker安装并配置Node-Exporter …
阅读更多...
Python系统学习1-9-类三之特征

Python系统学习1-9-类三之特征

一、封装 数据角度&#xff1a;将一些基本数据类型复合成一个自定义类型。 优势&#xff1a;将数据与对数据的操作相关联。 代码可读性更高&#xff08;类是对象的模板&#xff09;。 行为角度&#xff1a;向类外提供必要的功能&#xff0c;隐藏实现的细节。 优势&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023