如何使用React Native实现短信验证码自动填充功能

核心实现逻辑 #

跨端实现的底层逻辑分别适配双端系统原生能力：

• iOS 12及以上系统自带短信验证码识别能力，只要给输入框配置对应属性，系统收到含验证码的短信时会自动在键盘上方提示填充，iOS 17及以上版本支持无需用户点击的静默自动填充。
• Android 端推荐用Google Play服务的SMS Retriever API实现，不需要申请高危的短信读取权限，符合应用商店上架规则，只要短信格式匹配应用特征即可自动捕获内容提取验证码。

跨平台适配包推荐 #

• react-native-otp-verify
  目前适配性最好的主流方案，同时支持iOS原生自动填充配置和Android的SMS Retriever API，无需申请READ_SMS权限，适配RN 0.60+版本的自动链接，维护状态稳定。使用时只需要把生成的应用11位哈希值添加到境外短信服务商的发送模板末尾，即可触发Android端的自动捕获。
• 系统原生能力+剪贴板组合方案
  适合极简场景使用，iOS端无需安装任何依赖，直接配置输入框属性即可实现基础填充能力；Android端如果是内部测试用的demo，可以配合剪贴板监听实现填充，不推荐上架使用，涉及短信权限的申请很容易被商店驳回。

最简实现示例 #

iOS原生无依赖实现 #

直接给验证码输入框添加对应属性即可：

import { TextInput } from 'react-native';

<TextInput
  placeholder="请输入6位验证码"
  textContentType="oneTimeCode" // iOS自动填充核心配置
  keyboardType="number-pad"
  maxLength={6}
  value={verifyCode}
  onChangeText={setVerifyCode}
/>

双端统一实现（基于react-native-otp-verify） #

import { useState, useEffect } from 'react';
import { TextInput } from 'react-native';
import RNOtpVerify from 'react-native-otp-verify';

const VerifyCodeInput = () => {
  const [verifyCode, setVerifyCode] = useState('');

  useEffect(() => {
    // 首次运行可打印获取应用哈希值，配置到短信模板末尾
    RNOtpVerify.getHash().then(hash => console.log('应用哈希值：', hash)).catch(console.log);

    // 监听验证码短信
    const otpListener = RNOtpVerify.addListener(otpContent => {
      // 从短信内容提取6位数字验证码，正则可根据实际格式调整
      const codeMatch = otpContent.match(/\d{6}/);
      if (codeMatch) {
        setVerifyCode(codeMatch[0]);
        // 填充完成后移除监听避免重复触发
        RNOtpVerify.removeListener();
      }
    });

    return () => RNOtpVerify.removeListener();
  }, []);

  return (
    <TextInput
      placeholder="请输入6位验证码"
      textContentType="oneTimeCode"
      keyboardType="number-pad"
      maxLength={6}
      value={verifyCode}
      onChangeText={setVerifyCode}
    />
  );
};

export default VerifyCodeInput;

注意事项 #

• Android端使用SMS Retriever API时，短信总长度不能超过140字节，发送方号码不能存在于用户通讯录中，否则会识别失败。
• iOS端不需要额外配置短信模板，只要短信内容包含验证码、code这类关键词，系统就会自动识别匹配。
• 不要使用需要申请READ_SMS权限的第三方包，当前全球主流应用商店对该权限审核都非常严格，非核心功能申请会直接被驳回。

内容的提问来源于stack exchange，提问作者Nightcrawler