Expo React Native应用如何实现OTP短信自动填充功能

核心实现步骤 #

直接给OTP对应的TextInput组件添加textContentType属性即可，无需额外安装第三方依赖、无需修改原生配置：

import { useState } from 'react';
import { TextInput, View } from 'react-native';

export default function OtpInput() {
  const [otpCode, setOtpCode] = useState('');

  return (
    <View>
      <TextInput
        placeholder="请输入6位短信验证码"
        // 关键配置：告知系统该输入框用于填充一次性验证码
        textContentType="oneTimeCode"
        // 可选辅助配置
        keyboardType="number-pad"
        maxLength={6}
        autoFocus={true}
        value={otpCode}
        onChangeText={setOtpCode}
      />
    </View>
  )
}

生效前提 #

• 设备系统为iOS 12及以上版本，该能力为iOS系统原生自带
• 收到的短信内容符合iOS验证码识别规则：建议包含「验证码」「校验码」「code」等关键词，验证码数字单独展示，例如您的登录验证码为：123456，10分钟内有效，请勿泄露给他人

特殊场景适配 #

如果使用的是拆分式的多输入框OTP组件，只需给第一个输入框添加textContentType="oneTimeCode"属性，拿到系统填充的完整6位验证码后，自行拆分赋值给每个输入框即可。

注意事项 #

• 该配置仅针对iOS系统生效，安卓端如需实现自动填充能力，需要单独申请短信读取权限或适配谷歌自动填充服务
• Expo开发环境下可直接调试生效，无需执行预构建操作

效果参考 #

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