更改整个 React Native App 的语言

Posted 2023-03-15

【中文标题】更改整个 React Native App 的语言

【英文标题】：Change language of entire React Native App

【发布时间】：2017-12-04 17:07:38

【问题描述】：

我有一个默认语言为英语的 react 本机应用程序。我有一个个人资料页面，用户可以在其中将语言从英语更改为另一种语言。并且当用户保存语言更改时，包括标题、抽屉导航名称在内的语言都应更改为用户选择的语言。我们如何在 react native 中实现这个功能？

【参考方案1】：

你可以使用这个包：https://github.com/AlexanderZaytsev/react-native-i18n

安装后，您只需定义您的语言环境文件，例如：

// src/i18n/locales/en.js
export default   
  greeting: 'Hi!'
;

// src/i18n/locales/es.js
export default   
  greeting: 'Hola!'
;

// src/i18n/locales/jp.js
export default   
  greeting: 'Konichiwa!'
;

然后导入这些文件并设置 i18n 支持的配置，如下所示：

// src/i18n/index.js
import I18n from 'react-native-i18n';
import en from './locales/en';
import es from './locales/es'; 
import jp from './locales/jp';  

I18n.fallbacks = true;

I18n.translations = 
  en,
  es,
  jp,
;

export default I18n; 

最后像这样在你的组件中使用它：

import I18n from 'src/i18n';

class Demo extends React.Component 
  render () 
    return (
      <Text>I18n.t('greeting')</Text>
    )
  

默认情况下，它将使用设备的区域设置，但如果您想覆盖它。例如，当用户的设备具有西班牙语区域设置，但想使用日语时，您可以执行以下操作：

I18n.locale = 'jp';

无论何时调用I18n.t('greeting')，它都会呈现Konichiwa!。从现在开始，您将始终需要使用I18n.t 在您的应用中呈现任何文本。

这个库的主要问题是，一旦你的应用程序增长，你不知道哪些键仍在使用中，管理你所有的翻译是非常具有挑战性的，我建议你使用像 LinguiJS 这样的工具：https://bleext.com/post/translating-your-product-into-multiple-languages

【讨论】：

我可以写 I18n.locale = 'jp';作为点击事件的动作？例如如果我想为用户提供一种从可用语言列表中更改应用语言的方法？

这个库已被弃用，取而代之的是反应原生语言github.com/react-native-community/react-native-languages

在这种情况下我需要 redux 或 mobx 来存储用户设置对吗？

在设置页面中，如果我更改语言，它不会更改已打开路线的语言:(。有人遇到这个问题吗？

如果我们使用redux，我们必须将它连接到所有组件，然后每当设置页面上的语言更改时更改i18n.locale变量。对吗？即使我这样做了，它也不会改变你的标题。每当 i18n.locale 更改时，我们必须手动设置 navigationOptions 的标题。所以我使用react-native-restart重新启动了整个应用程序。

【参考方案2】：

你可以从这个链接安装 i18n 包：https://github.com/AlexanderZaytsev/react-native-i18n

现在，在您需要更改语言的每个部分中，只需将 I18n 导入 js 文件即可：

import I18n from "react-native-i18n";

并在 onpress 按钮中使用底部代码

I18n.locale = "en"; // Language desired

【讨论】：

我使用了您的解决方案，效果很好。现在当我关闭应用程序时只有一个问题。然后重新启动我的应用程序语言再次更改为英语。不显示已选择的语言。

当语言环境来自使用 api 的后端服务器时，是否知道如何做多语言？

我也在寻找相同的场景，任何人都可以让你知道如何实现@PrajapatiJigar 的要求。

@Lucifer_Lat 尝试将数据存储在AsyncStorage