React Native中i18next翻译文本不显示问题排查

核心问题：资源文件结构不符合i18next规范 #

i18next要求翻译资源必须嵌套在**translation**命名空间下，你当前的语言文件直接导出键值对，缺少外层的translation包裹，导致i18next无法识别这些翻译项。

修复语言文件 #

修改src/localization/ta/index.ts：

export default {
  translation: {
    account_handle: "பயனர் கணக்கு",
    change_language: "Change Language",
    forgot_password: "கடவுச்சொல் மறந்ததோ",
    password: "கடவுச்சொல்",
    sign_in: "உள்ளே போ",
  }
};

src/localization/en/index.ts需要做同样的修改，将所有翻译项包裹在translation对象内。

可选优化：确保i18n初始化与组件树绑定 #

虽然你已经引入了i18n.ts，但使用I18nextProvider包裹应用可以确保i18n实例在组件树中正确传递，避免异步初始化导致的渲染问题：

修改App.tsx：

import { AuthProvider } from "./src/context/AuthContext";
import { AppNav } from "./src/context/AppNav";
import i18n from "./src/localization/i18n";
import { I18nextProvider } from "react-i18next";

function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <AuthProvider>
        <AppNav />
      </AuthProvider>
    </I18nextProvider>
  );
}

export default App;

排查辅助：打印i18n状态确认问题 #

如果问题仍存在，可以在SignIn组件中打印i18n的状态，验证资源是否加载、当前语言是否正确：

import { useTranslation, useI18n } from "react-i18next";
import { Text } from "react-native";

const SignIn = () => {
  const { t } = useTranslation();
  const i18n = useI18n();

  console.log("当前语言：", i18n.language);
  console.log("已加载的翻译资源：", i18n.services.resourceStore.data);

  return <Text>{t("sign_in")}</Text>;
};

export default SignIn;

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