时间戳

首页 > 解决方案 > react-native-localize：更改所有屏幕的语言

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

问题描述

在我的 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;

标签： reactjsreact-native

解决方案

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

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

推荐阅读