react-native-i18n 語言切換工具
阿新 • • 發佈:2019-02-03
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的名字最好都是語言的縮寫,下面提供參考:
想獲取更多相關使用方式 請點選