四の五の

2023年10月2日月曜日

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,
  },
};

2023年10月1日日曜日

react native 国際化対応その１

react nativeアプリを複数言語に対応するために

==参考＝＝

react-i18next Quick start

https://react.i18next.com/guides/quick-start

＝＝＝＝＝

１．インストール

npm install react-i18next i18next --save

２．Quick startのConfigure i18next の i18n.js をコピペしてファイルを作る

３．index.js でimport

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import './i18n'; //追加

４．実行するとエラーになる

Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill.

Will fallback to the compatibilityJSON v3 format handling.

５．i18n.js の初期化処理に”compatibilityJSON: 'v3',”を追加

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',

  interpolation: {
    escapeValue: false,
  },
  compatibilityJSON: 'v3', //追加
});

６．使う(App.js)

import React from 'react';
import {Text, View} from 'react-native';
import {useTranslation} from 'react-i18next';

function App() {
  const {t, i18n} = useTranslation();

  return (
    <View>
      <Text>{t('Welcome to React')}</Text>
    </View>
  );
}

export default App;