React Native多语言应用默认RTL切换异常问题及解决方法

问题背景 #

开发支持英语（en）和阿拉伯语（ar）的React Native应用，默认语言为阿拉伯语。通过原生代码设置RTL（从右到左）布局，使用react-native-restart实现语言切换。遇到以下问题：

• 初始加载时，阿拉伯语及RTL布局正常显示
• 切换为英语后，布局仍保持RTL，重启应用后forceRTL未被设为false
• 移除原生代码中的forceRTL后，默认英语正常，但默认阿拉伯语时RTL布局失效

最终通过AsyncStorage存储语言+首次加载重启应用解决问题，以下是问题代码及修复方案：

原问题代码 #

i18n.js #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "../lang/en.json";
import ar from "../lang/ar.json";
import { I18nManager } from "react-native";

i18n.use(initReactI18next).init({
  compatibilityJSON: "v3",
  lng: I18nManager.isRTL ? "ar" : "en",
  fallbackLng: I18nManager.isRTL ? "ar" : "en",
  resources: {
    en: en,
    ar: ar,
  },
  interpolation: {
    escapeValue: false, // react already safes from xss
  },
});

export default i18n;

index.js #

const changeDirection = (value) => {
  I18nManager.forceRTL(value);
  RNRestart.Restart();
};


{I18nManager.isRTL ? (
    <ButtonTypeA
      clickEvent={() => {
        changeDirection(false);
      }}
      title={"EN"}
    />
  ) : (
    <ButtonTypeA
      clickEvent={() => {
        changeDirection(true);
      }}
      title={"AR"}
    />
  )}

MainActivity.java #

@Override
public void onCreate() {
  super.onCreate();
  I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
  sharedI18nUtilInstance.forceRTL(this,true);
  sharedI18nUtilInstance.allowRTL(this, true);
}

修复后的解决方案代码 #

由于默认语言为阿拉伯语，原生代码中硬设forceRTL会导致切换异常，修复思路为：移除原生强制RTL，通过RN层控制首次启动的RTL设置，并用AsyncStorage持久化语言选择。

MainActivity.java - 移除强制RTL #

@Override
public void onCreate() {
  super.onCreate();
  I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
  //sharedI18nUtilInstance.forceRTL(this,true);
  sharedI18nUtilInstance.allowRTL(this, true);
}

_layout.js - 首次启动初始化语言与RTL #

import AsyncStorage from "@react-native-async-storage/async-storage";
import { useCallback } from "react";
import { I18nManager } from "react-native";
import RNRestart from "react-native-restart";

const Layout = () => {
  const onLayoutRootView = useCallback(async () => {
    await checkFirstLaunch();
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  // 首次启动时初始化默认语言与RTL布局
  const checkFirstLaunch = async () => {
    try {
      const storedLang = await AsyncStorage.getItem("@lang");
      if (storedLang === null) {
        await AsyncStorage.setItem("@lang", "ar");
        I18nManager.allowRTL(true);
        I18nManager.forceRTL(true);
        RNRestart.Restart();
      }
    } catch (e) {
      // 处理存储异常
    }
  };

  return (
    {/* 你的布局内容 */}
  );
};

export default Layout;

i18n.js - 基于AsyncStorage的语言检测 #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "../lang/en.json";
import ar from "../lang/ar.json";
import AsyncStorage from "@react-native-async-storage/async-storage";

const languageDetector = {
  type: "languageDetector",
  async: true, // 异步检测
  detect: (callback) => {
    AsyncStorage.getItem("@lang").then((lng) => {
      callback(lng || "ar");
    });
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: "v3",
    fallbackLng: "en",
    resources: {
      en: en,
      ar: ar,
    },
    interpolation: {
      escapeValue: false, // react已处理XSS
    },
  });

export default i18n;

index.js - 语言切换逻辑优化 #

const changeLanguage = (value) => {
  i18n
    .changeLanguage(value)
    .then(() => {
      const isLangRTL = value === "ar";
      AsyncStorage.setItem("@lang", value);

      // 仅当RTL状态变化时才重启应用
      if (isLangRTL !== I18nManager.isRTL) {
        I18nManager.allowRTL(isLangRTL);
        I18nManager.forceRTL(isLangRTL);
        RNRestart.Restart();
      }

      setLocale(value);
    })
    .catch((err) => console.log(err));
};

{I18nManager.isRTL ? (
    <ButtonTypeA
      clickEvent={() => {
        changeLanguage("en");
      }}
      title={"EN"}
    />
  ) : (
    <ButtonTypeA
      clickEvent={() => {
        changeLanguage("ar");
      }}
      title={"AR"}
    />
  )}

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