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

Question

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

Answer 1

截至react本机版本0.66+

安卓系统：可以使用自动完成设置为sms-otp

iOS:可以使用设置为oneTimeCode的textContentType

Answer 2

要在react native中从iOS应用程序中的短信自动粘贴otp，您需要执行以下步骤：

1. 设置textContentType＝"；oneTimeCode"；(仅iOS设备支持(：

您需要使用以下模式发送短信：<>代码：你的otp在这里

例如，我们在您的公司发送短信如下：<>代码：1234。

第页。S.我在otp输入上也有autoFocus={true}。

Answer 3

您可以使用；oneTimeCode"；

例如：

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

在线参考：

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

Answer 4

如果其他人正在移动浏览器中的React Native web中寻找如何做到这一点，您不需要textContentType，因为这是一个仅限iOS的道具。你可以通过简单地自动聚焦你的输入来做到这一点。当用户点击代码时，该代码将自动填充到所关注的任何输入。

<TextInput
autoFocus={true}
value={value}
caretHidden={true}
onChangeText={onChangeText}
keyboardType="number-pad"
/>

Answer 5

您必须将textContentType="oneTimeCode"和keyboardType="numeric"放在TextInput上。[编辑2023-01-22]有些人(@TaiyrBegeyev(说这是keyboardType="number-pad"，我不能再试一次，所以…你的举动！

如果您需要处理代码，也可以向TextInput 添加onChangeText道具

最后，最重要的是，如果你没有看到iOS从短信中弹出你的代码，请检查你发送的是哪条消息。就我而言，在法语中，

• Veuillez saisir le code ${code} dans l'application正在工作
• Veuillez entrer ce code dans l'application : ${code}不工作

我已经检查RN侧几个小时了，最终更改SMS是解决方案。

Answer 6

最简单的方法是使用内置包中的SMS侦听。

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

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

如果你使用的是react原生android短信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验证，您可以按照以下教程进行操作

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

希望这能帮助