ReactNative支付密码输入框实现详解

目录
  • 正文
    • hooks版本

正文

项目中需求如果涉及钱包,支付等功能,可以大概率会用到输入密码组件,也算是个常见组件吧。

之前写过一个纯js的开源组件,使用的类的形式,也比较老了,可直接添加npm库到项目中进行使用。

hooks版本

最近项目需要,又重新写了一个hooks版本的,现在直接上源码,对于不想添加依赖库的伙伴,可直接复制源码到项目中,直接使用。

'use strict';
import React, {useRef, useState} from 'react';
import {StyleSheet, View, Pressable, TextInput} from 'react-native';
// 支付密码输入框
const PasswordInput = ({isAutoFocus = false}) => {
    const [msg, setMsg] = useState('');
    const textInputRef = useRef();
    const onEnd = (text: string) => {
        console.log('输入密码:', text);
    };
    const _getInputItem = () => {
        let inputItem = [];
        for (let i = 0; i < 6; i++) {
            inputItem.push(
                <View key={i} style={i === 5 ? [styles.textInputView, {borderRightWidth: 1}] : [styles.textInputView, {borderRightWidth: 0}]}>
                    {i < msg.length ? <View style={{width: 16, height: 16, backgroundColor: '#222', borderRadius: 8}} /> : null}
                </View>,
            );
        }
        return inputItem;
    };
    const _onPress = () => {
        textInputRef?.current.focus();
    };
    return (
        <Pressable onPress={_onPress}>
            <View style={styles.container}>
                <View style={{flexDirection: 'row', marginTop: 36, justifyContent: 'center'}}>
                    <TextInput
                        style={styles.textInputMsg}
                        ref={textInputRef}
                        maxLength={6}
                        autoFocus={isAutoFocus}
                        keyboardType="number-pad"
                        defaultValue={msg}
                        onChangeText={text => {
                            setMsg(text);
                            if (text.length === 6) {
                                onEnd(text);
                            }
                        }}
                    />
                    {_getInputItem()}
                </View>
            </View>
        </Pressable>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInputView: {
        height: 85 / 2,
        width: 85 / 2,
        borderWidth: 1,
        borderColor: '#c9c7c7',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInputMsg: {
        height: 45,
        zIndex: 99,
        position: 'absolute',
        width: 45 * 6,
        opacity: 0,
    },
});
export default PasswordInput;

使用方式就很简单了:

<PasswordInput />

项目库地址链接Github: github.com/wayne214/re…

以上就是ReactNative支付密码输入框实现详解的详细内容,更多关于ReactNative支付密码输入框的资料请关注我们其它相关文章!

(0)

相关推荐

  • React 之最小堆min heap图文详解

    目录 二叉树 完全二叉树 二叉堆 最小堆 React 采用原因 React 函数实现 插入过程(push) >>> 1 删除过程(pop) halfLength peek 二叉树 二叉树(Binary tree),每个节点最多只有两个分支的树结构.通常分支被称作“左子树”或“右子树”.二叉树的分支具有左右次序,不能随意颠倒. 完全二叉树 在一颗二叉树中,若除最后一层外的其余层都是满的,并且最后一层要么是满的,要么在右边缺少连续若干节点,则此二叉树为完全二叉树(Complete Binar

  • React 中的重新渲染类组件及函数组件

    目录 缘起 类组件 React 合成事件 定时器回调后触发 setState 异步函数后调触发 setState 原生事件触发 setState 修改不参与渲染的属性 只是调用 setState,页面会不会重新渲染 多次渲染的问题 测试代码 函数组件 React 合成事件 定时器回调 异步函数回调 原生事件 更新没使用的状态 小结 不同的情况 设置同样的 State React Hook 中避免多次渲染 将全部 state 合并成一个对象 使用 useReducer 状态直接用 Ref 声明,需

  • React不使用requestIdleCallback实现调度原理解析

    目录 1.起因 2.查找问题 3.解决问题 4.总结 5.吐槽 1.起因 最近在一边啃源码,一边手写fiber嘛,然后也看了很多博客和资料,基本上大伙好像都是说用requestIdleCallback来模拟react实现一个空闲时间调度.但我自己手写的时候把怎么用怎么怪,老是感觉有什么地方不对劲而且是在调度过程中,可能是因为我是想写出来来一个相对健全一点的模版方便我以后写源码的其他部分把,然后分析了一下所以有了这篇博客. 2.查找问题 1.requestIdleCallback是利用帧之间空闲时

  • 深入理解React调度(Scheduler)原理

    目录 异步调度 时间分片 异步调度原理 总结 异步调度 问题:由于对于大型的 React 应用,会存在一次更新,递归遍历大量的虚拟 DOM ,造成占用 js 线程,使得浏览器没有时间去做一些动画效果,伴随项目越来越大,项目会越来越卡. 对比Vue: Vue 有这 template 模版收集依赖的过程,轻松构建响应式,使得在一次更新中,Vue 能够迅速响应,找到需要更新的范围,然后以组件粒度更新组件,渲染视图. React 中,一次更新 React 无法知道此次更新的波及范围,所以 React 选

  • React为什么需要Scheduler调度器原理详解

    目录 正文 我们为什么需要Scheduler(调度器) Scheduler如何进行工作 总结 正文 最近在重学React,由于近两年没使用React突然重学发现一些很有意思的概念,首先便是React的Scheduler(调度器) 由于我对React的概念还停留在React 15之前(就是那个没有hooks的年代),所以接触Scheduler(调度器) 让我感觉很有意思: 在我印象中React的架构分为两层(React 16 之前) Reconciler(协调器)—— 负责找出变化的组件 Rend

  • react源码层分析协调与调度

    目录 requestEventTime requestUpdateLane findUpdateLane lanePriority LanePriority createUpdate enqueueUpdate 总结 协调与调度 reconciler流程 同步任务类型执行机制 异步任务类型执行机制 shouldYield performUnitOfWork beginWork completeUnitOfWork scheduler流程 performWorkUntilDeadline 总结 r

  • ReactNative支付密码输入框实现详解

    目录 正文 hooks版本 正文 项目中需求如果涉及钱包,支付等功能,可以大概率会用到输入密码组件,也算是个常见组件吧. 之前写过一个纯js的开源组件,使用的类的形式,也比较老了,可直接添加npm库到项目中进行使用. hooks版本 最近项目需要,又重新写了一个hooks版本的,现在直接上源码,对于不想添加依赖库的伙伴,可直接复制源码到项目中,直接使用. 'use strict'; import React, {useRef, useState} from 'react'; import {St

  • react-native中AsyncStorage实例详解

    react-native中AsyncStorage实例详解 AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的. AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象. 方法: static getItem(key: string, callback?: ?(error: ?Error, result: ?s

  • ThinkPHP实现微信支付(jsapi支付)流程教程详解

    之前写过一篇文章讲了PHP实现微信支付(jsapi支付)流程 ,详见文章:PHP实现微信支付(jsapi支付)流程. 当时的环境是没有使用框架的,直接在一个域名指向的目录下边新建目录之后访问该目录实现的,但应用到框架中,还是有一些问题,在ThinkPHP中,由于路由规则与支付授权目录有出入,所以会报错.本篇讲讲在TP中集成微信支付的流程. 鹅厂出的SDK和文档,就是让你看不懂,使劲绕,这酸爽用了就知道.文档和SDK不是应该越简单通俗易懂越好么?难道只有使劲重构才能显示出鹅厂程序猿技术的高超咩?额

  • PHP实现微信支付(jsapi支付)流程步骤详解

    最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微信支付 2.微信支付SDK,下载地址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 3.登录微信支付平台https://pay.weixin.qq.com/index.php/account/api_cert下载支付证书

  • ReactNative (API)AsyncStorage存储详解及实例

    AsyncStorage存储类似Android中的sharedpreference存储或者IOS中的NSDefaultUser不过ReactNative中的AsyncStorage只能存储字符串类型 常用方法: getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法.如果发生错误,会把Error对象传入callback方法

  • ReactNative Image组件使用详解

    最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜.所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅. Image组件 在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果.它可以用来显示网络图片.静态

  • java微信支付接入流程详解

    背景 由于项目是采用java编写的,微信包括微信支付大都是php相关,于是微信支付官方文档对java的支持就不是很友好,在网上找了很多文章,基本上没有一篇是真正跑的通的,经过一番整理,先将java接入微信支付详细流程总结出来以便后续使用. 步骤一 准备阶段:已认证微信号,且通过微信支付认证,这个可以看微信文档,很详细,这里就不再重复. 步骤二 配置授权目录,官方推荐使用https类型的url,不知道http能不能行,个人也推荐使用https的保证不会错. 配置授权域名 步骤三 微信支付二次开发所

  • 微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解

    本文实例讲述了PHP实现微信公众号支付功能.分享给大家供大家参考,具体如下: 直言无讳,我就是一个初涉微信开发的小白,写这篇博客的原因:一是为了给自己做下备忘记录,以便以后能回忆这条程序猿的坎坷路:二是希望能帮助到同是自学开发的小白们:三是对那些不屑一顾于我等尘埃的大牛们的控诉,小白的道路坎坷,你们凭什么总要一副高高在上的样子?我等敬而不畏... 背景介绍: 随着智能手机的普及,移动支付下的微信.支付宝所提供的便利需求不言而喻,好吧,至少我周围连个小摊贩的早餐都可以微信支付,而且人家手机还比我高

  • 微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解

    本文实例讲述了ThinkPHP框架下微信支付功能.分享给大家供大家参考,具体如下: 声明:原文主要摘自白俊遥博客 ,部分内容针对个人事例已作修改,主要用于自己的参考,欢迎指正. 注意:微信公众号支付,强烈建议使用外网可访问的链接测试,否则即便代码正确也无法调出支付界面,可使用草料二维码生成可扫描图片,也可直接在微信中输入网址. 使用框架:ThinkPHP 3.2.3 一.微信公众平台信息配置 1).进入微信公众平台 由左侧的"微信支付"进入配置界面,添加或修改正确的支付授权目录,注意该

  • vue项目支付功能代码详解

    1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构), 提交form就可以调用支付宝支付 代码: // alipayWap: 后台接口返回的form 片段 <div v-html="alipayWap" ref="alipayWap"></div> methods: { toAlipay () { this.$axios.get('xxx').then (res = >

随机推荐