React Native で多言語アプリケーションを作成する

製品のローカリゼーションは、新しい国や地域を開拓する国際企業にとって非常に重要です。 同様に、モバイル アプリケーションにもローカリゼーションが必要です。 開発者が国際展開を開始する場合、別の国のユーザーに母国語でインターフェースを操作する機会を与えることが重要です。 この記事では、パッケージを使用して React Native アプリケーションを作成します。 反応ネイティブローカライズ.

スキルボックスは次のことを推奨します。 教育オンラインコース 「職業 Java 開発者」.
リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

ツールとスキル

この記事を理解するには、React Native を操作するための基本的なスキルが必要です。 作業マシンの設定に慣れるために、次のことができます。 公式の指示を使用する.

次のバージョンのソフトウェア ツールが必要になります。

• ノードv10.15.0
• npm6.4.1
• 糸1.16.0
• 反応ネイティブ 0.59.9
• 反応ネイティブローカライズ 1.1.3
• i18n-js 3.3.0

はじめに

英語、フランス語、アラビア語をサポートするアプリケーションを作成します。 まず、react-native-cli を使用して新しいプロジェクトを作成します。 これを行うには、ターミナルに次のように入力する必要があります。

$ 反応ネイティブ初期化マルチ言語
$ cd 多言語

必要なライブラリを追加する

最初のステップは、次のように入力して、react-native-localize をインストールすることです。
$ 糸追加反応ネイティブローカライズ

インストール中に問題が発生した場合は、 インストールマニュアルを読む価値があります.

React-native-localize ライブラリを使用すると、開発者は多言語機能にアクセスできます。 しかし、彼女にはもう 18 つのライブラリ iXNUMXn が必要です。

この記事ではその使い方について説明します I18n.js JavaScript への翻訳を提供するため。

$ 糸追加 i18n-js

i18n-js はキャッシュやメモ化を提供していないため、これには lodash.memoize を使用することをお勧めします。

$ 糸追加 lodash.memoize

翻訳の操作

アプリケーションが他の言語で動作できるようにするには、まず src 内に translations ディレクトリを作成し、次に言語ごとに XNUMX つの JSON ファイルを作成する必要があります。

1. 英語の場合は en.json。

2. フランス語の場合は fr.json。

3. アラビア語の ar.json。

これらのファイルには、キーと値を含む JSON オブジェクトが含まれています。 キーは各言語で同じになります。 アプリケーションがテキスト情報を表示するために使用します。

値は、ユーザーに表示する必要があるテキストです。

英語：

{"hello": "Hello World!"}

Французский

{"こんにちは": "敬礼です!"}

Арабский

{ "こんにちは": "こんにちは"}

他の言語も同様に追加できます。

メインコード

この時点で、App.js ファイルを開いてインポートを追加する必要があります。

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

この後、後で役立つ補助関数と定数が追加されます。

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  ar: () => require("./src/translations/ar.json"),
  en: () => require("./src/translations/en.json"),
  fr: () => require("./src/translations/fr.json")
};
 
const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);
 
const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

それでは、App クラスのコンポーネントを作成しましょう。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }
 
  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }
 
  componentWillUnmount() {
    RNLocalize.removeEventListener("change", this.handleLocalizationChange);
  }
 
  handleLocalizationChange = () => {
    setI18nConfig();
    this.forceUpdate();
  };
 
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.value}>{translate("hello")}</Text>
      </SafeAreaView>
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

最初の要素 setI18nConfig() は、初期構成を設定します。

次に、イベントリスナーをcomponentDidMount()に追加する必要があります。この要素は更新をリッスンし、更新が発生するとhandleLocalizationChange()を呼び出します。

handleLocalizationChange() メソッドは、setI18nConfig() および ForceUpdate() をアクティブ化します。 Android デバイスでは、変更を目立たせるためにコンポーネントをレンダリングする必要があるため、これは必要です。

次に、componentWillUnmount() メソッドから listen を削除する必要があります。

最後に、render() は、translate() を使用し、それに key パラメータを追加することで hello を返します。 これらの手順を完了すると、アプリケーションは必要な言語を「理解」し、その言語でメッセージを表示できるようになります。

アプリケーションの起動

ここで、翻訳がどのように機能するかを確認します。

まず、次のように入力して、シミュレーターまたはエミュレーターでアプリケーションを起動します。

$ 反応ネイティブ実行-ios
$ 反応ネイティブ実行アンドロイド

次のようになります。

これで、アプリケーションを起動して言語をフランス語に変更してみることができます。

アラビア語でも同じことを行いますが、違いはありません。

ここまでは順調ですね。

しかし、アプリケーションに翻訳がない言語をランダムに選択した場合はどうなるでしょうか?

findBestLanguage のタスクは、利用可能なすべての翻訳から最適な翻訳を提供することであることがわかります。 その結果、デフォルトの言語が表示されます。

電話の設定について話しています。 たとえば、iOS エミュレータでは、言語の順序を確認できます。

選択した言語が優先言語ではない場合、findBestAvailableLanguage は未定義を返し、デフォルトの言語が表示されます。

ボーナス

React-native-localize には、多数の言語要素へのアクセスを提供する API があります。 仕事を始める前に、 ドキュメントを確認する価値があります.

所見

アプリケーションは問題なく多言語化できます。 React-native-localize は、アプリのユーザー ベースを拡大できる優れたオプションです。

プロジェクトのソースコード ここにある.

スキルボックスは次のことを推奨します。

• XNUMX年間の実践コース 「私はプロのウェブ開発者です」.
• オンラインコース 「ゼロからの C# 開発者」.
• 実践一年コース 「0からPROまでのPHP開発者」.

出所： habr.com