React-Native 语言切换react-native-i18n的使用

最近，在用RN开发手机App遇到这样一个传统的需求，语言切换，小白第一次接触，如何见解，敬请指教！

1.安装react-native-i18n依赖库，npm/cnpm/yarn在这里就不说啦，就那么回事儿

2.项目中使用

首先，建立如下语言切换的文件（英文版本的静态属性en.js,中文版本的静态属性zh-Hans.js,语言配置文件Language.js）

en.js 代码如下：

export default {
  'Message': 'Message',
  'Message detail': 'Message detail',
  'Me': 'Me',
  'Personal Information': 'Personal Information',
  'Settings': 'Settings'
}

zh-Han.js 代码如下：

export default {
  'Message': '消息',
  'Message detail': '消息详情',
  'Me': '我',
  'Personal Information': '个人信息',
  'Settings': '设置'
}

Language.js 代码如下：

import I18n from 'react-native-i18n';
import en from './locales/en';
import zhHans from './locales/zh-Hans';

I18n.fallbacks = true;

I18n.translations = {
  en,
  zhHans
};

export default I18n;

静态属性OK啦，那么接下来就是使用啦，这里用的是EventBus（react-native-event-bus），AsyncStorage等，直接上代码：

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, Image, StyleSheet, AsyncStorage } from 'react-native';
import EventBus from 'react-native-event-bus';
import HeadNavigation from '../../component/common/HeadNavigation';
import Language from '../../language/Language';

export default class LanguageSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'zhHans'
    }
    this.renderLanguageItem = this.renderLanguageItem.bind(this)
  }

  componentDidMount() {
    AsyncStorage.getItem('language', (error, result) => {
      if (!error && result) {
        this.setState({ language: result })
      }
    })
  }

  renderLanguageItem(item, index) {
    return (
      <TouchableOpacity
        key={index}
        style={styles.items}
        onPress={() => {
          AsyncStorage.setItem('language', index)
          Language.locale = index
          EventBus.getInstance().fireEvent(Event.LANGUAGE_REFRESH)
          this.setState({
            language: index
          })
        }}
      >
        <View style={[{borderBottomWidth: index === 'en' ? 0 : 1}, styles.content]}>
          <View style={styles.textWrapper}>
            <Text style={styles.text}>{ item }</Text>
          </View>
          {
            this.state.language === index ?
              <Image
                style={styles.image}
                source={ require('../../resources/images/common/check.png') }
              /> : null
          }
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const languages = {
      'zhHans': '简体中文',
      'en': 'English',
    };
    let languageItems = []
    Object.keys(languages).map((key) => {
      languageItems.push(this.renderLanguageItem(languages[key], key))
    })
    return (
      <View style={styles.container}>
        <HeadNavigation
          title={'语言设置'}
          navigation={this.props.navigation}
        />
        { languageItems }
      </View>
    )
  }
}

最后，就是在需要翻译切换的地方监听语言设置的变化了，简单的举个例子：

import EventBus from 'react-native-event-bus'
import Language from '../../language/Language'

componentDidMount() {
    EventBus.getInstance().addListener(Event.LANGUAGE_REFRESH, (this.languageListener = ()                 
    => {
        this.getUserInfo()
      })
    )
}

componentWillUnmount() {
    EventBus.getInstance().removeListener(
      this.languageListener
    )
}
render() {

    return (

        <Text style={styles.itemText}>{ Language.t('Message') }</Text>
    )

}

ok啦，看下效果图

默认为中文简体，效果图如下：

切换为英文，效果图如下：

关于文章有好的意见或者对IT技术有所见解或疑惑都可以与我交流！！

当然得注明来意，不添加备注不会通过，谢谢（私人QQ  非诚勿扰）！！