今天也是平凡的一天,在公司里调调UI、改改BUG,顺便就写点前几天集成的国际化方案吧
前几天,BOSS找到我说,要把app翻译一下销售到国外去,接轨下国际市场,让我整理下需要翻译的文案。首先想到的就是,应该要做国际化处理了,之前也看过关于国际化的一些方案,于是翻阅资料后,就利用react-intl
集成了一个简单的国际化方案。
安装过程就不多说了,使用npm
安装,如下指令:npm install react-intl --save
首先,先创建翻译方案存放的目录
├── dist
├── src
│ └── locales // 多语言文件存放目录,推荐按照页面进行组织
│ ├── en-US
│ │ ├── page1.js
│ │ ├── page2.js
│ │ └── index.js
│ │
│ └── zh-CN
│ ├── page1.js
│ ├── page2.js
│ └── index.js
└── package.json
大概结构就是这样,使用locales
目录存放各国语言的翻译方案,文件名以语言-国家
的形式命名,里面则按实际页面创建js
文件,index.js
进行整合。
文件内容大概是这样子的:
page.js
export default {
'app.startup.tips.logging': 'Logging in to device...',
'app.startup.tips.device': 'Getting device info...',
};
index.js
import page1 from './page1.js';
import page2 from './page2.js';
export default {
...page1 ,
...page2
};
然后再自定义一个多语言组件LocaleProvider
,引入react-intl
并导入语言包,对其进行一层封装。
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl';
// 引入 react-intl 多语言包
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
// 引入 locale 配置文件
import en_US from '../../locales/en-US';
import zh_CN from '../../locales/zh-CN';
// 设置语言包
addLocaleData([...en, ...zh]);
const localeInfo = {
'zh-CN': {
appLocale: 'zh',
appMessages: zh_CN,
},
'en-US': {
appLocale: 'en',
appMessages: en_US,
},
};
class LocaleProvider extends PureComponent {
render() {
const { locale, children } = this.props;
return (
{React.Children.only(children)}
);
}
}
LocaleProvider.propTypes = {
locale: PropTypes.string.isRequired,
children: PropTypes.element.isRequired,
};
export default LocaleProvider;
由外部传入locale
控制语言包的加载,使用LocaleProvider
包裹根组件
import LanguageProvider from './components/LocaleProvider';
import AppRouter from './router';
import { getLocale } from './utils/locale';
const locale = getLocale();
ReactDOM.render(
,
ICE_CONTAINER
);
这里使用了react-router-dom
做路由跳转,所以外层是一个封装的AppRouter
组件,如果集成redux
就应该是Provider
。
locale
由浏览器语言决定,使用getLocale
获取
/**
* 获取当前语言
*/
function getLocale() {
if (!window.localStorage.getItem('lang')) {
window.localStorage.setItem('lang', navigator.language);
}
return localStorage.getItem('lang');
}
这里也可以做成state
,动态控制其locale
。
接下来就是对代码中的方案进行翻译替换,在需要翻译的类里引入
import { injectIntl } from 'react-intl';
并在类头上加入injectIntl
注解
@withRouter @injectIntl
class Startup extends Component {
//.....
}
此时,this.props
中就会有一个intl
对象,其结构大概如下图:
主要包含日期格式化(formatDate,formatTime,formatRelativeTime
)、字符串格式化(formatMessage,formatHTMLMessage
)、数字格式化(formatNumber,formatPlural
)功能。其具体翻译功能及使用方法,推荐翻阅github。
而翻译文本,主要使用formatMessage
方法
componentDidMount() {
let {intl: { formatMessage },} = this.props;
this.formatMessage = formatMessage;
// .......
}
在生命周期componentDidMount
中,取出并保存formatMessage
方法,在需要翻译的地方,如下使用:
this.setState({text: this.formatMessage({id:'app.startup.tips.device'}) });
参数为locales
里配置的对应的id
对象
做到这里,一个简单的国际化集成就完成了。其主要工作量,主要还是翻译方案的地方,还得找专业人士进行翻译,自己蹩脚的英语及机翻还是差太多。。。。