bugs

README.md

@@ -2,7 +2,7 @@
 
 A Picker written in pure javascript for cross-platform support.
 
-Since we use PickerIOS for iOS platform and [react-native-picker-android](https://github.com/beefe/react-native-picker-android) for android platform, it has the same interface and ui width PickerIOS.
+It was most likely an example of how to build a cross-platform Picker Component use [react-native-picker-android](https://github.com/beefe/react-native-picker-android).
 
 Needs react-native >= 0.14.2
 
@@ -10,3 +10,32 @@ Needs react-native >= 0.14.2
 
 ###Documentation
 
+####Props
+- <b>pickerHeight</b> number
+- <b>showDuration</b> number
+- <b>pickerData</b> array
+- <b>selectedValue</b> any
+- <b>onPickerDone</b> function
+
+###Usage
+
+####Step 1 - install
+
+```
+	npm install react-native-picker --save
+```
+
+####Step 2 - import and use in project
+
+```javascript
+	import Picker from 'react-native-picker'
+	
+	<Picker
+		ref={picker => {this.picker = picker;}}
+		pickerHeight={300}
+		showDuration={300}
+		pickerData={}//picker`s value List
+		selectedValue={}//default to be selected value
+		onPickerDone={}//when confirm your choice
+	/>
+```
\ No newline at end of file

index.js

@@ -7,7 +7,8 @@ import React, {
 	Text,
 	Animated,
 	Platform,
-	Dimensions
+	Dimensions,
+	PickerIOS
 } from 'react-native';
 
 import PickerAndroid from 'react-native-picker-android';
@@ -19,61 +20,140 @@ let height = Dimensions.get('window').height;
 
 export default class PickerAny extends React.Component {
 
+	static propTypes = {
+		pickerHeight: PropTypes.number,
+		showDuration: PropTypes.number,
+		pickerData: PropTypes.array,
+		onPickerDone: PropTypes.func
+	}
+
+	static defaultProps = {
+		pickerHeight: height/3,
+		showDuration: 300,
+		onPickerDone: ()=>{}
+	}
+
 	constructor(props, context){
 		super(props, context);
 		this.state = {
-
+			selectedValue: this.props.selectedValue,
+			slideAnim: new Animated.Value(-this.props.pickerHeight)
 		};
-	};
+	}
+
+	_slideUp(){
+		this.isMoving = true;
+		Animated.timing(
+			this.state.slideAnim,
+			{
+				toValue: 0,
+				duration: this.props.showDuration,
+			}
+		).start((evt) => {
+			if(evt.finished) {
+				this.isMoving = false;
+				this.isPickerShow = true;
+			}
+		});
+	}
+
+	_slideDown(){
+		this.isMoving = true;
+		Animated.timing(
+			this.state.slideAnim,
+			{
+				toValue: -this.props.pickerHeight,
+				duration: this.props.showDuration,
+			}
+		).start((evt) => {
+			if(evt.finished) {
+				this.isMoving = false;
+				this.isPickerShow = false;
+			}
+		});
+	}
+
+	_toggle(){
+		if(this.isMoving) {
+			return;
+		}
+		if(this.isPickerShow) {
+			this._slideDown();
+		}
+		else{
+			this._slideUp();
+		}
+	}
+	//向父组件提供方法
+	toggle(){
+		this._toggle();
+	}
 
 	_prePressHandle(callback){
-		this.picker.moveUp();
-	};
+		//通知子组件往上滚
+		this.pickerWheel.moveUp();
+	}
 
 	_nextPressHandle(callback){
-		this.picker.moveDown();
-	};
+		//通知子组件往下滚
+		this.pickerWheel.moveDown();
+	}
+
+	_pickerFinish(){
+		let pickedValue = this.pickedValue === undefined ? this.state.selectedValue : this.pickedValue;
+		this._toggle();
+		this.props.onPickerDone(pickedValue);
+	}
 	
 	render(){
-		<Animated.View style={[styles.picker, {bottom: this.state.slideAnim}]}>
-			<View style={styles.pickerToolbar}>
-				<View style={styles.pickerBtnView}>
-					<Text style={styles.pickerMoveBtn} onPress={this._prePressHandle}>上一个</Text>
-					<Text style={styles.pickerMoveBtn} onPress={this._nextPressHandle}>下一个</Text>
-				</View>
-				<View style={styles.pickerFinishBtn}>
-					<Text style={styles.pickerFinishBtnText} 
-						onPress={() => {
-							this.setState({course: this.state.courseData[this.index || 0]})
-							this._pickerToggle();
-						}}>完成</Text>
-				</View>
+		let pickerBtn = Platform.OS === 'ios' ? null : (
+			<View style={styles.pickerBtnView}>
+				<Text style={styles.pickerMoveBtn} onPress={this._prePressHandle.bind(this)}>上一个</Text>
+				<Text style={styles.pickerMoveBtn} onPress={this._nextPressHandle.bind(this)}>下一个</Text>
 			</View>
-			<Picker
-				ref={(picker) => { this.picker = picker }}
-				selectedValue={this.props.selectedValue}
-				onValueChange={(index) => this.index = index} >
-				{this.props.pickerData.map((value, index) => (
-					<PickerAndroid.Item
-						key={index}
-						value={value}
-						label={value}
-					/>)
-				)}
-			</Picker>
-		</Animated.View>
-	};
+		);
+		return (
+			<Animated.View style={[styles.picker, {
+				height: this.props.pickerHeight,
+				bottom: this.state.slideAnim
+			}]}>
+				<View style={styles.pickerToolbar}>
+					{pickerBtn}
+					<View style={styles.pickerFinishBtn}>
+						<Text style={styles.pickerFinishBtnText} 
+							onPress={this._pickerFinish.bind(this)}>完成</Text>
+					</View>
+				</View>
+				<Picker
+					ref={pickerWheel => this.pickerWheel = pickerWheel }
+					selectedValue={this.state.selectedValue}
+					onValueChange={value => {
+						this.pickedValue = value;
+						this.setState({
+							selectedValue: value
+						});
+					}} >
+					{this.props.pickerData.map((value, index) => (
+						<PickerItem
+							key={index}
+							value={value}
+							label={value}
+						/>)
+					)}
+				</Picker>
+			</Animated.View>
+		);
+	}
 };
 
 let styles = StyleSheet.create({
-	picker: { 
+	picker: {
 		flex: 1,
 		position: 'absolute',
 		bottom: 0,
 		left: 0,
-		backgroundColor: 'rgb(189, 192, 199)',
-		width: width,  
-		height: height / 3, 
+		backgroundColor: '#bdc0c7',
+		width: width,
 		overflow: 'hidden', 
 	},
 	pickerToolbar: {
@@ -89,20 +169,19 @@ let styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'row',
 		justifyContent: 'flex-start',
-		alignItems: 'center',
-		paddingLeft: 20
+		alignItems: 'center'
 	},
 	pickerMoveBtn: {
-		paddingLeft: 20,
 		color: '#149be0',
 		fontSize: 16,
+		marginLeft: 20
 	},
 	pickerFinishBtn: {
 		flex: 1,
 		flexDirection: 'row',
 		justifyContent: 'flex-end',
 		alignItems: 'center',
-		paddingRight: 20,
+		marginRight: 20
 	},
 	pickerFinishBtnText: {
 		fontSize: 16,

package.json

 {
   "name": "react-native-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "react-native-picker",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "email": "wenliang.web@gmail.com"
   },
   "dependencies": {
-    "react-native-picker-android": "^0.2.2"
+    "react-native-picker-android": "~0.2.5"
   },
   "engines": {
     "node": ">=4"