React ネイティブアプリで多言語サポートシステムを作成する

React ネイティブアプリで多言語サポートシステムを作成する

複数の言語をサポートするモバイルアプリケーションの構築は、もはやオプションではありません。グローバル・リフィクションを目指したあらゆるアプリの要件です。React Nativeは、クロスプラットフォーム機能を備えた、国際化(i18n)とローカリゼーション(l10n)を実装するためのいくつかの堅牢なアプローチを提供しています。この記事では、複数の言語サポートシステムを React Native に設計する詳細なガイドを提供し、ライブラリ、構成、動的切り替え、複雑な複数のルールの処理、右から左(RTL)のレイアウト、および最高のパフォーマンス慣行を最適化します。

集中化のコアコンセプト

ローカリゼーションは、単純なテキスト翻訳を超えて行きます。 数値、日付、通貨、テキストの方向(LTR対RTL)、多重化、性別の形式、さらには翻訳された文字列に合うUIレイアウトを調整します。 よく設計されたi18nシステムは、コードベースから翻訳可能なコンテンツを分離し、キーベースのリファレンスを使用し、アプリの再起動を必要としないランタイム言語切り替えをサポートしています。

React Native の重要な課題

• デバイスロケール検出(iOSとAndroidの差分)のためのネイティブモジュール。
• 効率的な読み込みと翻訳ファイルをキャッシュします。
• アプリ全体でアクティブ言語のステートを管理する(ナビゲーションとパージされた設定を含む)。
• RTL レイアウトの処理 — ネイティブがサポートする をリラクトするが、慎重にアライメントする必要があります。
• 翻訳されたすべての文字列をコンテキストでテストし、検証します。

右i18nライブラリを選択する

複数のライブラリが存在している間、 react-i18next[]は、React Nativeの最も人気で機能補完的な選択肢です。 ]i18nextの上に構築された、それは、シームレスな統合のためのホック、HOCs、およびコンポーネントを提供します。 代替品には、i18n-js(シンプルで、しかし、より少ない)、および[FLT:]が、および[FLT:]の[FLT:]が、および[FLT]を、および[FLT]を、]を、および[FLT]を、および[F]を、および[FLT]を、および[F]を、および[F]を、[F]を、および[F]を、[FLT]を、非、および[F]を、[F]を、および[FLT]を、[[[[[[[[[F]を、]を、]を、]を、]を、]を、]、[

コアライブラリのインストール

必要なパッケージをインストールして始めます。

npm install react-i18next i18next i18next-http-backend react-native-localize

デバイス設定に基づく自動言語検出用の[]i18next-browser-languagedetector[をオプションで追加します。 ネイティブモジュールを react-native-localize(RN 0.60+で自動リンク) にリンクする必要があることに注意してください。

i18nインスタンスの設定

設定ファイルを作成する例、[]:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

[] を react-native-localize で、アプリがデバイスの地域設定を尊重することを確認します。 ] 関数は一度実行し、初期言語を設定します。 継続的な更新(ユーザーがアプリが開いたときにデバイス言語を変更した場合)、 に購読できます。

翻訳ファイル構造

翻訳をネストしたJSONファイルで言語と名前空間で整理します。[の例:

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

ネームスペース(例:, ])を使用すると、大規模なアプリを管理し、翻訳チャンクの遅延負荷を有効にします。

コンポーネント内の翻訳を使用する

利用方法翻訳ホック

機能コンポーネント:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

[t]]] 関数は変数を補い、複数の処理を処理します。言語を変更するには、[ を呼び出します。これにより、すべてのサブスクリプションされたコンポーネントの再レンダリングがトリガーされます。

トランスコンポーネントを使用する

組み込みマークアップや React コンポーネントを含む複雑な文字列の場合:

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

農村、性別、コンテキストの処理

i18next は、箱から複数のルールを高度なサポートします。 ] 接尾辞または コンテキストでキーを定義します。 例:

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

使用法:[]は、自動的にローカライズに基づいて正しいフォームを選択します。 性別やその他のコンテキストは、]オプションを介して処理することができます。

ダイナミックな言語の切り替えと永続

ユーザーの言語設定を主張するには、選択した言語を[に格納し、AsyncStorage]](または])で保存し、アプリ起動時に読み込む。i18nの設定を修正:

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});