React Native多语言

时间:2023-02-11 15:34:33

https://medium.com/@danielsternlicht/adding-localization-i18n-g11n-to-a-react-native-project-with-rtl-support-223f39a8e6f2

https://www.jianshu.com/p/4dc5612854eb

可以用react-native-i18n

执行命令安装:

npm i react-native-i18n --save

在js目录下新建多语言文件,比如说需要支持英文和中文,那么就建两个文件en.js和zh.js

文件内容为:

en.js

export default {

welcome:{

welcome:"welcome to Beijing"

}

}

zh.js

export default {

welcome:{

welcome:"欢迎来到北京"

}

}

然后建一个国际化文件,比如叫 i18n.js

i18n.js

import I18n from 'react-native-i18n';

import en from './en';//en为en.js的路径

import zh from './zh';

I18n.defaultLocale = 'zh'; //设置默认的语言

I18n.fallback = true;        //设置

I18n.locale = 'zh';           //设置当前的语言

I18n.translations = {     //支持的语言列表

en,

zh

};

export function strings(name, params = {}) {//params默认为json类型

return I18n.t(name, params);

}

export function setLanguage(lan) {

I18n.locale = lan;

}

export default I18n;

然后在其他js文件中,如下引用:

import {strings,setLanguage} from './i18n';//i18n.js文件的位置

<Text>{strings('welcome.welcome')}<Text>//如果是中文输出就会是“欢迎来到北京”

在这里调用 setLanguage('en')就会切换语言到英文,不过在当前页面的话需要调用this.setState刷新一下当前页面。