前言
React Native 技术已经在移动应用开发中有了越来越广泛的应用,而密码输入框是常见的用户信息输入形式之一,因此在 React Native 的生态系统中推出了一个快速构建密码输入框的 npm 包 -- react-native-password-guard-input
,它通过封装底层原生组件的方式,提供了一种简单的、高效的搭建密码输入框的方法,在开发中大大减少了代码的编写时间。
安装
要使用 react-native-password-guard-input
,你需要在你的项目中安装它,这可以使用 npm 或者 yarn 完成:
npm install react-native-password-guard-input --save
或
yarn add react-native-password-guard-input
导入
在项目开始使用该组件之前,需要将其导入到项目中,真正使用前需要引入:
import PasswordInput from 'react-native-password-guard-input';
属性 props 解释说明
react-native-password-guard-input
组件自带了大量的自定义属性和方法,下面将逐一讲解。
属性
1. 默认属性
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
passwordLength | Number | 6 |
指定密码的长度 |
onChange | Function | 文本变化时的回调函数,参数:text;如果是输入修改后的字符,返回加密字符串 | |
style | Style Object | 组件样式 | |
placeholder | String | ● |
密码输入框的占位符 |
backgroundColor | String | #FFF |
密码输入框的背景颜色 |
fontColorNotComplete | String | #000 |
输入未完成时密码输入框的文字颜色 |
fontColorComplete | String | #000 |
输入完成后密码输入框的文字颜色 |
borderColorNotComplete | String | #E6E6E6 |
输入未完成时密码输入框的边框颜色 |
borderColorComplete | String | #8E8E93 |
输入完成后密码输入框的边框颜色 |
borderWidth | Number | 1 |
密码输入框的边框宽度 |
borderRadius | Number | 4 |
密码输入框的边框圆角 |
onPressToInput | Function | 点击密码输入框时的回调函数 | |
maxLength | Number | 6 |
密码输入框的最大输入长度,可不设置限制 |
2. 自定义属性
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
isPassword | Bool | true |
是否为密码输入框 |
customStyles | Object | 自定义样式 | |
customPassword | String | * |
自定义加密密码字符 |
secureText | Bool | false |
是否以安全形式显示 |
customHeight | Number | 30 |
密码输入框的高度 |
customWidth | Number | 30 |
密码输入框的宽度 |
inputType | String | text |
密码输入框的输入类型 |
(1)isPassword
当 isPassword
设为 false
时,密码输入框将变成文本输入框,输入的内容将直接以普通文本的形式显示在输入框中,而不是以固定的加密字符形式显示。
(2)customStyles
自定义样式是一组自定义的样式按照一定的顺序组成的一个对象。每个样式都传递一个函数来调用渲染。
customStyles={{ boxStyle, inputStyle, textInput, marginTop: 30, inputWrapperStyle: { borderColor: '#F20989' }, }}
(3)customPassword
当 customPassword
被设定时,密码框中显示的字符将会是自定义字符。
(4)secureText
当 secureText
被设定时,密码框中显示的字符将会被替换成加密字符。
(5)customHeight 和 customWidth
customHeight
和 customWidth
分别是密码输入框的高度和宽度,自由设定后可适应自己项目的 UI 需要。
(6)inputType
inputType
是密码输入框的输入类型,当设为 "text"
时,可以输入小数、整数等类型。同 Android 原生输入框。
方法
react-native-password-guard-input
组件除了自带的属性之外,也提供了一些相关的方法,下面介绍一下这些方法的作用。
showPassword()
方法:可在外部调用该方法,当 isPassword
设定为 false
时,程序将自动隐藏密码输入框。
showPassword() { this.setState({ secureTextEntry: false }); }
hidePassword()
方法:可在外部调用该方法,当 isPassword
设定为 false
时,程序将自动显示密码输入框。
hidePassword() { this.setState({ secureTextEntry: true }); }
使用示例
-- -------------------- ---- ------- ------ ------------- ---- ------------------------------------ ------ ------ - -------- - ---- -------- ------ - ----- ----- ---------- - ---- --------------- ------ ------- -------- ----- - ----- ---------- ------------ - ------------- ----- ----------------- - ------ -- - ------------------ -- ------ - ----- ------------------------- -------------- ------------------ ---------------------------- ----------------- ---------------- --------------- --------------- ---------------------- ---------- ----------------- --------- ---------------- ----------- ------------------ -- -- ----- ----------------------------------------- ------- -- - ----- ------ - ------------------- ---------- - ----- -- ----------- --------- --------------- --------- -- --------- - ---------- --- -- --------------- - --------------- --------- ----------- --------- -- ---------- - ---------- --------- --------- --- ------ ------- -- ----------- - ---------------- ------- ------------- --- ------------ -- ------------ ---------- -- ---展开代码
总结
经过本文对 react-native-password-guard-input
的详细讲解,大家应该已经掌握了怎么使用这个包来快速开发一个密码输入框。 react-native-password-guard-input
通过降低开发难度、快速提供定制化密码输入框的思路,帮助开发者快速构建 React Native 中的应用。在实际项目中掌握这个技术包,可以为您打造更加优秀高效的产品提供帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055f1e81e8991b448dcb86