更改整个React Native App的语言

Question

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

Answer 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来渲染应用中的任何文本。

Answer 2

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

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

import I18n from "react-native-i18n";

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

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