index.js 3.44 KB
Newer Older
xwenliang's avatar
xwenliang committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
/**
 * Bootstrap of PickerTest
 */

import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Dimensions
} from 'react-native';

import Picker from 'react-native-picker';

function createDateData(){
    let date = {};
    for(let i=1950;i<2050;i++){
        let month = {};
        for(let j = 1;j<13;j++){
            let day = [];
            if(j === 2){
                for(let k=1;k<29;k++){
                    day.push(k+'');
                }
            }
            else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
                for(let k=1;k<32;k++){
                    day.push(k+'');
                }
            }
            else{
                for(let k=1;k<31;k++){
                    day.push(k+'');
                }
            }
            month[j+''] = day;
        }
        date[i+''] = month;
    }
    return date;
};

function createAreaData(callback){
    fetch('https://raw.githubusercontent.com/beefe/react-native-picker/master/example/PickerTest/area.json').then(res => {
        res.json().then(area => {
            let data = {};
            let len = area.length;
            for(let i=0;i<len;i++){
                let city = area[i]['city'];
                let cityLen = city.length;
                let ProvinceName = area[i]['name'];
                data[ProvinceName] = {};
                for(let j=0;j<cityLen;j++){
                    let area = city[j]['area'];
                    let cityName = city[j]['name'];
                    data[ProvinceName][cityName] = area;
                }
            }
            callback(data);
        });
    }, err => {
        console.log(err);
    });
};

export default class PickerTest extends Component {

    constructor(props, context) {
        super(props, context);
    }

    _showDatePicker() {
        Picker.hide();
        Picker.init({
            pickerData: createDateData(),
            selectedValue: ['2015年', '12月', '12日'],
            onPickerConfirm: pickedValue => {
xwenliang's avatar
xwenliang committed
78
                console.log('date', pickedValue);
xwenliang's avatar
xwenliang committed
79 80
            },
            onPickerCancel: pickedValue => {
xwenliang's avatar
xwenliang committed
81
                console.log('date', pickedValue);
xwenliang's avatar
xwenliang committed
82 83
            },
            onPickerSelect: pickedValue => {
xwenliang's avatar
xwenliang committed
84
                console.log('date', pickedValue);
xwenliang's avatar
xwenliang committed
85 86 87 88 89 90 91 92 93 94 95
            }
        });
        Picker.show();
    }

    _showAreaPicker() {
        createAreaData(data => {
            Picker.init({
                pickerData: data,
                selectedValue: ['北京', '北京', '朝阳区'],
                onPickerConfirm: pickedValue => {
xwenliang's avatar
xwenliang committed
96
                    console.log('area', pickedValue);
xwenliang's avatar
xwenliang committed
97 98
                },
                onPickerCancel: pickedValue => {
xwenliang's avatar
xwenliang committed
99
                    console.log('area', pickedValue);
xwenliang's avatar
xwenliang committed
100 101
                },
                onPickerSelect: pickedValue => {
xwenliang's avatar
xwenliang committed
102
                    console.log('area', pickedValue);
xwenliang's avatar
xwenliang committed
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
                }
            });
            Picker.show();
        });
    }

    render() {
        return (
            <View style={{height: Dimensions.get('window').height}}>
                <TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showDatePicker.bind(this)}>
                    <Text>DatePicker</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{marginTop: 10, marginLeft: 20}} onPress={this._showAreaPicker.bind(this)}>
                    <Text>AreaPicker</Text>
                </TouchableOpacity>
            </View>
        );
    }
};