【React Native】react-native-localizeとi18n-jsを利用して多言語化

document

• react-native-localize
• i18n-js

プロジェクトにパッケージを導入

yarn add react-native-localize
yarn add i18n-js

追加の設定

もしreact-nativeのバージョンが0.60以上の場合は手動のリンク設定は必要ないので準備はこれで完了です。
手動のリンク設定が必要な場合は以下を参照してください。

• react-native-localize linking instructions

使い方サンプル

以下の3つのファイルを作成します。

• en.js
  English用の定義ファイル
• ja.js
  Japanese用の定義ファイル
• i18n.js
  上記の定義ファイルを呼び出して翻訳を行うファイル
  

en.js

export default {
  welcome: "welcome"
};

ja.js

export default {
  welcome: "ようこそ",
};

i18n.js

import I18n from 'i18n-js';
import * as Localize from 'react-native-localize';

import en from './en';
import ja from './ja';

const locales = Localize.getLocales();
console.log(locales);

if (Array.isArray(locales)) {
  I18n.locale = locales[0].languageTag;
}

I18n.fallbacks = true;
I18n.translations = {
  en,
  ja,
};

export default I18n;

最後にexportしているI18nを利用します。

import React from "react";
import I18n from "./I18n";

const App = () => {
  return (
    <View>
      <Text>{I18n.t('welcome')}</Text>
    </View>
  );
};

export default App;

結果