React Native中i18n从Async Storage取语言初始化报错如何解决？

getLang为异步函数，调用后返回的是Promise实例而非语言字符串，i18next的lng初始化配置要求传入字符串类型的语言标识，直接传入Promise会导致初始化报错。

以下是两种常用的可行实现方式：

方案1：异步获取语言后再初始化i18n #

适合需要启动就加载用户所选语言、避免界面语言闪烁的场景，代码如下：

import AsyncStorage from '@react-native-async-storage/async-storage';
import i18n from 'i18next';
import initReactI18next from 'react-i18next';
// 引入你的语言包
import en from './locales/en';
import pt from './locales/pt';

// 封装异步初始化方法
const initI18n = async () => {
  // 优先读取本地存储的语言，没有匹配值则用默认值
  const savedLang = await AsyncStorage.getItem("locale") || "pt";

  // 拿到语言参数后再初始化i18n
  await i18n.use(initReactI18next).init({
    resources: {
      en,
      pt,
    },
    lng: savedLang,
    interpolation: {
      escapeValue: false,
    },
    react: { useSuspense: false },
  });
};

// 执行初始化逻辑
initI18n();

export default i18n;

方案2：先初始化后切换语言 #

适合不想延迟i18n初始化的场景，先给定默认语言，拿到存储的语言后再主动切换，代码如下：

import AsyncStorage from '@react-native-async-storage/async-storage';
import i18n from 'i18next';
import initReactI18next from 'react-i18next';
// 引入你的语言包
import en from './locales/en';
import pt from './locales/pt';

// 先直接初始化，传入默认语言
i18n.use(initReactI18next).init({
  resources: {
    en,
    pt,
  },
  lng: "pt", // 预设默认语言
  interpolation: {
    escapeValue: false,
  },
  react: { useSuspense: false },
});

// 异步读取本地存储的语言，读取成功后切换
AsyncStorage.getItem("locale").then(savedLang => {
  if (savedLang) {
    i18n.changeLanguage(savedLang);
  }
});

export default i18n;

• 确保@react-native-async-storage/async-storage已完成对应平台的配置，iOS端需执行pod install安装原生依赖。
• 若使用方案1，可在App根组件添加加载状态，等i18n初始化完成后再渲染主界面，避免初始化过程中出现白屏或内容异常。

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