Ecosyste.ms: Awesome

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

https://github.com/shexiaoheng/react-native-wheel

DEPRECATED
https://github.com/shexiaoheng/react-native-wheel

Last synced: 2 months ago
JSON representation

DEPRECATED

Host: GitHub
URL: https://github.com/shexiaoheng/react-native-wheel
Owner: shexiaoheng
Created: 2015-11-27T05:51:54.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2018-02-26T08:28:10.000Z (over 6 years ago)
Last Synced: 2024-04-09T09:26:03.450Z (3 months ago)
Language: Java
Homepage:
Size: 263 KB
Stars: 41
Watchers: 3
Forks: 16
Open Issues: 0
Metadata Files:
- Readme: README.md

Lists

awesome-react-native - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome-reactnative-ui - react-native-wheel - native-wheel/master//img/1.jpg)| (Others)
awesome-react-native - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome-react-native-master - react-native-wheel ★8 - android wheel view for react-native (Components / UI)
awesome-react-native - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome-react-native - react-native-wheel ★25 - android wheel view for react-native (Components / UI)
awesome-reactnative-ui - react-native-wheel - native-wheel/master//img/1.jpg)| (Others)
awesome-react-native - react-native-wheel ★25 - android wheel view for react-native (Components / UI)
awesome-react-native - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome-react-native-ui - react-native-wheel ★20 - android wheel view for react-native (Components / UI)
awesome-react-native - react-native-wheel ★38 - android wheel view for react-native (Components / UI)
awesome-react-native - react-native-wheel ★12 - android wheel view for react-native (Components / UI)

README

        # PLEASE NOTE, THIS PROJECT IS NO LONGER BEING MAINTAINED

* * *

# react-native-wheel [![npm version](https://img.shields.io/npm/v/react-native-wheel.svg?style=flat-square)](https://www.npmjs.com/package/react-native-wheel) 

RN的Android滚轮组件

### [Combination use](https://github.com/beefe/react-native-picker)

## PropTypes

* values            数据源（支持 String int double boolean）

* isLoop            是否循环滚动

* textSize          字体大小

* selectedIndex     默认选中的下标

* velocityFling     滚动速度，建议 15-25

* onItemChange      滚动回调

## Install And Use

#### Npm Install

```shell

$ npm install --save react-native-wheel

```

#### Update Gradle Settings

```gradle

// file: android/settings.gradle

...

include ':react-native-wheel'

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

```

#### Update app Gradle Build

```gradle

// file: android/app/build.gradle

...

dependencies {

  ...

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

}

```

#### Register React Package

```java

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

...

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override

        protected boolean getUseDeveloperSupport() {

            return BuildConfig.DEBUG;

        }

        @Override

        protected List getPackages() {

            return Arrays.asList(

                new MainReactPackage(),

                new WheelPackage()          // Added there

            );

        }

    };

```

#### Use

```js

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  ToastAndroid

} from 'react-native';

import WheelView from 'react-native-wheel';

import Dimensions from 'Dimensions';

let SCREEN_WIDTH = Dimensions.get('window').width;

let SCREEN_HEIGHT = Dimensions.get('window').height;

let wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];

let currentIndex;

class AwesomeProject extends Component {

  ok(){

    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);

  }

  _onItemChange(index){

    currentIndex = index;

  }

  render() {

    return (

      

        

          确定

        

        

      

    );

  }

};

var styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'flex-end',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  ok: {

    margin: 5,

    color: '#000000',

    fontSize: 18,

  },

  wheelview: {

    width: SCREEN_WIDTH,

    height: SCREEN_HEIGHT/5*2,

  },

});

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

```

## Run Renderings

![1](/img/1.jpg)

![2](/img/2.jpg)

![3](/img/3.jpg)

## Reference

https://github.com/weidongjian/androidWheelView