更改整个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在应用程序中呈现任何文本.