前言
React Native 技术已经在移动应用开发中有了越来越广泛的应用，而密码输入框是常见的用户信息输入形式之一，因此在 React Native 的生态系统中推出了一个快速构建密码输入框的 npm 包 -- react-native-password-guard-input，它通过封装底层原生组件的方式，提供了一种简单的、高效的搭建密码输入框的方法，在开发中大大减少了代码的编写时间。
安装
要使用 react-native-password-guard-input，你需要在你的项目中安装它，这可以使用 npm 或者 yarn 完成：
--- ------- --------------------------------- ------
或
---- --- ---------------------------------
导入
在项目开始使用该组件之前，需要将其导入到项目中，真正使用前需要引入：
------ ------------- ---- ------------------------------------
属性 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
自定义样式是一组自定义的样式按照一定的顺序组成的一个对象。每个样式都传递一个函数来调用渲染。
--------------- --------- ----------- ---------- ---------- --- ------------------ - ------------ --------- -- --
（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 时，程序将自动隐藏密码输入框。
-------------- -
---------------
---------------- -----
---
-hidePassword() 方法：可在外部调用该方法，当 isPassword 设定为 false 时，程序将自动显示密码输入框。
-------------- -
---------------
---------------- ----
---
-使用示例
------ ------------- ---- ------------------------------------
------ ------ - -------- - ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ ------- -------- ----- -
----- ---------- ------------ - -------------
----- ----------------- - ------ -- -
------------------
--
------ -
----- -------------------------
--------------
------------------
----------------------------
-----------------
----------------
---------------
--------------- ----------------------
---------- -----------------
--------- ----------------
----------- ------------------
--
--
----- -----------------------------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
--------- -
---------- ---
--
--------------- -
--------------- ---------
----------- ---------
--
---------- -
---------- ---------
--------- ---
------ -------
--
----------- -
---------------- -------
------------- ---
------------ --
------------ ----------
--
---总结
经过本文对 react-native-password-guard-input 的详细讲解，大家应该已经掌握了怎么使用这个包来快速开发一个密码输入框。 react-native-password-guard-input 通过降低开发难度、快速提供定制化密码输入框的思路，帮助开发者快速构建 React Native 中的应用。在实际项目中掌握这个技术包，可以为您打造更加优秀高效的产品提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055f1e81e8991b448dcb86