今天也是平凡的一天，在公司里调调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 (
<IntlProvider
locale={localeInfo[locale].appLocale}
messages={localeInfo[locale].appMessages}
>
{React.Children.only(children)}
</IntlProvider>
);
}
}
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(
<LanguageProvider locale={locale}>
<AppRouter />
</LanguageProvider>,
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对象
做到这里，一个简单的国际化集成就完成了。其主要工作量，主要还是翻译方案的地方，还得找专业人士进行翻译，自己蹩脚的英语及机翻还是差太多。。。。
