9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-07

react-native-i18nのエラー

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

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

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

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

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: 'やぁやぁ'
}
9
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?