LocaleProvider 国际化

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

使用

LocaleProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。 
  1. import enUS from 'antd-mobile/lib/locale-provider/en_US';
  3. ...
  5. 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. 

  1. import {
  2.   Pagination, LocaleProvider, List, DatePicker, WhiteSpace, WingBlank, InputItem,
  3.   Picker, SearchBar,
  4. } from 'antd-mobile';
  5. import enUS from 'antd-mobile/lib/locale-provider/en_US';
  6. import ruRU from 'antd-mobile/lib/locale-provider/ru_RU';
  8. const maxDate = new Date(2018, 11, 3, 22, 0);
  9. const minDate = new Date(2015, 7, 6, 8, 30);
  11. const seasons = [
  12.   [
  13.     {
  14.       label: '2013',
  15.       value: '2013',
  16.     },
  17.     {
  18.       label: '2014',
  19.       value: '2014',
  20.     },
  21.   ],
  22.   [
  23.     {
  24.       label: '春',
  25.       value: '春',
  26.     },
  27.     {
  28.       label: '夏',
  29.       value: '夏',
  30.     },
  31.   ],
  32. ];
  34. const Page = () => (
  35.   <div>
  36.     <Pagination total={5} current={1} />
  37.     <WhiteSpace />
  38.     <List
  39.       className="date-picker-list"
  40.       style={{ backgroundColor: 'white' }}
  41.     >
  42.       <DatePicker
  43.         mode="date"
  44.         title="Select date"
  45.         minDate={minDate}
  46.         maxDate={maxDate}
  47.       >
  48.         <List.Item arrow="horizontal">datePicker</List.Item>
  49.       </DatePicker>
  50.       <Picker
  51.         data={seasons}
  52.         cascade={false}
  53.       >
  54.         <List.Item arrow="horizontal">picker</List.Item>
  55.       </Picker>
  56.     </List>
  57.     <WhiteSpace />
  58.     <SearchBar placeholder="Search" showCancelButton />
  59.     <WhiteSpace />
  60.     <InputItem type="money" placeholder="money input" />
  61.   </div>
  62. );
  64. class App extends React.Component {
  65.   constructor(props) {
  66.     super(props);
  67.     this.state = {
  68.       locale: 'English',
  69.     };
  70.   }
  72.   onChange = (value) => {
  73.     this.setState({
  74.       locale: value[0],
  75.     });
  76.   }
  78.   render() {
  79.     const { locale } = this.state;
  80.     const languages = [
  81.       {
  82.         value: '中国',
  83.         label: '中国',
  84.         language: undefined,
  85.       },
  86.       {
  87.         value: 'English',
  88.         label: 'English',
  89.         language: enUS,
  90.       },
  91.       {
  92.         value: 'Русский',
  93.         label: 'Русский',
  94.         language: ruRU,
  95.       },
  96.     ];
  97.     const currentLocale = languages.find(item => item.value === locale).language;
  99.     return (
  100.       <WingBlank>
  101.         <Picker
  102.           data={languages}
  103.           onChange={this.onChange}
  104.           cols={1}
  105.           value={[locale]}
  106.         >
  107.           <List.Item arrow="horizontal">Choose language</List.Item>
  108.         </Picker>
  109.         <WhiteSpace size="xl" />
  110.         <WhiteSpace size="xl" />
  111.         <LocaleProvider locale={currentLocale}>
  112.           <Page />
  113.         </LocaleProvider>
  114.       </WingBlank>
  115.     );
  116.   }
  117. }
  119. ReactDOM.render(<App />, mountNode);

LocaleProvider国际化 - 图1

API

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