ホームページ > 記事 > ウェブフロントエンド > 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', } };
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 つの言語設定を書きましたが、初期化にはどちらが使用されますか?ビジネス層を呼び出す前に、いくつかのプリセットを作成できます
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};
2.2 ビジネス層の呼び出し
まず、パッケージを逆にします
「デフォルトのインデックスのディレクトリ」から {i18n} をインポートします
呼び出し (トーストを例にします)
ToastAndroid.show(i18n.t('home.exit'),ToastAndroid.SHORT);
このライブラリの実装は 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-Nativeのグローバル多言語切り替えツールライブラリreact-native-i18nの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。