React Native国际化

react-native-ios

安装

使用 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 (        
                
                 
      
       {[I18n.t('home.language'), I18n.t('home.live_demo')]}
                  
                             
     
                  {instructions}            
                 
                 
     
      {I18n.locale = 'en',this.setState({            localLanguage: 'en'            })}}>                    
      
       {I18n.t('buttons.changeToEnglish',{locale: this.state.localLanguage})}
                  
                 
     
      {I18n.locale = 'zh',            this.setState({            localLanguage: I18n.locale            })}}>                    
      
       {I18n.t('buttons.changeToChinese')}
                  
                 
     
      {                // getLanguages().then(languages => {                //   I18n.locale = language;                // });                I18n.locale = DeviceInfo.getDeviceLocale(),                this.setState({                    localLanguage: I18n.locale                })            }}>                    
      
       {I18n.t('buttons.changeToSystem')}
                  
             
            );    }    ...