npm 包 react-native-verification 使用教程

阅读时长 5 分钟读完

#npm 包 react-native-verification 使用教程

##介绍

React Native 是一个基于 JavaScript 和 React 的开源框架,专门用于构建跨平台原生APP。在 React Native 中,检验用户输入的正常与否是一件常见而且必须的事情。为了能够方便地实现验证码的发送和校验,一些开发者开发了一些验证码 npm 包,比如今天要讲的 react-native-verification。

##安装

在 cmd 中输入以下命令:

npm install react-native-verification --save

##使用方法

在 App.js 中,引入如下库:

import { getCode, verifyCode } from 'react-native-verification'

然后调用问 sendCode 函数,这个函数接受三个参数:

  • phoneNumber: 你要发送验证码的电话号码

  • requestUrl: 发送验证码的API接口

  • timeLeft: 可选参数,发送验证码的倒计时时间,单位为秒,默认为 60s

在执行完 sendCode 函数之后,用户就会收到一条带有验证码的短信。

getCode(verifyCode => { console.log(verifyCode) })

把验证码和用户输入的验证码传递给 verifyCode 函数:

verifyCode(code)

在这里,你可以选择调用其他函数,比如说:

  • checkCode(url, phoneNumber, code)

  • checkCodePromise(url, phoneNumber, code)

这两个函数是用来验证验证码的,前者是 callback 方式,后者则使用 promise 方式。

下面是一个完整的示例:

-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ----- ----- ---------------- - ---- --------------
------ - -------- ----------- --------- - ---- ---------------------------

----- --- ------- --------- -
  ----- - - ----------- --- ------ --- ----- --- --------- -- -

  -------- - -- -- -
    ------------------------- ------------------------------- --------------------
  -

  -------- -
    ------ -
      ------
        ----------- --------------
        ---------- ------------------------ ------------------ -- --------------- ------ ---- --- --
        ----------------- ------------------------
          ---------- -----------
        -------------------

        ------------------
        ---------- ----------------------- ------------------ -- --------------- ----- ---- --- --

        ----------------- ----------- --
          --------------------- -- -
            -----------------------
            ----------------------------------------- ----------------- ---------------- --------- -- -
              -- ----------- -
                --------------------
              - ---- -
                --------------------
              -
            --
          --
        --
          -------------------
        -------------------
      -------
    -
  -
-

------ ------- ---

在这个示例里,我们开发了一个简单的验证码发送和验证的应用程序。用户通过输入手机号码来获取验证码,app 随后会发送一条携带验证码的短信。在用户输入验证码之后,app 会调用 checkCode 函数来验证验证码的正误,这个函数只是简单判断验证码是否正确。

##总结

React Native 的生态系统中,有很多优秀的 npm 包。今天我们介绍了一个比较常见也比较有用的 npm 包, react-native-verification。我们在 App.js 中引入了这个库之后,实现了一个简单的验证码发送与验证应用程序。

希望这篇文章能够对大家学习和使用 React Native 时有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29a1

纠错
反馈