首頁 > web前端 > js教程 > React-Native全球化多語言切換工具庫react-native-i18n詳解

React-Native全球化多語言切換工具庫react-native-i18n詳解

小云云
發布: 2017-12-28 11:28:57
原創
3624 人瀏覽過

本文主要介紹了詳解React-Native全球化語言切換工具庫react-native-i18n,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

##所有版本iOS+Android是是否
屬性 解釋
#支援RN版本
支援平台
#是否需要NativeModule
是否可移植
#是否含有jni模組

#使用:

1.install (略,git裡都寫著了,就是npm那些事)

2.專案中使用

因為是一些靜態屬性引用,所以你用redux做儲存替換也可以,直接做飲用也可以(本文拿en,zh為例)。

首先是建立英文版本的設定文件,en/index.js

#
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?',
 },
 donate: {
  donate: 'donate us~~~',
  donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',
 },
 demo: {
  dialog: 'dialog',
  button: 'button',
  switch: 'switch',
  action_sheet: 'Action Sheet',
 }
};
登入後複製

然後是中文的zh/index.js

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: '是否退出?',
 },
 donate: {
  donate: '支持我们~~',
  donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',
 },
 demo: {
  dialog: '提示框',
  button: '按钮',
  switch: '开关',
  action_sheet: '',
 }
};
登入後複製

屬性名,結構是一致的只是屬性不同,當然這裡是靜態的2個文件,如果場景需要可以服務端下發json,那就是完全動態的了,這部分看業務需求了。

2.1 預設的語言環境

我們在上面寫了2種語言配置,那麼哪一個作為初始化的呢?在業務層呼叫前,我們可以先進行預設

i18n/index.js

#
import i18n from 'react-native-i18n';
import en from './en';
import zh from './zh';

i18n.defaultLocale = 'en';
i18n.fallbacks = true;
i18n.translations = {
 en,
 zh,
};

export {i18n};
登入後複製

這邊進行了一些預設,預設情境為en,允許fallbacks狀態(為true時,順序向下遍歷翻譯),預設轉換的檔案就2個,一個en一個zh,這個你也可以自行後續添加根據需求而定。

2.2 業務層呼叫

先是倒包

import {i18n} from '你預設的index的目錄';

#調用(拿一個Toast做個範例)

 ToastAndroid.show(i18n.t('home.exit'),ToastAndroid.SHORT);
登入後複製

兩個輸出結果如下:React-Native全球化多語言切換工具庫react-native-i18n詳解

React-Native全球化多語言切換工具庫react-native-i18n詳解

#原始碼分析

這個函式庫的實作分為2部分,一部分是Native的版本判斷等功能以及js部分的核心實作fnando/i18n-js

i18n-js是一個輕量級的js翻譯庫,他支援各種格式和內容的換算和語言內容的切換,地址如下:https://github.com/fnando/i18n-jsReact-Native全球化多語言切換工具庫react-native-i18n詳解

#那麼翻譯轉換這塊是I18n.js做的那麼Native做了些啥呢?我們來一探究竟(以安卓為例,蘋果看不懂,抱歉)

Native程式碼就兩個類,所以我之前說你直接把Native程式碼copy走然後項目依賴I18n.js也能達到這個效果

RNI18nPackage是一個普通的Package類,它的作用就是把我們的module加到主應用的getPackages()方法中的列表裡,然後一起打進包包裡而已。

具體功能都在RNI18nModule裡


public class RNI18nModule extends ReactContextBaseJavaModule {

 public RNI18nModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 //RN调用的控件名
 @Override
 public String getName() {
 return "RNI18n";
 }

 //对取出的Locale列表进行格式化的方法
 private String toLanguageTag(Locale locale) {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  return locale.toLanguageTag();
 }

 StringBuilder builder = new StringBuilder();
 builder.append(locale.getLanguage());

 if (locale.getCountry() != null) {
  builder.append("-");
  builder.append(locale.getCountry());
 }

 return builder.toString();
 }

 private WritableArray getLocaleList() {
 WritableArray array = Arguments.createArray();

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
  //获取区域设置列表。这是获取区域的首选方法。
  LocaleList locales = getReactApplicationContext()
   .getResources().getConfiguration().getLocales();

  for (int i = 0; i < locales.size(); i++) {
  array.pushString(this.toLanguageTag(locales.get(i)));
  }
 } else {
  array.pushString(this.toLanguageTag(getReactApplicationContext()
   .getResources().getConfiguration().locale));
 }

 return array;
 }

 //js端可获取属性的列表
 @Override
 public Map<String, Object> getConstants() {
 HashMap<String, Object> constants = new HashMap<String,Object>();
 constants.put("languages", this.getLocaleList());
 return constants;
 }

 //提供给js端调用的方法,用来获取默认的语言环境,回调方式用的是promise
 @ReactMethod
 public void getLanguages(Promise promise) {
 try {
  promise.resolve(this.getLocaleList());
 } catch (Exception e) {
  promise.reject(e);
 }
 }
}
登入後複製
加上一個toast看下locale會出現什麼


複製程式碼
程式碼如下:


Toast.makeText(getReactApplicationContext(),"locales.get(i) "+locales.get(i),Toast.LENGTH_LONG).show();

React-Native全球化多語言切換工具庫react-native-i18n詳解 效果如下:


React-Native全球化多語言切換工具庫react-native-i18n詳解 本來想一探究竟內部的實現,結果是個不公開的類別


#總結:


首先Native那裡取得本手機的LocaleList然後格式化取第一個元素交由I18n.js處理,然後I18n.js根據key選用一套有效的語言規則,再之後流程就和使用時候的順序一樣了。

整個庫整合難度較低,使用起來比較簡便,使用下來沒碰到大坑,配合redux更美味。

相關推薦:

React-intl 實作多語言範例詳解

PHP - 實作多語言自動切換

######PHP - 實作多語言自動切換#######

以上是React-Native全球化多語言切換工具庫react-native-i18n詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板