当前位置: 首页 > Web前端 > HTML

如果ReactNative支付密码输入框

时间:2023-03-28 12:39:43 HTML

项目涉及到钱包、支付等功能,大概率会用到输入密码组件,算是一个通用组件。之前写过一个纯js的开源组件,用的class比较老。可以直接将npm库添加到项目中使用。最近项目需要重写一个版本的hooks。现在直接上传源码。对于不想添加依赖库的小伙伴,可以直接复制源码到项目中直接使用。'usestrict';importReact,{useRef,useState}from'react';import{StyleSheet,View,Pressable,TextInput}from'react-native';//支持密码输入框constPasswordInput=({isAutoFocus=false})=>{const[msg,setMsg]=useState('');consttextInputRef=useRef();constonEnd=(text:string)=>{console.log('输入密码:',text);};const_getInputItem=()=>{让inputItem=[];对于(leti=0;i<6;i++){inputItem.push({i:null},);}返回输入项;};const_onPress=()=>{textInputRef?.current.focus();};返回({setMsg(text);如果(text.length===6){onEnd(text);}}}/>{_getInputItem()});};conststyles=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,},});导出默认密码输入;使用方法很简单:项目库地址链接Github:https://github.com/wayne214/r...