Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lesliesam/react-native-wheel-picker


https://github.com/lesliesam/react-native-wheel-picker

Last synced: 5 days ago
JSON representation

Awesome Lists containing this project

README 

        
# 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 [email protected]

```

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,

	},

});

```