react-native-localize：更改所有屏幕的语言

Question

在我的 react-native 应用程序中，我使用 react-native-localize 来本地化我的应用程序。

https://github.com/zoontek/react-native-localize

我像这样更改应用程序区域设置：

I18n.locale = newLocale

这仅适用于活动屏幕，如果我导航回以前的屏幕，它们仍在使用旧的区域设置语言...

我如何在组件中本地化我的字符串：

import I18n from "@utils/i18n";

<Text style={{ fontSize:18, color:'black'}}>{I18n.t(item.title)}</Text>

我如何设置 I18n，我在使用 I18n 的所有屏幕中都导入了这个文件，这可能是语言环境在之前的屏幕中不断重置为第一个语言环境的原因：

//utils/i18n
import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize";

import en from "@locales/en";
import es from "@locales/es";

const locales = RNLocalize.getLocales();

if (Array.isArray(locales)) {
  I18n.locale = locales[0].languageTag;
}

I18n.fallbacks = true;
I18n.translations = {
  en,
  es
};


export default I18n;

Answer 1

基本上，您需要重新渲染整个应用程序。

您可以通过监听应用程序顶部组件（通常称为 rootNavigator / rootComponent）中的存储属性（例如“currentLanguage”）或例如通过引入 React 上下文并随着每次本地化更改而更改其值。