react native 国際化対応 その２

http://shinogono.blogspot.com/2023/10/react-native.html

からの続き

１．端末の言語を取得するために「react-native-localize」をインストール

npm install --save react-native-localize

※https://www.npmjs.com/package/react-native-localize

２．i18n.jsの言語設定を変更

　　端末の言語が使えない場合は英語で表示

i18n.use(initReactI18next).init({

  resources,

  lng: getLocales()[0].languageCode, //変更

  fallbackLng: 'en', //追加

  interpolation: {

    escapeValue: false,

  },

  compatibilityJSON: 'v3',

});

３．i18n.jsのresourceをJSONファイルに移動

en.json

{

  "Welcome to React": "Welcome to React and react-i18next"

}

fr.json

{

  "Welcome to React": "Bienvenue à React et react-i18next"

}

日本語も追加

ja.json

{

  "Welcome to React": "ようこそ React と react-i18next "

}

４．i18n.jsでJSONファイルをimport

import translationsEN from './en.json';

import translationsFR from './fr.json';

import translationsJA from './ja.json';

５．i18n.jsのresourceを書き換え

const resources = {

  en: {

    translation: translationsEN,

  },

  fr: {

    translation: translationsFR,

  },

  ja: {

    translation: translationsJA,

  },

};