React-Nativeのグローバル多言語切り替えツールライブラリreact-native-i18nの詳細説明

この記事では主にReact-Nativeのグローバル言語切り替えツールライブラリreact-native-i18nの詳細な説明を紹介していますが、編集者が非常に優れていると思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

プロパティ	説明
サポートRNバージョン	すべてのバージョン
サポートされているプラ​​ットフォーム	iOS+Android
NativeModかどうかuleは必須です	はい
ですポータブル?	はい
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 で、フォールバック状態が許可されます (true の場合、順序は下方トラバーサル変換になります)。 、デフォルトで変換されるファイルは en と zh の 2 つだけですが、必要に応じて後でこれを追加することもできます。

2.2 ビジネス層の呼び出し

まず、パッケージを逆にします

「デフォルトのインデックスのディレクトリ」から {i18n} をインポートします

呼び出し (トーストを例にします)

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

2 つの出力結果以下の通り:

ソースコード解析

このライブラリの実装は 2 つの部分に分かれており、1 つの部分はネイティブバージョン判定およびその他の機能と、js 部分 fnando/i18n のコア実装です。 -js

i18n-js は、さまざまな形式とコンテンツの変換と言語コンテンツの切り替えをサポートする軽量の js 翻訳ライブラリです。アドレスは次のとおりです: https://github.com/fnando/i18n-js

翻訳変換部分はI18nがやっているのですが、Nativeは何をするのでしょうか？調べてみましょう (Android を例に挙げます。Apple はそれを理解できません、ごめんなさい)

ネイティブ コードには 2 つのクラスしかないので、ネイティブ コードを直接コピーすれば、プロジェクトは I18n に依存すると前に言いました。 .js. このエフェクト

RNI18nPackage は、通常の Package クラスであり、その機能は、メイン アプリケーションの 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.makeText(getReactApplicationContext(), "locales.get(i ) "+locales.get(i),Toast.LENGTH_LONG).show();

効果は以下の通りです:

内部実装を調べたかったのですが、それは非パブリック クラスであることが判明しました

概要:

まず、Native はこの電話の LocaleList を取得し、最初の要素をフォーマットして、処理のために I18n.js に送信し、次に I18n に送信します。 js はキーに基づいて有効な言語ルールのセットを選択し、その後のプロセスは次のようになります。使用順序は同じです。

ライブラリ全体の統合度は比較的低く、使用する際に大きな落とし穴はなく、reduxと組み合わせるとより便利です。

関連する推奨事項:

多言語の React-intl 実装例の詳細な説明

PHP - 自動多言語切り替えの実装

PHP - 自動多言語切り替えの実装

以上がReact-Nativeのグローバル多言語切り替えツールライブラリreact-native-i18nの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。