在移动应用程序开发中，手机号验证是必不可少的功能。react-native-phone-verification 是一个优秀的用于验证手机号的 npm 包，可用于 React Native 应用程序中。本文将介绍如何使用 react-native-phone-verification 包以及实现已验证手机号与后端交互。
安装
使用 npm 或 yarn 安装 react-native-phone-verification。
npm install react-native-phone-verification --save # 或使用 yarn yarn add react-native-phone-verification
引入
在需要使用 react-native-phone-verification 的组件中，引入 react-native-phone-verification 并导入 useRef 和 useState。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ----------------- ----------- --------- - ---- ---------------
------ ----------------- ---- ----------------------------------
------ ------- -------- ----- -
----- ------------ - -------------
----- ------------- --------------- - -------------
----- ------------------ -------------------- - -------------
------ -
----- -------------------------
--- --- ---
-------
--
-使用
在组件中添加以下代码，创建一个可验证的手机号输入框以及按钮。单击按钮将由 react-native-phone-verification 提供的函数 sendVerificationCode 发送短信验证码到用户的手机上。
-- -------------------- ---- -------
------ -
----- -------------------------
----------
--------------------
-------------------
-------------------- -- ---------------------
-------------------
--
-----------------
---------------------
----------- -- -
-------------------------------------------------------
--
-
----- --------------------------------------
-------------------
-------
--在它下面添加一个输入框和另一个按钮，用于输入短信验证码并验证用户的手机号。
-- -------------------- ---- -------
------ -
----- -------------------------
----------
--------------------
-------------------
-------------------- -- ---------------------
-------------------
--
-----------------
---------------------
----------- -- -
-------------------------------------------------------
--
-
----- --------------------------------------
-------------------
----------
--------------------
-------------------
-------------------- -- --------------------------
------------------------
--
-----------------
---------------------
----------- -- -
------------------------------------------------------------
--
-
----- -----------------------------------
-------------------
-------
--在 useRef 函数中创建一个 PhoneVerification 实例：
const verification = useRef(new PhoneVerification({
appName: '你的应用名',
appIconSource: require('./Image/Icon.png'),
defaultCountry: 'CN',
}));配置说明：
appName(string): 应用名称，将出现在发送的短信中。appIconSource(require 图像): 在发送的短信中使用的应用程序图标。defaultCountry(两字母国家代码): 默认使用的国家。默认为 ‘CN’。
实现与后端交互
verifyCodeWithServer 函数可用于将用户输入的验证码发送给服务器以进行验证，并根据服务器返回的结果通知用户该验证是否成功。在接收到成功的响应后，应将当前验证状态设置为已验证，以供后续验证调用。
-- -------------------- ---- -------
----- ---------- ------------ - ----------------
-------- ---------------- -
--------------------
---------------------------
---------------- -- -
-- ---------------- --- ---------- -
------------------
- ---- -
-------------------
-
--
---------- -- -
---------------
---
-最后的效果将类似于以下示例代码：
-- -------------------- ---- -------
------ ------ - ------- -------- - ---- --------
------ - ----- ----- ----------------- ----------- --------- - ---- ---------------
------ ----------------- ---- ----------------------------------
------ ------- -------- ----- -
----- ------------ - -------
--- -------------------
-------- ---------
-------------- ----------------------------
--------------- -----
--
--
----- ------------- --------------- - -------------
----- ------------------ -------------------- - -------------
----- ---------- ------------ - ----------------
-------- ---------------- -
--------------------
---------------------------
---------------- -- -
-- ---------------- --- ---------- -
------------------
- ---- -
-------------------
-
--
---------- -- -
---------------
---
-
------ -
----- -------------------------
----------
--------------------
-------------------
-------------------- -- ---------------------
-------------------
--
-----------------
---------------------
----------- -- -
-------------------------------------------------------
--
-
----- --------------------------------------
-------------------
----------
--------------------
-------------------
-------------------- -- --------------------------
------------------------
--
-----------------
---------------------
----------- -- -
-----------------------------
--
-
----- -----------------------------------
-------------------
--------- - -
----- -------- ------ ------- --------------
- - -
----- -------- ------ ----- --------------
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
------- ---
------------ --
------------ -------
------------- --
------ ----
-------- ---
------------- ---
--
------- -
---------------- -------
---------------- ---
------------------ ---
------------- --
--
----------- -
------ -------
--------- ---
---------- ---------
--
---在这个例子中，我们展示了一个验证手机号的示例，可以向用户发送短信验证码，并将输入的验证码发送后端进行验证。与后端交互完成后，我们向用户显示是否验证成功的信息。
至此，我们就学习了如何使用 react-native-phone-verification 这个 npm 包来验证手机号。希望这篇文章对 React Native 的前端开发人员有所帮助，也希望能够帮助您顺利完成您的应用程序中的手机号验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e34f7