1. 程式人生 > >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的名字最好都是語言的縮寫,下面提供參考:
語言縮寫
想獲取更多相關使用方式 請點選