diff --git a/README.md b/README.md index 7ab9eff..6af3a8f 100644 --- a/README.md +++ b/README.md @@ -1,137 +1,6 @@ # react-native-wheel-picker -[![npm version](http://img.shields.io/npm/v/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm") -[![npm version](http://img.shields.io/npm/dm/react-native-wheel-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-wheel-picker "View this project on npm") ## Introduction Cross platform Picker component based on React-native. -Since picker is originally supported by ios while Android only supports a ugly Spinner component. If you want to have the same user behaviour, you can use this. - -The android component is based on https://github.com/AigeStudio/WheelPicker which runs super fast and smoothly. It also supports curved effect which make it exactly the same looking and feel as the ios picker. -![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo.gif) -![](https://raw.githubusercontent.com/lesliesam/react-native-wheel-picker/master/demo_android.gif) - -## How to use - -Run command - -For apps using RN 0.40 or higher, please run -``` -npm i react-native-wheel-picker --save -``` -For apps using RN 0.39 or less, please run -``` -npm install --save --save-exact react-native-wheel-picker@1.1.2 -``` -Add in settings.gradle -``` -include ':react-native-wheel-picker' -project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android') -``` -Add in app/build.gradle -``` -compile project(':react-native-wheel-picker') -``` -Modify MainApplication -``` - import com.zyu.ReactNativeWheelPickerPackage; - ...... - - protected List getPackages() { - return Arrays.asList( - new MainReactPackage(), new ReactNativeWheelPickerPackage() - ); - } -``` - -## Example code -``` -import React, { Component } from 'react'; -import { - Platform, - StyleSheet, - Text, - View, -} from 'react-native'; - - -import Picker from 'react-native-wheel-picker' -var PickerItem = Picker.Item; - -export default class App extends Component<{}> { - - constructor(props) { - super(props); - this.state = { - selectedItem : 2, - itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮'] - }; - } - - onPickerSelect (index) { - this.setState({ - selectedItem: index, - }) - } - - onAddItem = () => { - var name = '司马懿' - if (this.state.itemList.indexOf(name) == -1) { - this.state.itemList.push(name) - } - this.setState({ - selectedItem: this.state.itemList.indexOf(name), - }) - } - - render () { - return ( - - - Welcome to React Native! - - - this.onPickerSelect(index)}> - {this.state.itemList.map((value, i) => ( - - ))} - - - 你最喜欢的是：{this.state.itemList[this.state.selectedItem]} - - - - 怎么没有司马懿？ - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#1962dd', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - color: '#ffffff', - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); -``` +Forked from https://github.com/m3rlin94/react-native-wheel-picker diff --git a/WheelCurvedPicker.android.js b/WheelCurvedPicker.android.js index b1d9911..f69bbac 100644 --- a/WheelCurvedPicker.android.js +++ b/WheelCurvedPicker.android.js @@ -1,10 +1,8 @@ 'use strict'; import React from 'react'; -import PropTypes from 'prop-types' import { View, - ColorPropType, requireNativeComponent, } from 'react-native'; @@ -12,52 +10,11 @@ const defaultItemStyle = { color: 'white', fontSize: 26 }; const WheelCurvedPickerNativeInterface = { name: 'WheelCurvedPicker', - propTypes: { - ...View.propTypes, - data:PropTypes.array, - textColor: ColorPropType, - textSize: PropTypes.number, - itemStyle: PropTypes.object, - itemSpace: PropTypes.number, - lineColor: PropTypes.string, - lineGradientColorFrom: PropTypes.string, - lineGradientColorTo: PropTypes.string, - onValueChange: PropTypes.func, - selectedValue: PropTypes.any, - selectedIndex: PropTypes.number, - } } const WheelCurvedPickerNative = requireNativeComponent('WheelCurvedPicker', WheelCurvedPickerNativeInterface); class WheelCurvedPicker extends React.Component { - - propTypes: { - ...View.propTypes, - - data: PropTypes.array, - - textColor: ColorPropType, - - textSize: PropTypes.number, - - itemStyle: PropTypes.object, - - itemSpace: PropTypes.number, - - onValueChange: PropTypes.func, - - selectedValue: PropTypes.any, - - selectedIndex: PropTypes.number, - - lineColor: PropTypes.string, - - lineGradientColorFrom: PropTypes.string, - - lineGradientColorTo: PropTypes.string, - } - constructor(props){ super(props) this.state = this._stateFromProps(props) @@ -106,11 +63,6 @@ class WheelCurvedPicker extends React.Component { } class Item extends React.Component { - propTypes: { - value: React.PropTypes.any, // string or integer basically - label: React.PropTypes.string, - } - render () { // These items don't get rendered directly. return null; diff --git a/android/build.gradle b/android/build.gradle index f0a74ba..c6d5e8a 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -1,11 +1,16 @@ apply plugin: 'com.android.library' +def safeExtGet(prop, fallback) { + rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback +} + + android { - compileSdkVersion 23 - buildToolsVersion "23.0.1" + compileSdkVersion safeExtGet('compileSdkVersion', 26) + buildToolsVersion safeExtGet('buildToolsVersion', '26.0.3') defaultConfig { - minSdkVersion 16 - targetSdkVersion 22 + minSdkVersion safeExtGet('minSdkVersion', 16) + targetSdkVersion safeExtGet('targetSdkVersion', 26) versionCode 1 versionName "1.0" ndk { @@ -15,7 +20,7 @@ android { } dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) - compile "cn.aigestudio.wheelpicker:WheelPicker:1.0.3" - compile 'com.facebook.react:react-native:+' + implementation fileTree(dir: 'libs', include: ['*.jar']) + implementation "cn.aigestudio.wheelpicker:WheelPicker:1.0.3" + implementation 'com.facebook.react:react-native:+' } diff --git a/package.json b/package.json index 6f285dc..1e231c2 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,25 @@ { - "name": "react-native-wheel-picker", - "version": "1.2.0", - "description": "React native cross platform picker.", + "name": "react-native-wheel-picker-cross-platform", + "version": "1.0.2", + "description": "React native cross platform picker. Forked https://github.com/lesliesam/react-native-wheel-picker.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "repository": { - "type": "git", - "url": "git+https://github.com/lesliesam/react-native-wheel-picker.git" - }, "keywords": [ "react-native", "picker", - "wheel" + "wheel" ], "author": "Yu Zheng", "license": "ISC", - "bugs": { - "url": "https://github.com/lesliesam/react-native-wheel-picker/issues" + "homepage": "https://github.com/WesleyFaveri/react-native-wheel-picker/blob/master/README.md", + "dependencies": {}, + "repository": { + "type": "git", + "url": "git+https://github.com/WesleyFaveri/react-native-wheel-picker.git" }, - "homepage": "https://github.com/lesliesam/react-native-wheel-picker#readme", - "dependencies": {} + "bugs": { + "url": "https://github.com/WesleyFaveri/react-native-wheel-picker/issues" + } }