example

demo/area-picker.js

-'use strict';
- 
-import React, {
-	View,
-	Text,
-	TouchableOpacity,
-	Dimensions
-} from 'react-native';
-
-import Picker from 'react-native-picker';
-
-function createAreaData(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;
-		}
-	}
-	return data;
-};
-
-export default class AreaPicker extends React.Component {
-
-	constructor(props, context){
-		super(props, context);
-		this.state = {
-			pickerData: [{
-				'北京': {
-					'北京': ['朝阳区']
-				}
-			}],
-			selectedValue: ['北京', '北京', '朝阳区']
-		};
-		fetch('https://raw.githubusercontent.com/beefe/react-native-picker/master/demo/area.json').then(res => {
-			res.json().then(data => {
-				this.setState({
-					pickerData: createAreaData(data)
-				});
-			});
-		}, err => {
-			console.log(err);
-		});
-	}
-
-	_onPressHandle(){
-		this.picker.toggle();
-	}
-
-	render(){
-		return (
-			<View style={{height: Dimensions.get('window').height}}>
-				<TouchableOpacity style={{marginTop: 20}} onPress={this._onPressHandle.bind(this)}>
-					<Text>点我</Text>
-				</TouchableOpacity>
-				<Picker
-					ref={picker => this.picker = picker}
-					style={{height: 320}}
-					showDuration={300}
-					pickerData={this.state.pickerData}
-					selectedValue={this.state.selectedValue}
-					onPickerDone={(pickedValue) => {
-						console.log(pickedValue);
-					}}
-				/>
-			</View>
-		);
-	}
-};
\ No newline at end of file

demo/date-picker.js

-'use strict';
- 
-import React, {
-	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;
-};
-
-export default class DatePicker extends React.Component {
-
-	_onPressHandle(){
-		this.picker.toggle();
-	}
-
-	render(){
-		return (
-			<View style={{height: Dimensions.get('window').height}}>
-				<TouchableOpacity style={{marginTop: 20}} onPress={this._onPressHandle.bind(this)}>
-					<Text>点我</Text>
-				</TouchableOpacity>
-				<Picker
-					ref={picker => this.picker = picker}
-					style={{height: 320}}
-					showDuration={300}
-					pickerData={createDateData()}
-					selectedValue={['2015年', '12月', '12日']}
-					onPickerDone={(pickedValue) => {
-						console.log(pickedValue);
-					}}
-				/>
-			</View>
-		);
-	}
-};
\ No newline at end of file

example/PickerTest/index.ios.js

@@ -43,13 +43,36 @@ function createDateData(){
     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);
+    });
+};
+
 class PickerTest extends Component {
 
     constructor(props, context) {
         super(props, context);
     }
 
-    _onPressHandle() {
+    _showDatePicker() {
         Picker.init({
             pickerData: createDateData(),
             selectedValue: ['2015年', '12月', '12日'],
@@ -69,11 +92,36 @@ class PickerTest extends Component {
         Picker.show();
     }
 
+    _showAreaPicker() {
+        createAreaData(data => {
+            Picker.init({
+                pickerData: data,
+                selectedValue: ['北京', '北京', '朝阳区'],
+                onPickerConfirm: pickedValue => {
+                    alert(JSON.stringify(pickedValue));
+                    console.log(pickedValue);
+                },
+                onPickerCancel: pickedValue => {
+                    alert(JSON.stringify(pickedValue));
+                    console.log(pickedValue);
+                },
+                onPickerSelect: pickedValue => {
+                    alert(JSON.stringify(pickedValue));
+                    console.log(pickedValue);
+                }
+            });
+            Picker.show();
+        });
+    }
+
     render() {
         return (
             <View style={{height: Dimensions.get('window').height}}>
-                <TouchableOpacity style={{marginTop: 20}} onPress={this._onPressHandle.bind(this)}>
-                    <Text>Click Me</Text>
+                <TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showDatePicker.bind(this)}>
+                    <Text>DatePicker</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showAreaPicker.bind(this)}>
+                    <Text>AreaPicker</Text>
                 </TouchableOpacity>
             </View>
         );