如何在反应原生文本输入中自动粘贴在 SMS 中收到的一次性代码

Posted 2023-04-18

【中文标题】如何在反应原生文本输入中自动粘贴在 SMS 中收到的一次性代码

【英文标题】：How to automatically paste the one time code which is received in SMS in react-native text input

【发布时间】：2020-07-28 13:08:27

【问题描述】：

我正在使用来自 react-native 的 Textinput。如何在文本输入框中自动粘贴 otp 或代码。

【参考方案1】：

您可以使用“oneTimeCode”

例如：

<TextInput style=TEXTHEADER textContentType="oneTimeCode" />

网上参考：

https://reactnative.dev/docs/textinput#textcontenttype

【参考方案2】：

要将 otp 从短信自动粘贴到您的 ios 应用中的 react-native 中，您需要执行以下步骤：

设置 textContentType="oneTimeCode"（仅支持 iOS 设备）：

您需要使用以下模式发送短信： code: your otp here.

例如，我们在您的公司发送一条短信，如下所示： 代码：1234。

附：我的 otp 输入也有 autoFocus = true。

【参考方案3】：

您必须将textContentType="oneTimeCode" 和keyboardType="numeric" 放在您的TextInput 上。 如果您需要处理代码，还可以在 TextInput 中添加 onChangeText 属性

最后，最重要的是，如果您没有看到 iOS 弹出来自 SMS 的代码，请检查您发送的是哪条消息。 就我而言，用法语，

Veuillez saisir le code $code dans l'application 工作中 Veuillez entrer ce code dans l'application : $code 不工作

我已经检查了 RN 方面好几个小时了，最终解决了这个问题。

【讨论】：

当我使用textContentType="oneTimeCode" 时它适用于我，但当我添加keyboardType="numeric" 时它不起作用。

【参考方案4】：

从反应原生版本 0.66+ 开始

android：可以使用autocomplete设置为sms-otp

iOS：可以将textContentType设置为oneTimeCode

【参考方案5】：

最简单的方法是使用内置的短信监听包。

https://www.npmjs.com/package/react-native-android-sms-listener

https://www.npmjs.com/package/react-native-otp-verify

如果你使用 react-native-android-SMS-listner 包，可以使用如下代码。

let subscription = SmsListener.addListener(message => 
  let verificationCodeRegex = /Your verification code: ([\d]6)/

  if (verificationCodeRegex.test(message.body)) 
    let verificationCode = message.body.match(verificationCodeRegex)[1]

    YourPhoneVerificationApi.verifyPhoneNumber(
      message.originatingAddress,
      verificationCode
    ).then(verifiedSuccessfully => 
      if (verifiedSuccessfully) 
        subscription.remove()
        return
      

      if (__DEV__) 
        console.info(
          'Failed to verify phone `%s` using code `%s`',
          message.originatingAddress,
          verificationCode
        )
      
    )
  
)

如果您使用 react-native-otp-verify，您可以按照以下教程进行操作

https://tech.goibibo.com/building-otp-verification-component-in-react-native-with-auto-read-from-sms-2a9a400015b0

希望对你有帮助