{"id":4236,"url":"https://github.com/shexiaoheng/react-native-wheel","last_synced_at":"2025-08-04T00:32:41.400Z","repository":{"id":57193858,"uuid":"46962210","full_name":"shexiaoheng/react-native-wheel","owner":"shexiaoheng","description":"DEPRECATED","archived":false,"fork":false,"pushed_at":"2018-02-26T08:28:10.000Z","size":269,"stargazers_count":40,"open_issues_count":0,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-11T20:15:59.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shexiaoheng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-27T05:51:54.000Z","updated_at":"2024-11-02T04:49:25.000Z","dependencies_parsed_at":"2022-09-15T22:31:44.866Z","dependency_job_id":null,"html_url":"https://github.com/shexiaoheng/react-native-wheel","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shexiaoheng%2Freact-native-wheel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shexiaoheng%2Freact-native-wheel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shexiaoheng%2Freact-native-wheel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shexiaoheng%2Freact-native-wheel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shexiaoheng","download_url":"https://codeload.github.com/shexiaoheng/react-native-wheel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:05.408Z","updated_at":"2024-12-07T07:31:33.685Z","avatar_url":"https://github.com/shexiaoheng.png","language":"Java","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# PLEASE NOTE, THIS PROJECT IS NO LONGER BEING MAINTAINED\r\n\r\n* * *\r\n\r\n# 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) \u003ca href=\"https://david-dm.org/shexiaoheng/react-native-wheel\"\u003e\u003cimg src=\"https://david-dm.org/shexiaoheng/react-native-wheel.svg\" alt=\"Dependency Status\"\u003e\u003c/a\u003e\r\nRN的Android滚轮组件\r\n\r\n### [Combination use](https://github.com/beefe/react-native-picker)\r\n\r\n## PropTypes\r\n* values            数据源（支持 String int double boolean）\r\n* isLoop            是否循环滚动\r\n* textSize          字体大小\r\n* selectedIndex     默认选中的下标\r\n* velocityFling     滚动速度，建议 15-25\r\n* onItemChange      滚动回调\r\n\r\n## Install And Use\r\n\r\n#### Npm Install\r\n\r\n```shell\r\n$ npm install --save react-native-wheel\r\n```\r\n\r\n#### Update Gradle Settings\r\n```gradle\r\n// file: android/settings.gradle\r\n...\r\ninclude ':react-native-wheel'\r\nproject(':react-native-wheel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel/android')\r\n```\r\n\r\n#### Update app Gradle Build\r\n\r\n```gradle\r\n// file: android/app/build.gradle\r\n...\r\n\r\ndependencies {\r\n  ...\r\n  compile project(':react-native-wheel')\r\n}\r\n```\r\n\r\n#### Register React Package\r\n\r\n```java\r\n// file: android/src/main/java/com.xx/MainApplication.java\r\n...\r\n\r\nprivate final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\r\n    @Override\r\n        protected boolean getUseDeveloperSupport() {\r\n            return BuildConfig.DEBUG;\r\n        }\r\n\r\n        @Override\r\n        protected List\u003cReactPackage\u003e getPackages() {\r\n            return Arrays.\u003cReactPackage\u003easList(\r\n                new MainReactPackage(),\r\n                new WheelPackage()          // Added there\r\n            );\r\n        }\r\n    };\r\n\r\n```\r\n\r\n#### Use\r\n\r\n```js\r\n\r\nimport React, { Component } from 'react';\r\nimport {\r\n  AppRegistry,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ToastAndroid\r\n} from 'react-native';\r\n\r\nimport WheelView from 'react-native-wheel';\r\n\r\nimport Dimensions from 'Dimensions';\r\n\r\nlet SCREEN_WIDTH = Dimensions.get('window').width;\r\nlet SCREEN_HEIGHT = Dimensions.get('window').height;\r\n\r\n\r\nlet wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];\r\n\r\nlet currentIndex;\r\n\r\nclass AwesomeProject extends Component {\r\n  ok(){\r\n    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);\r\n  }\r\n  _onItemChange(index){\r\n    currentIndex = index;\r\n  }\r\n  render() {\r\n    return (\r\n      \u003cView style={styles.container}\u003e\r\n        \u003cText style={styles.ok} onPress={this.ok.bind(this)} \u003e\r\n          确定\r\n        \u003c/Text\u003e\r\n        \u003cWheelView\r\n          style={styles.wheelview}\r\n          onItemChange={this._onItemChange.bind(this)}\r\n          values={wheelData}\r\n          isLoop={false}\r\n          selectedIndex={0}\r\n          textSize={20}\r\n          velocityFling={20}\r\n        /\u003e\r\n      \u003c/View\u003e\r\n    );\r\n  }\r\n};\r\n\r\nvar styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'flex-end',\r\n    alignItems: 'center',\r\n    backgroundColor: '#F5FCFF',\r\n  },\r\n  ok: {\r\n    margin: 5,\r\n    color: '#000000',\r\n    fontSize: 18,\r\n  },\r\n  wheelview: {\r\n    width: SCREEN_WIDTH,\r\n    height: SCREEN_HEIGHT/5*2,\r\n  },\r\n});\r\n\r\nAppRegistry.registerComponent('AwesomeProject', () =\u003e AwesomeProject);\r\n\r\n```\r\n\r\n## Run Renderings\r\n![1](/img/1.jpg)\r\n![2](/img/2.jpg)\r\n![3](/img/3.jpg)\r\n\r\n## Reference\r\nhttps://github.com/weidongjian/androidWheelView\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshexiaoheng%2Freact-native-wheel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshexiaoheng%2Freact-native-wheel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshexiaoheng%2Freact-native-wheel/lists"}