LocaleProvider 国际化

    为组件内建文案提供统一的国际化支持。 LocaleProvider 使用 React 的 特性，只需在应用外围包裹一次即可全局生效。 我们暂时只提供英语，中文两种语言支持（），所有语言包可以在 这里 找到。 如果你找不到你需要的语言包，欢迎你在 的基础上创建一个新的语言包，并给我们 Pull Request。

    其他国际化需求

    本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 react-intl，可参考示例： 和 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.     <WhiteSpace />
    37.     <List
    39.       style={{ backgroundColor: 'white' }}
    40.     >
    41.       <DatePicker
    42.         mode="date"
    43.         title="Select date"
    44.         minDate={minDate}
    45.         maxDate={maxDate}
    46.       >
    47.         <List.Item arrow="horizontal">datePicker</List.Item>
    48.       </DatePicker>
    49.       <Picker
    50.         data={seasons}
    51.         cascade={false}
    52.       >
    53.         <List.Item arrow="horizontal">picker</List.Item>
    54.       </Picker>
    55.     </List>
    56.     <WhiteSpace />
    57.     <SearchBar placeholder="Search" showCancelButton />
    58.     <WhiteSpace />
    59.     <InputItem type="money" placeholder="money input" />
    60.   </div>
    61. );
    63. class App extends React.Component {
    64.   constructor(props) {
    65.     super(props);
    66.     this.state = {
    67.       locale: 'English',
    68.     };
    69.   }
    71.   onChange = (value) => {
    72.     this.setState({
    73.       locale: value[0],
    74.     });
    75.   }
    76.   render() {
    78.     const languages = [
    79.       {
    80.         value: '中国',
    81.         label: '中国',
    82.         language: undefined,
    83.       },
    84.       {
    85.         value: 'English',
    86.         label: 'English',
    87.         language: enUS,
    88.       },
    89.       {
    90.         value: 'Русский',
    91.         label: 'Русский',
    92.         language: ruRU,
    93.       },
    94.     ];
    95.     const currentLocale = languages.find(item => item.value === locale).language;
    97.     return (
    98.       <WingBlank>
    99.         <Picker
    100.           data={languages}
    101.           onChange={this.onChange}
    102.           cols={1}
    103.           value={[locale]}
    104.         >
    105.           <List.Item arrow="horizontal">Choose language</List.Item>
    106.         </Picker>
    107.         <WhiteSpace size="xl" />
    108.         <WhiteSpace size="xl" />
    109.         <LocaleProvider locale={currentLocale}>
    110.           <Page />
    111.         </LocaleProvider>
    112.       </WingBlank>
    113.     );
    114.   }
    115. }