LoginSignup
4
4

More than 5 years have passed since last update.

React Nativeアプリを多言語化(react-native-i18n)

Posted at

React Nativeでも多言語化したい

2019年になっても日本ではキワモノ感があるReact Nativeですが、多言語化もささっとできるよ、ということでreact-native-i18nの導入について書いてみます。

導入

yarn add react-native-i18n # OR npm install react-native-i18n --save
react-native link react-native-i18n
cd ios && pod install
import Lang from 'react-native-i18n';

class Demo extends React.Component {
  componentWillMount() {
    Lang.fallbacks = true; // en-USなどがenに変換されます。
    Lang.locale = "ja"; // ここは設定しなくても自動で判別されます。
    Lang.translations = {
      en: {
        greeting: 'Hello',
      },
      ja: {
        greeting: '( ´・ω・)o',
      },
    };
  }

  render() {
    return <Text>{Lang.t('greeting')}</Text>;
  }
}

スクリーンショット 2019-04-11 16.34.51.png
スクリーンショット 2019-04-11 16.34.58.png

まとめ

ネイティブで多言語化とかやったことないけど、多分別々に設定しないといけないと思います(優越感
結局個人開発だと翻訳ファイル用意するのが大変なのであんまり差はないですが。

4
4
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
4
4