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"