npm 包 react-native-confirmation-code-input 使用教程
在 App 的开发过程中，用户可能需要填写验证码，为了更好的用户体验，我们可以使用专门的验证码输入组件 react-native-confirmation-code-input。这篇文章将会提供使用教程，包括安装依赖、基本使用方法和示例代码。
安装依赖
使用前需要先在项目中安装 react-native-confirmation-code-input 依赖，可以使用以下命令行：
npm install react-native-confirmation-code-input --save
或者
yarn add react-native-confirmation-code-input
基本使用方法
在你的 React Native App 中使用该组件需要：
- 导入 ConfirmationCodeInput 组件
import ConfirmationCodeInput from 'react-native-confirmation-code-input';
- 创建 ConfirmationCodeInput 组件并传递必要的属性
<ConfirmationCodeInput
autoFocus={false}
codeInputStyle={styles.codeInputStyle}
codeLength={4}
onFulfill={code => this.handleCode(code)}
/>其中：
autoFocus：是否自动获取焦点，默认为truecodeInputStyle：验证码输入框样式codeLength：验证码长度，默认为 4onFulfill：输入完成后触发的回调函数
示例代码
下面提供一个示例代码，代码中创建了一个包含验证码输入框的组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ --------------------- ---- ---------------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- --------
--
--------------- -
------------ ----
------------- --
------------ ------
--
-------------------- -
--------- ---
----------- -------
------ ------
-
---
----- ------------ ------- --------- -
---------------- -
---------------------- ------
-
-------- -
------ -
----- -------------------------
--------------------
----------------------
-----------------
--------------------------------------
--------------
--------------- -- ----------------------
------------------------------------------------
--
-------
-
-
-
------ ------- -------------结论
以上就是 react-native-confirmation-code-input 的基本使用方法，你可以在你的 App 中便捷地使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07ce