LocaleProvider 国际化

LocaleProvider 国际化

为组件内建文案提供统一的国际化支持。

使用

LocaleProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

import enUS from 'antd-mobile/lib/locale-provider/en_US';
...
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;

我们暂时只提供英语，中文两种语言支持（默认语言是中文），所有语言包可以在这里找到。

增加语言包

如果你找不到你需要的语言包，欢迎你在英文语言包的基础上创建一个新的语言包，并给我们 Pull Request。

其他国际化需求

本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 react-intl，可参考示例：Intl demo 1 和 Intl demo 2。

代码演示

国际化

Wrap your app with LocaleProvider, and apply the corresponding language package.

import { Pagination, LocaleProvider, List, DatePicker, WhiteSpace, Button, InputItem, WingBlank } from 'antd-mobile';
import enUS from 'antd-mobile/lib/locale-provider/en_US';
import moment from 'moment';
const maxDate = moment('2018-12-03 +0800', 'YYYY-MM-DD Z').utcOffset(8);
const minDate = moment('2015-08-06 +0800', 'YYYY-MM-DD Z').utcOffset(8);
const Page = () => (
  <div>
    <Pagination total={5} current={1} />
    <WhiteSpace />
    <List
      className="date-picker-list"
      style={{ backgroundColor: 'white' }}
    >
      <DatePicker
        mode="date"
        title="Select date"
        extra="Click to see i18n text"
        minDate={minDate}
        maxDate={maxDate}
      >
        <List.Item arrow="horizontal">date</List.Item>
      </DatePicker>
    </List>
    <WhiteSpace />
    <InputItem type="money" placeholder="money input" />
  </div>
);
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isEnglish: true,
    };
  }
  handleClick = (e) => {
    e.preventDefault();
    this.setState({
      isEnglish: !this.state.isEnglish,
    });
  }
  render() {
    const locale = this.state.isEnglish ? enUS : undefined;
    return (
      <WingBlank>
        <Button type="primary" onClick={this.handleClick}>{this.state.isEnglish ? 'change to chinese' : '切换到英文'}</Button>
        <WhiteSpace />
        <LocaleProvider locale={locale}>
          <Page />
        </LocaleProvider>
      </WingBlank>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

参数	说明	类型	默认值
locale	语言包配置，语言包可到 `antd-mobile/lib/locale-provider/` 目录下寻找	object	-

LocaleProvider国际化

LocaleProvider 国际化

使用

增加语言包

其他国际化需求

代码演示

API