Expo SDK51下使用I18nManager动态切换LTR/RTL布局失败求助

我在Expo项目中尝试使用I18nManager将应用布局从左到右（LTR）动态切换为从右到左（RTL），但调用I18nManager.forceRTL(true)并执行Updates.reloadAsync()后，布局仍保持LTR状态。升级到Expo SDK51后才出现这个问题，在app.json的extra中添加forceRTL后布局会变为RTL，但调用forceRTL(false)无法切回LTR，且I18nManager.isRTL始终返回false。

相关代码片段 #

App.tsx

import { useState } from 'react';
import { Button, I18nManager, StyleSheet, Text, View } from 'react-native';
import * as Updates from 'expo-updates';

export default function App() {
  const [isRTL, setIsRTL] = useState(I18nManager.isRTL);
  const switchLayout = async() => {
    const newDirection = !isRTL;
    I18nManager.allowRTL(newDirection);
    I18nManager.forceRTL(newDirection);
    setIsRTL(newDirection);
    await Updates.reloadAsync();
  };

  return (
    <View style={styles.container}>
      <Text>Current Layout: {isRTL ? 'RTL' : 'LTR'}</Text>
      <Button title="Switch Layout" onPress={switchLayout} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

app.json 配置

"extra": {
      "supportsRTL": true
    },

问题原因与解决办法 #

1. SDK51 中I18nManager的持久化逻辑变更 #

Expo SDK51调整了I18nManager的配置存储方式，直接调用forceRTL不会将设置持久化，重启后会恢复默认值。必须手动把布局方向保存到AsyncStorage，启动时读取并应用。

修改后的代码：

import { useState, useEffect } from 'react';
import { Button, I18nManager, StyleSheet, Text, View } from 'react-native';
import * as Updates from 'expo-updates';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [isRTL, setIsRTL] = useState(I18nManager.isRTL);

  // 初始化时读取保存的布局方向
  useEffect(() => {
    const loadSavedDirection = async () => {
      const savedRTL = await AsyncStorage.getItem('isRTL');
      if (savedRTL !== null) {
        const shouldBeRTL = savedRTL === 'true';
        I18nManager.allowRTL(shouldBeRTL);
        I18nManager.forceRTL(shouldBeRTL);
        setIsRTL(shouldBeRTL);
      }
    };
    loadSavedDirection();
  }, []);

  const switchLayout = async() => {
    const newDirection = !isRTL;
    // 保存设置到持久化存储
    await AsyncStorage.setItem('isRTL', newDirection.toString());
    I18nManager.allowRTL(newDirection);
    I18nManager.forceRTL(newDirection);
    setIsRTL(newDirection);
    await Updates.reloadAsync();
  };

  return (
    <View style={styles.container}>
      <Text>Current Layout: {isRTL ? 'RTL' : 'LTR'}</Text>
      <Button title="Switch Layout" onPress={switchLayout} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

2. 移除app.json中的forceRTL配置 #

如果app.json的extra里设置了forceRTL，它会作为全局默认值覆盖代码中的动态设置，导致切换失效。直接删除该配置即可，保留supportsRTL: true即可。

3. 确保组件适配RTL布局 #

部分组件需要显式处理RTL逻辑，比如通过I18nManager.isRTL判断设置flexDirection：

<View style={{flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', marginVertical: 20}}>
  <Text style={{padding: 10, backgroundColor: 'red'}}>Left</Text>
  <Text style={{padding: 10, backgroundColor: 'blue'}}>Right</Text>
</View>

切换到RTL后，红、蓝元素的位置应该互换，以此验证布局是否生效。

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