react native 国際化対応 その３

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

からの続き

１．変数を埋める

ja.json

{

"Welcome to React": "ようこそ {{arg1}} と {{arg2}} "

}

App.js

  return (

    <View>

      <Text>

        {t('Welcome to React', {arg1: 'React', arg2: 'react-i18next'})}

      </Text>

    </View>

  );

２．prefixをつける

ja.json

{

  "title": {

    "welcome": "タイトル ようこそ"

  },

  "message": {

    "welcome": "メッセージ ようこそ"

  }

}

App.js

  return (

    <View>

      <Text>{t('title.welcome')}</Text>

      <Text>{t('message.welcome')}</Text>

    </View>

  );

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,

  },

};

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;

７．実行

バーコード作成アプリ　Privacy Policy

　広告Id、ネットワーク使用状況、ネットワーク接続:

　　Google広告で使用します