React Nativeで多言語化する

React Nativeで多言語化

色々探してみたが、React Nativeで多言語化する記事が少なかったので記事にしようと思います。

使用するライブラリーは、react-i18nextを使用する

• react-i18next
• react-native-localize

インストール

npm install react-i18next i18next react-native-localize --save

言語ファイル

• ja.json

{
  "TITLE": "タイトル"
}

• en.json

{
  "TITLE": "title"
}

言語ファイルをi18nextで初期化

i18n.ts

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import {getLocales} from 'react-native-localize';

import EN from './en.json';
import JA from './ja.json';

i18n.use(initReactI18next).init({
  resources: {
    en: {translation: EN},
    ja: {translation: JA},
  },
  lng: getLocales()[0].languageCode,
  fallbackLng: ['en', 'ja'],
  interpolation: {
    escapeValue: false,
  },
  compatibilityJSON: 'v3',
});

export default i18n;

上記で、React Nativeで多言語化する準備が出来ました。

実際に使ってみる

App.tsx

import {useTranslation} from 'react-i18next';
import './src/translations/i18n';

const App = () => {
  const {t} = useTranslation();
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <Text style={styles.sectionTitle}>{`${t('TITLE')}`}</Text>
      </ScrollView>
    </SafeAreaView>
  );
};

t('TITLE')

この部分が多言語化されます。

---

あまりReact Nativeで多言語化の情報が少なかったので、参考になれば嬉しいです。