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

最新推荐文章于 2025-06-08 09:05:18 发布

chaosama

最新推荐文章于 2025-06-08 09:05:18 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react native

本文链接：https://blog.youkuaiyun.com/chaosama/article/details/80360977

react native 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用react-native-i18n进行应用国际化设置，并解决在实际应用中遇到的问题，如某些控件未能正确转换语言及语言状态重置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先安装

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 });
}
});