react - 10. 国际化 i18n

参考： https://github.com/react-native-community/react-native-languages

这里包含了具体的例子 ， 见example 文件夹

1. 安装：

yarn add react-native-languages --verbose  （ 用npm可能会报错, windows下）

2.

react-native link react-native-languages

对于安卓来说， 上面的命令已经把该干的事情干了。 IOS 日后补上 。

3. 使用。

3.1  写好各种i18n 的文件，

// src/translations/en.json
{
  "title": "react-native-languages demo",
  "current": "The current language is \"{{language}}\""
}

3.2 引入这些文件 (src/i18n.js) 这个文件算是一个汇总文件。 它也是要被别的文件引用的

import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from './translations/en.json';
import fr from './translations/fr.json';
import de from './translations/de.json';

i18n.locale = RNLanguages.language;
i18n.fallbacks = true;
i18n.translations = { en, fr, de };

export default i18n;

3.3 在实际的代码中： ( src/App.js)

<Text style={styles.title}>{i18n.t('title')}</Text>

import React, { Component } from 'react';
import RNLanguages from 'react-native-languages';
import i18n from './i18n';
import Root from './Root';

export default class App extends Component {
  componentWillMount() {
    RNLanguages.addEventListener('change', this._onLanguagesChange);
  }

  componentWillUnmount() {
    RNLanguages.removeEventListener('change', this._onLanguagesChange);
  }

  _onLanguagesChange = ({ language }) => {
    i18n.locale = language;
  };

  render() {
    return (
           {i18n.t('current', { language: i18n.currentLocale() })}        
    )
  }
}