国际化

开始使用#

pro 通过 umi 插件 umi-plugin-locale 来实现全球化的功能，并且默认开启。 umi-plugin-locale 约定在 src/locales 中引入相应的 js，例如 en-US.js 和 zh-CN.js，并且在 config/config.js 中做如下配置：

plugins:[
   ...,
   locale: {
        enable: true,
        default: 'zh-CN',
        baseNavigator: true,
    },
    ....
]

就可以在代码中使用全球化的功能了。详细配置参见config。

umi-plugin-locale 封装了react-intl, api 与 react-intl 基本相同，并做了封装使用起来更加方便。全部 api 如下：

import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi/locale';

格式化字符串#

如果我们在 en-US.js 和 zh-CN.js 中分别作了如下配置：

// en-US.js

export default {
  'navbar.lang': '中文',
}

// zh-CN.js

export default {
  'navbar.lang': 'English',
}

我们就可以在组件中这样使用

import { FormattedMessage } from 'umi/locale';

export default () => {
  return (
    <div>
      <FormattedMessage id="navbar.lang" />
    </div>
  );
};

在某些情况下，你可能需要直接返回 string。你可以这样使用：

import { formatMessage } from 'umi/locale';

export default () => {
  return <div>{formatMessage({ id: 'navbar.lang' })}</div>;
};

设置区域#

umi-plugin-locale 暴露了名为 setLocale 和 getLocale 的 api，通过这两个 api 可以方便的切换区域。代码看起来像这样的：

 ...
 changLang = () => {
    const locale = getLocale();
    if (!locale || locale === 'zh-CN') {
      setLocale('en-US');
    } else {
      setLocale('zh-CN');
    }
  };
  render(){
        <Button
          size="small"
          ghost={theme === 'dark'}
          style={{
            margin: '0 8px',
          }}
          onClick={() => {
            this.changLang();
          }}
        >
          <FormattedMessage id="navbar.lang" />
        </Button>
  }

更多高级的用法可以参照 react-intl 的 api。