diff --git a/README.md b/README.md
index 0ee0bac03e4ca17f269609b1c0e66b21b471cec8..31a593c689db94f710a6c7e6c60a7b088e6606be 100644
--- a/README.md
+++ b/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
+- pickerHeight number
+- showDuration number
+- pickerData array
+- selectedValue any
+- onPickerDone 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'
+
+ {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
diff --git a/index.js b/index.js
index d79997ba7ab64600f5ee74e9611c919bf842d803..66300663d41bb0bf44ed02fe64ca1f5e7ea0800f 100644
--- a/index.js
+++ b/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(){
-
-
-
- 上一个
- 下一个
-
-
- {
- this.setState({course: this.state.courseData[this.index || 0]})
- this._pickerToggle();
- }}>完成
-
+ let pickerBtn = Platform.OS === 'ios' ? null : (
+
+ 上一个
+ 下一个
- { this.picker = picker }}
- selectedValue={this.props.selectedValue}
- onValueChange={(index) => this.index = index} >
- {this.props.pickerData.map((value, index) => (
- )
- )}
-
-
- };
+ );
+ return (
+
+
+ {pickerBtn}
+
+ 完成
+
+
+ this.pickerWheel = pickerWheel }
+ selectedValue={this.state.selectedValue}
+ onValueChange={value => {
+ this.pickedValue = value;
+ this.setState({
+ selectedValue: value
+ });
+ }} >
+ {this.props.pickerData.map((value, index) => (
+ )
+ )}
+
+
+ );
+ }
};
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,
diff --git a/package.json b/package.json
index 225a63614754e3ec091dc7975d191676601e9f24..8e3a9fc426848943f46740241c00dc92c5008d5a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"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"