react-native-i18n 语言切换工具

本文主要是介绍react-native-i18n 语言切换工具，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

yarn add react-native-i18n

Android

在./android/settings.gradle文件中添加下列代码:

include ':app', ':react-native-i18n'
project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')

在./android/app/build.gradle文件中加入下列代码:

dependencies {// ...compile project(':react-native-i18n')
}

在./android/app/src/main/java/your/bundle/MainApplication.java中添加如下代码：:

import com.AlexanderZaytsev.RNI18n.RNI18nPackage; // <-- Add to ReactNativeI18n to the imports// ...@Override
protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),// ...new RNI18nPackage(), // <-- Add it to the packages list);
}// ...

使用

创建一个关于语言的文件夹
创建多语言的js配置文件

我这里写了两个 一个中文，一个英文

en.js:

/*** Created by 卓原 on 2018/6/28.**/
export default {home: {greeting: 'Greeting in en',tab_home: 'Home',tab_donate: 'Donate',tab_demo: 'Demo',language: 'language',live_demo: 'Live Demo',buy_me_coffee: 'Buy me a coffee',gitee: 'Gitee',star_me: 'Star me',donate: 'donate',exit: 'exit?',},greeting:'English'
}

zh.js

/*** Created by 卓原 on 2018/6/28.**/
export default {home: {greeting: 'Greeting in zh',tab_home: '首页',tab_donate: '捐赠',tab_demo: '例子',language: '语言',live_demo: '例子',buy_me_coffee: '请我一杯coffee',gitee: 'Gitee',star_me: '关注我',donate: '贡献',exit: '是否退出?',},greeting:'中文'
}

然后index.js：

/*** Created by 卓原 on 2018/6/28.**/
import I18n from 'react-native-i18n';import en from './en';
import zh from './zh';// Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
I18n.fallbacks = true;//设置默认语言
I18n.defaultLocale = 'zh';I18n.translations = {en,zh
};export default I18n;

在项目中使用：

import I18n from '../language';
...<Text>{I18n.t('home.exit')}</Text>
...const I18nHome = I18n.t('home');
<Text>{I18nHome.exit}</Text>

这里会根据系统的语言来自动选择对应的语言文件，如果没有则使用默认的语言，我上面设置的默认语言问zh，即中文。

您可以使用getLanguages方法获取用户首选的语言环境

import { getLanguages } from 'react-native-i18n';getLanguages().then(languages => {console.log(languages); // ['en-US', 'en']
});

请注意，js的名字最好都是语言的缩写，下面提供参考：

想获取更多相关使用方式 请点击

这篇关于react-native-i18n 语言切换工具的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---