i18nを使いReact Native(CRNA)で多言語化 #reactnative

react-native-i18nのエラー

CRNAでreact-native-i18nを使用すると下記のエラーが出てしまう

"react-native-i18n module is not correctly linked"

Expo用にラップされたex-react-native-i18nを使う

I18n.localeがenしか取得できない

描画前に「I18n.initAsync()」を実行する必要がある
- 参考: https://github.com/xcarpentier/ex-react-native-i18n/issues/7#issuecomment-332475245

App.js

import React from 'react'
import { AppLoading } from 'expo'
import I18n from 'ex-react-native-i18n'
import Top from './Top'

export default class App extends React.Component {
  state = { isAssetsLoaded: false }

  componentWillMount() {
    this.loadAssetsAsync()
  }

  loadAssetsAsync = async () => {
    try {
      await I18n.initAsync()
    } catch (e) {
      // console.log(e.message)
    } finally {
      this.setState({ isAssetsLoaded: true })
    }
  }

  render() {
    return this.state.isAssetsLoaded ? <Top /> : <AppLoading />
  }
}

ファイルで管理する方法

i18n/index.js

import I18n from 'ex-react-native-i18n'
import en from './locales/en'
import ja from './locales/ja'

I18n.fallbacks = true

I18n.translations = {
  en,
  ja
}

export default I18n

i18n/locales/en.js

export default {
  cat: 'Cat',
  hello: 'Hello'
}

i18n/locales/ja.js

export default {
  cat: 'ねこ',
  hello: 'やぁやぁ'
}