React Native で i18next と locize で国際化対応App を作る

現在開発中の SRMLogger を折角なので国際化対応（英語と日本語）することにした。幸い、テキストリテラルをベタ打ちで書いていた部分はまだまだ少なかったため、改修は少量で済んだ。

基本的には React Nativeアプリにlocizeとi18nextを入れてi18n対応をいい感じに行う の通りの手順で国際化対応を進めたのだが、一部、サンプルコードのままで試したところうまくいかないところがあったので、最終的に使ったコードを示す。

// App.js
import React from 'react';
import { AppLoading } from 'expo';

import initI18n from './i18n/initI18n';

export default class Whatever extends React.Component {
  state = {
    isLoadingI18nComplete: false,
  };

  constructor(props) {
    super(props);
    initI18n(() => this.setState({ isLoadingI18nComplete: true }));
  }

  render() {
    const {
      isLoadingI18nComplete,
    } = this.state;

    if (!isLoadingI18nComplete) {
      return (
        <AppLoading />
      );
    }
    return (
      <App />
    );
  }
}

// i18n/initI18n.js
import i18next from 'i18next';
import LocizeBackend from 'i18next-locize-backend';
import { Localization } from 'expo';
  
const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: (callback) => {
    callback(Localization.locale.split('-')[0]);
  },
  init: () => { },
  cacheUserLanguage: () => { },
};

export default (callback) => i18next
  .use(languageDetector)
  .use(LocizeBackend)
  .init({
    debug: true,
    fallbackLng: {
      // lngに指定した言語が翻訳されていない場合に参照する言語
      default: ['en'],
    }, 
    // locizeに登録されているnamespace。demoの場合はtranslation
    defaultNS: 'translation',
    backend: {
      // locizeのプロジェクトID
      projectId: 'YOUR LOCIZE PROJECT ID',
      // saveMissingがtrueの時に必要
      apiKey: 'YOUR LOCIZE API KEY',
      // locizeで設定されているreferenceLngを指定する。saveMissingがtrueのときに必要。
      referenceLng: 'en',
      // locizeのどのバージョンの言語を取得するのかを指定する。デフォルトはlatest
      version: 'latest',
    },
  }, callback);

ここまで準備したら、後は、国際化したいコンポーネントのテキストリテラルを i18next.t('key') メソッドで置き換える。

// src/screen/SomeScreen.js
import React from 'react';
import {
  View,
  Text,
} from 'react-native';
import i18next from 'i18next';

class SomeScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>{i18next.t('Hello')}</Text>
      </View>
    );
  }
}

これで、SomeScreen には デバイスの言語設定がEnglishの場合は locaize の en に対して設定した key = Hello に対する値が、日本語の場合は ja に対して設定した key = Hello に対する値が表示される（こんにちはとか）。

ちなみに、 SRMLogger は現在、プライベートベータテストの実施を Apple に申請中。 Apple のレビューを通ったらまた報告予定。