react native全球化react native i18n按键转换语言实战

首先先安装

yarn add react-native-i18n(或者npm install -g react-native-i18n）

正常来说只需要创建语言包（可以参照

https://blog.youkuaiyun.com/ddwhan0123/article/details/78425929?utm_source=tuicool&utm_medium=referral），导入i18n然后改变语言的值就OK了，这里主要讲的是用按键转换语言会遇到哪些坑

第一坑、

某些控件在I18N实现之前就已经刷新好了，从而导致的控件无法转换语言。

这个没什么好说的，改程序入口，先刷I18N。

第二坑、

再次打开APP，语言状态回到默认语言。

redux的createStore记录当前语言状态，定义一个locale:i18n.currentLocale()   //currentLocale()这个方法是i18n.JS里面的方法，可以获取用户当前本机语言。


const initialLocaleState = {
  locale: I18n.currentLocale()
};


function selectLocale(state = initialLocaleState, action) {
  switch (action.type) {
    case "SelectLocale":
      return {
        ...state,
        locale: action.locale
      };
    default:
      return state;
  }
}


//在按钮界面定义
this.state={
            changeLocale:'zh'

        }

<Button
    title="简体中文"
    buttonStyle={styles.button}
    onPress={() => {
        this.props.changeLocale('zh');
    }}
/>

//通过这行代码发送出去给store
const mapDispatchToProps = (dispatch, ownProps) => ({
    changeLocale: newLocale => {
        dispatch({ type: "SelectLocale", locale: newLocale });//发数据
        ownProps.navigation.setParams({ locale: newLocale });
    }
});