Npm Install

$ npm install --save react-native-cq-wheel-picker

Automatically Link

$ react-native link react-native-cq-wheel-picker

Manual Link

Update Gradle Settings

// file: android/settings.gradle
...
include ':react-native-cq-wheel-picker'
project(':react-native-cq-wheel-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cq-wheel-picker/android')

Update app Gradle Build

// file: android/app/build.gradle
...

dependencies {
...
compile project(':react-native-cq-wheel-picker')
}

Register React Package

// file: android/src/main/java/com.xx/MainApplication.java
...

// import this module
import com.example.cukiy.cqwheelview.CQWheelViewPackage;

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CQWheelViewPackage()          // Added there
);
}
};

Use

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

import CQPicker from 'react-native-cq-wheel-picker'

export default class App extends Component<Props> {
render() {
    return (
        <View style={styles.container}>
            <CQPicker style={{height:190,width:100}}
                data={['a','b','c','d','e','f','g','h']}/>
        </View>
        );
    }
}

PropTypes

onValueChange:PropTypes.func, // 选中item之后调用的方法,返回选中的item和索引
data:PropTypes.array, // 列表数据(必须是字符串数组)
textSize:PropTypes.number, // 一般字体大小
textColor:PropTypes.string, // 一般字体颜色
selectedTextSize:PropTypes.number, // 选中字体大小
selectedTextColor:PropTypes.string, // 选中字体颜色
itemHeightSpace:PropTypes.number, // item之间的距离
textGradient:PropTypes.bool, // 是否让字体颜色向两边逐渐变淡
showCurtain:PropTypes.bool, // 是否在选中item上面显示遮盖层
curtainColor:PropTypes.string, // 遮盖层的颜色
showCurtainBorder:PropTypes.bool, // 是否显示遮盖层边框
curtainBorderColor:PropTypes.string, // 遮盖层边框的颜色
indicatorText:PropTypes.string, // 指示器文本
indicatorTextSize:PropTypes.number, // 指示器字体大小
indicatorTextColor:PropTypes.string // 指示器文本颜色