React Native使用i18next时应用启动首次未加载默认语言问题求助

问题根源 #

• i18n初始化依赖AsyncStorage的异步读取操作，你导出的是初始化Promise而非就绪的i18n实例，App首次渲染时i18n还未完成初始化，翻译功能未就绪
• App组件的useEffect中读取到存储的语言后，没有调用changeLanguage触发语言切换

修复方案 #

1. 修改i18n配置文件 #

调整初始化逻辑，先同步完成i18n基础初始化，再异步读取存储的语言切换，避免App加载时等待异步初始化：

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

// 同步初始化基础配置，默认先使用阿拉伯语
i18n
  .use(initReactI18next) 
  .init({
    resources: {
      en,
      ar,
      he
    },
    lng: "ar",
    interpolation: {
      escapeValue: false, 
    },
    fallbackLng: ['en', 'ar', 'he'],
  });

// 初始化完成后异步读取存储的语言并切换
AsyncStorage.getItem('currentLnaguage').then(storedLang => {
  if (storedLang) i18n.changeLanguage(storedLang);
})

export default i18n;

2. 修改App入口文件 #

增加加载状态，等语言切换完成后再渲染业务内容，保证首次渲染就能拿到正确的翻译：

import React, { useState, useEffect } from 'react';
import './translations/i18n';
import { View, ActivityIndicator } from 'react-native';
import { useTranslation } from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { HomeScreen } from './src/screens/HomeScreen';
import 'intl-pluralrules';

function App() {
  const { t, i18n } = useTranslation();
  const [isLangReady, setIsLangReady] = useState(false);

  useEffect(() => {
    const initLanguage = async () => {
      const storedLang = await AsyncStorage.getItem('currentLnaguage');
      if (storedLang) await i18n.changeLanguage(storedLang);
      setIsLangReady(true);
    };

    // 监听i18n初始化完成事件，避免初始化未完成就执行语言切换
    if (i18n.isInitialized) {
      initLanguage();
    } else {
      i18n.on('initialized', initLanguage);
    }

    return () => i18n.off('initialized', initLanguage);
  }, [i18n]);

  // 语言未就绪时展示加载态
  if (!isLangReady) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <HomeScreen buttonTitle={t('ordernow')} deliveryText={t('delivery')} />
  );
}

export default App;

注意事项 #

• 检查所有用到存储语言key的位置，确保拼写currentLnaguage统一，避免拼写错误导致读取不到存储值
• 语言切换完成后再渲染业务内容，可保证首次启动时翻译内容正确加载

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