React Native自定义OTP组件iOS自动填充异常修复咨询

问题根源 #

iOS的OTP自动填充机制与Android不同，它只会将完整的OTP字符串填入第一个获取焦点的输入框，不会自动拆分内容到多个独立输入框，这是导致仅第一个字符填充成功的核心原因。

可行修改方案 #

方案一：用隐藏输入框接收完整OTP，再分发到显示框

这是最可靠的解决方案，既保留原有UI，又适配iOS自动填充逻辑：

1. 添加一个完全隐藏的TextInput，专门用于接收iOS自动填充的完整OTP；
2. 将接收到的OTP字符串拆分后，同步到各个显示输入框的状态中；
3. 原有显示输入框保持受控状态，同时支持手动输入的焦点切换逻辑。

代码示例：

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

const BoxedOTP = ({ length = 6 }) => {
  const [otpDigits, setOtpDigits] = useState<string[]>(Array(length).fill(''));
  const inputRefs = useRef<(TextInput | null)[]>([]);

  return (
    <View style={styles.container}>
      {/* 隐藏的OTP接收输入框 */}
      <TextInput
        style={styles.hiddenInput}
        autoComplete="one-time-code"
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        onChangeText={(fullOtp) => {
          if (fullOtp.length === length) {
            setOtpDigits(fullOtp.split(''));
          }
        }}
      />
      {/* 显示用的分框输入 */}
      {otpDigits.map((digit, index) => (
        <TextInput
          key={index}
          style={styles.otpBox}
          value={digit}
          maxLength={1}
          keyboardType="number-pad"
          onChangeText={(text) => {
            const newDigits = [...otpDigits];
            newDigits[index] = text;
            setOtpDigits(newDigits);
            // 手动输入时自动跳转到下一个框
            if (text && index < length - 1) {
              inputRefs.current[index + 1]?.focus();
            }
          }}
          onKeyPress={(e) => {
            // 处理删除键跳转上一个框
            if (e.nativeEvent.key === 'Backspace' && !digit && index > 0) {
              inputRefs.current[index - 1]?.focus();
            }
          }}
          ref={(el) => (inputRefs.current[index] = el)}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  hiddenInput: {
    position: 'absolute',
    opacity: 0,
    height: 0,
    width: 0,
    zIndex: -1,
  },
  otpBox: {
    width: 50,
    height: 50,
    borderWidth: 1,
    borderColor: '#ccc',
    textAlign: 'center',
    fontSize: 20,
  },
});

export default BoxedOTP;

方案二：调整输入框属性并优化焦点逻辑（辅助补充）

如果不想引入隐藏输入框，可以尝试调整输入框属性，引导iOS识别OTP输入组，但效果不如方案一稳定：

• 给所有显示输入框添加textContentType="oneTimeCode"和autoComplete="one-time-code"属性；
• 确保所有输入框的keyboardType统一为数字或合适类型；
• 完善手动输入时的焦点自动切换逻辑，让iOS填充第一个字符后，后续字符能通过焦点切换填入（但iOS仍大概率不会自动拆分填充）。

关键注意点 #

• 隐藏输入框必须设置正确的textContentType和autoComplete属性，这是iOS识别OTP输入的核心；
• 隐藏输入框的样式要确保完全不可见且不影响交互（设置zIndex: -1避免遮挡其他元素）；
• 手动输入的焦点切换逻辑要保留，保证用户手动输入的体验不受影响。

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