溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-13 16:17:02 來源：腳本之家 閱讀：969 作者：王亟亟 欄目：web開發(fā)

開篇啰嗦–階段感悟

最近2 -3個月基本都因為一些私事沒怎么系統(tǒng)的工作和學(xué)習(xí)，途中看了幾天Kotlin的東西寫了些demo并且整了個小項目，但是整體狀態(tài)不是很好，這些天看到些95后碼農(nóng)的強勢細(xì)思極恐。

現(xiàn)在大多數(shù)醒來就已經(jīng)是中午，起得早去一下健身房，起的晚就家里宅一天。公司有事或者有其他家事就去協(xié)調(diào)/溝通/處理下，整個人感覺都提前進入養(yǎng)老狀態(tài)（當(dāng)然這個鍋有一半是沉迷王者榮耀不可自拔，不太好）

最近項目上基本沒啥事情了，然后讓手下的小伙伴們對之前做的一些內(nèi)容進行二次封裝，然后他們引用了一個第三方國際化的庫我覺得不錯，然后看了看源碼就分享下，希望大家用得上（雖然現(xiàn)在產(chǎn)品的受眾群都是國內(nèi)的，但是準(zhǔn)備下好像沒毛?。浚?/p>

廢話啰嗦完了，老規(guī)矩：https://github.com/ddwhan0123/Useful-Open-Source-Android （雖然我不怎么工作了，但是git還是每天會花時間看看）

庫屬性介紹：

項目地址：https://github.com/AlexanderZaytsev/react-native-i18n

屬性 解釋
支持RN版本 所有版本
支持平臺 iOS+Android
是否需要NativeModule 是
是否可移植 是
是否含有jni模塊 否

使用：

1.install （略，git里都寫著了，就是npm那些事）

2.項目中使用

因為是一些靜態(tài)屬性引用，所以你用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: '關(guān)注我',
  donate: '貢獻',
  exit: '是否退出?',
 },
 donate: {
  donate: '支持我們～~',
  donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',
 },
 demo: {
  dialog: '提示框',
  button: '按鈕',
  switch: '開關(guān)',
  action_sheet: '',
 }
};

屬性名，結(jié)構(gòu)是一致的只是屬性不同，當(dāng)然這里是靜態(tài)的2個文件，如果場景需要可以服務(wù)端下發(fā)json,那就是完全動態(tài)的了，這部分看業(yè)務(wù)需求了。

2.1 默認(rèn)的語言環(huán)境

我們在上面寫了2種語言配置，那么哪種作為初始化的呢？在業(yè)務(wù)層調(diào)用前，我們可以先進行預(yù)設(shè)

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};

這邊進行了一些預(yù)設(shè)，默認(rèn)語境為en，允許fallbacks狀態(tài)（為true時，順序向下遍歷翻譯），預(yù)設(shè)轉(zhuǎn)換的文件就2個，一個en一個zh，這個你也可以自行后續(xù)添加根據(jù)需求而定。

2.2 業(yè)務(wù)層調(diào)用

先是倒包

import {i18n} from '你預(yù)設(shè)的index的目錄';

調(diào)用(拿一個Toast做個例子)

 ToastAndroid.show(i18n.t('home.exit'),ToastAndroid.SHORT);

兩種輸出結(jié)果如下：

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

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

源碼分析

這個庫的實現(xiàn)分為2部分，一部分是Native的版本判斷等功能以及js部分的核心實現(xiàn)fnando/i18n-js

i18n-js是一個輕量級的js翻譯庫，他支持各種格式和內(nèi)容的換算和語言內(nèi)容的切換，地址如下：https://github.com/fnando/i18n-js

那么翻譯轉(zhuǎn)換這塊是 I18n.js做的那么Native做了些啥呢？我們來一探究竟(以安卓為例，蘋果看不懂，抱歉)

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

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

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

具體功能都在RNI18nModule里

public class RNI18nModule extends ReactContextBaseJavaModule {

 public RNI18nModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 //RN調(diào)用的控件名
 @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) {
  //獲取區(qū)域設(shè)置列表。這是獲取區(qū)域的首選方法。
  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端調(diào)用的方法，用來獲取默認(rèn)的語言環(huán)境，回調(diào)方式用的是promise
 @ReactMethod
 public void getLanguages(Promise promise) {
 try {
  promise.resolve(this.getLocaleList());
 } catch (Exception e) {
  promise.reject(e);
 }
 }
}

加一個toast看下locale會出現(xiàn)什么

復(fù)制代碼 代碼如下:

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

效果如下：

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

本想一探究竟內(nèi)部的實現(xiàn)，結(jié)果是個不公開的類

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

總結(jié)：

首先Native那里獲取本手機的LocaleList然后格式化取第一個元素交由I18n.js處理，然后I18n.js根據(jù)key選用一套有效的語言規(guī)則，再之后流程就和使用時候的順序一樣了。
整個庫集成難度較低，使用起來比較簡便，使用下來沒碰到大坑，配合redux更美味。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手