React Native(Expo-CLI)如何关闭单个OTP屏幕的RTL？

全局修改I18nManager无法单独作用于某个屏幕，因为它是全局配置项。可以试试以下几种针对性的解决方法：

方法1：给OTP输入容器强制设置LTR布局 #

通过React Native样式中的direction属性，给OTP输入框的父容器明确指定从左到右的布局方向，不受全局RTL设置影响：

<View style={{ direction: 'ltr', flexDirection: 'row' }}>
  {/* 4位OTP输入框组件 */}
  <TextInput style={{ width: 50, textAlign: 'center' }} />
  <TextInput style={{ width: 50, textAlign: 'center' }} />
  <TextInput style={{ width: 50, textAlign: 'center' }} />
  <TextInput style={{ width: 50, textAlign: 'center' }} />
</View>

方法2：利用生命周期临时切换RTL状态 #

在OTP屏幕的useEffect钩子中临时修改RTL配置，离开屏幕时恢复原有状态：

import { useEffect } from 'react';
import { I18nManager } from 'react-native';

function OTPScreen() {
  useEffect(() => {
    // 保存全局原有RTL状态
    const originalRTL = I18nManager.isRTL;
    // 强制当前屏幕使用LTR
    I18nManager.forceRTL(false);
    I18nManager.swapLeftAndRightInRTL(false);

    // 组件卸载时恢复全局设置
    return () => {
      I18nManager.forceRTL(originalRTL);
      I18nManager.swapLeftAndRightInRTL(originalRTL);
    };
  }, []);

  return (
    {/* OTP屏幕内容 */}
  );
}

注意：forceRTL和swapLeftAndRightInRTL需要配合使用，才能确保布局逻辑完全切换为LTR。

方法3：从数据层面保证输入顺序 #

如果是自定义的OTP输入组件，可以在处理输入内容时强制保持输入顺序，避免RTL影响显示：

const handleOTPInput = (text, index, currentOtp, setOtp) => {
  // 过滤非数字内容
  const validText = text.replace(/[^0-9]/g, '');
  const newOtpArr = [...currentOtp];
  newOtpArr[index] = validText;
  // 强制按从左到右的索引顺序更新内容
  setOtp(newOtpArr);

  // 自动跳转下一个输入框的逻辑...
};

这种方法从数据源保证输入内容的顺序正确，即使布局受RTL影响，显示的数字也不会反向。

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