react-native-wheel-picker

npm i react-native-wheel-picker --save

npm install --save --save-exact react-native-wheel-picker@1.0.1

include ':react-native-wheel-picker'
project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')

compile project(':react-native-wheel-picker')

    import com.zyu.ReactNativeWheelPickerPackage;
    ......
    
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(), new ReactNativeWheelPickerPackage()
        );
    }

import React from 'react'

import {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Picker from 'react-native-wheel-picker'
var PickerItem = Picker.Item;



var AwesomeProject = React.createClass({
  
  getInitialState: function() {
    return {
      selectedItem : 2,
      itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']
    }
  },

  onPikcerSelect: function(index) {
    this.setState({
      selectedItem: index,
    })
  },

  onAddItem: function() {
    var name = '司马懿'
    if (this.state.itemList.indexOf(name) == -1) {
      this.state.itemList.push(name)
    }
    this.setState({
      selectedItem: this.state.itemList.indexOf(name),
    })
  },

  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Picker style={{width: 150, height: 180}}
          selectedValue={this.state.selectedItem}
          itemStyle={{color:"white", fontSize:26}}
          onValueChange={(index) => this.onPikcerSelect(index)}>
            {this.state.itemList.map((value, i) => (
              <PickerItem label={value} value={i} key={"money"+value}/>
            ))}
        </Picker>
        <Text style={{margin: 20, color: '#ffffff'}}>
          你最喜欢的是：{this.state.itemList[this.state.selectedItem]}
        </Text>

        <Text style={{margin: 20, color: '#ffffff'}}
            onPress={this.onAddItem}>
          怎么没有司马懿？
        </Text>
      </View>
    );
  }
});

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,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);