React-native-i18n

为什么80%的码农都做不了架构师？>>>   

React Native国际化

react-native-ios

github
安装

    使用 yarn 安装（推荐）
    yarn add react-native-i18n

    使用 npm 安装
    npm install react-native-i18n --save

    react-native link

    用户获取系统本地语言环境
    yarn add react-native-device-info 
    react-native link react-native-device-info

配置iOS环境
进入 iOS 目录，新建 Podfile 文件

    pod init

在 project target 下面添加

     # Explicitly include Yoga if you are using RN >= 0.42.0
    pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'CxxBridge', # Include this for RN >= 0.47
        'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # needed for debugging
    ]
    pod 'RNI18n', :path => '../node_modules/react-native-i18n'

    # Third party deps podspec link
    pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

安装RNI18n

    pod install

在 xCode 中的 target 里添加相应支持的语言

配置Android环境
安装Android build tools 25.0.2
上面命令行link react-native-device-info会自动配置好安卓开发依赖

简单案例

以中文、英文为例，新建 zh.js，en.js，I18n.js

    //zh.js
    export default {
        home: {
            greeting: '中文问候语',
            tab_home: '首页',
            tab_donate: '捐赠',
            tab_demo: '例子',
            language: '语言',
            live_demo: '例子',
            star_me: '关注我',
            donate: '贡献',
            exit: '是否退出?',
        },
        donate: {
            donate: '支持我们～~',
        },
        demo: {
            dialog: '提示框',
            button: '按钮',
            switch: '开关',
            action_sheet: '',
        },
        buttons: {
            changeToEnglish: '切换到英文',
            changeToChinese: '切换到中文',
            changeToSystem: '切换到系统语言',       
        }
    };

    //en.js
    export default {
        home: {
            greeting: 'Greeting in en',
            tab_home: 'Home',
            tab_donate: 'Donate',
            tab_demo: 'Demo',
            language: 'language',
            live_demo: 'Live Demo',
            star_me: 'Star me',
            donate: 'donate',
            exit: 'exit?',
        },
        donate: {
            donate: 'donate us~~~',
        },
        demo: {
            dialog: 'dialog',
            button: 'button',
            switch: 'switch',
            action_sheet: 'Action Sheet',
        },
        buttons: {
            changeToEnglish: 'change to english',
            changeToChinese: 'change to chinese',
            changeToSystem: 'change to System',
        }
    };    

    //I18n.js
    import I18n,{ getLanguages } from 'react-native-i18n';
    import en from './en';
    import zh from './zh';

    //默认为英文
    I18n.defaultLocale = 'en';
    /*
    * 官方推荐  
    * 本例只有一个en.js,假如系统返回的语言格式en-US或en-GB,I18n会自动寻找 en-US.js或en-GB.js,如果找不到会接着找 en.js
    * Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
    */
    I18n.fallbacks = true;
    //支持转换的语言
    I18n.translations = {
        en,
        zh,
    };
    export {
        I18n,
        getLanguages
    }

    // app.js
    import {I18n, getLanguages} from './I18n'
    import DeviceInfo from 'react-native-device-info'

    ...
    render() {
        return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
            <Text>{[I18n.t('home.language'), I18n.t('home.live_demo')]}</Text>
            </Text>
            
            <Text style={styles.instructions}>
            {instructions}
            </Text>
            <Text></Text>
            <TouchableOpacity onPress={()=>{I18n.locale = 'en',this.setState({
            localLanguage: 'en'
            })}}>
                    <Text>{I18n.t('buttons.changeToEnglish',{locale: this.state.localLanguage})}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{I18n.locale = 'zh',
            this.setState({
            localLanguage: I18n.locale
            })}}>
                    <Text>{I18n.t('buttons.changeToChinese')}</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{
                // getLanguages().then(languages => {
                //   I18n.locale = language;
                // });
                I18n.locale = DeviceInfo.getDeviceLocale(),
                this.setState({
                    localLanguage: I18n.locale
                })
            }}>
                    <Text>{I18n.t('buttons.changeToSystem')}</Text>
            </TouchableOpacity>
        </View>
        );
    }
    ...

上面例子中直接修改I18n.locale = 'xx'后，当前页面并不会根据对应的语言刷新，所以加了一句 setState 方法刷新页面，开发中要根据实际情况设计

转载于:https://my.oschina.net/rc6688/blog/1796647