android - 更改整个 React Native App 的语言

Question

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

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 来呈现您应用中的任何文本。

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