{"id":25023097,"url":"https://github.com/hlerenow/react-native-select-picker","last_synced_at":"2025-04-13T08:08:54.542Z","repository":{"id":57339883,"uuid":"111073859","full_name":"hlerenow/react-native-select-picker","owner":"hlerenow","description":"A SelectPicker,and DatePicker, scroll","archived":false,"fork":false,"pushed_at":"2017-11-17T11:58:51.000Z","size":1278,"stargazers_count":9,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T08:07:49.880Z","etag":null,"topics":["datepicker","picker","react-native","scroll","select"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hlerenow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-17T07:48:13.000Z","updated_at":"2025-03-24T01:40:52.000Z","dependencies_parsed_at":"2022-09-12T12:33:43.394Z","dependency_job_id":null,"html_url":"https://github.com/hlerenow/react-native-select-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2Freact-native-select-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2Freact-native-select-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2Freact-native-select-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlerenow%2Freact-native-select-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hlerenow","download_url":"https://codeload.github.com/hlerenow/react-native-select-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681490,"owners_count":21144700,"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":["datepicker","picker","react-native","scroll","select"],"created_at":"2025-02-05T14:36:13.736Z","updated_at":"2025-04-13T08:08:54.491Z","avatar_url":"https://github.com/hlerenow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![Version](https://img.shields.io/npm/v/react-native-select-picker.svg)](https://www.npmjs.com/package/react-native-select-picker)\n[![npm](https://img.shields.io/npm/dt/react-native-select-picker.svg)](https://www.npmjs.com/package/react-native-select-picker)\n\n# react-native-select-picker\n\n A useful select picker, help you finish you app fast.\n\n### Demo\n![demo](./demo.gif)\n\n### Install\n\n```\nnpm install react-native-select-picker --save\n```\n\n\n### Usage \n\n```\nimport {SelectPicker, DatePicker} from 'react-native-select-picker';\n\nimport React, { Component } from 'react';\nimport {\n  StyleSheet,\n  Text,\n  View,\n  TouchableOpacity\n} from 'react-native';\n\nexport default class App extends Component\u003c{}\u003e {\n\n  constructor (props) {\n    super(props);\n    this.state = {\n      date: {},\n      picker: ''\n    }\n  }\n\n  componentDidMount () {\n    this.DatePicker.show();\n  }\n\n  valChange  = (item, index) =\u003e {\n    console.log('值改变', item, index);\n    this.setState({\n      picker: item\n    })\n  }\n\n  dateValChange = (year,month, day, hour, minute) =\u003e {\n    console.log({year,month, day, hour, minute});\n    var dateObj = {year,month, day, hour, minute};\n    this.setState({\n      date:dateObj\n    });\n  }\n\n  render() {\n    var {date, picker} = this.state;\n    console.log(this.state, 111);\n    var date = JSON.stringify(date);\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText\u003e\n          date: {date}\n        \u003c/Text\u003e\n        \u003cText\u003e\n          picker: {picker}\n        \u003c/Text\u003e\n        \u003cTouchableOpacity style={{backgroundColor: 'orange', padding: 10}} onPress={() =\u003e this.DatePicker.show()}\u003e\n          \u003cText\u003eopen DatePicker\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cSelectPicker \n          onValueChange={this.valChange}\n        /\u003e\n        \u003cDatePicker ref={(ref) =\u003e this.DatePicker = ref}\n          ok= {this.dateValChange}\n        /\u003e\n\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: 'center',\n    color: '#333333',\n    marginBottom: 5,\n  },\n});\n```\n\n#### SelectPicker Config\n\nJust a select picker.\n\n|prop         |type           |defaut                      |description                              |\n|:----------   |:---------------|:-------------               |:-----------------------------------------|\n|wrapHeight   |Number         |300                         | The height of picker container          |\n|wrapWidth    |Number or null |null                        | The width of picker container, if the value is 'null', the wrapWidth is the parent's width, if the parent is root element, the wrapWidth is screen width|\n|itemHeigh    |Number         |100                         | The height of item heiht, which can be selett|\n|fontColor    |String         | '#444’                     | Font color |\n|borderStyle  |Object         | {}                         | Border style |\n|maskercolor  |String         | 'rgba(255, 255, 255, 0.5)' | The mask color of SelectPicker|\n|data         |Array          | [1,2,3,4,5,6,7]            | the picker list items |\n|onValueChange|Function       | function (item, index)     | When select picker value  change, this function will be call|\n\n#### DatePicker Config\n\nA date picker.\n\n|prop         |type           |defaut                      |description                              |\n|:----------   |:---------------|:-------------               |:-----------------------------------------|\n|defaultTime  |Date Object    |new Date()                  |The default DateTime                    |\n|title        |String         |'选择时间'                   |topBar text |\n|titleStyle    |Object         |{}                      | ---|\n|okText       |String         | '确定'                     | the right button text|\n|okTextStyle  |Object         | {}                         | ---- |\n|okBtnBgColor  |String         | 'rgba(255, 255, 255, 0.5)' | ----|\n|cancelText       |String         | '取消'                     | the left button text|\n|cancelTextStyle  |Object         | {}                         | ---- |\n|cancelBtnBgColor  |String         | 'rgba(255, 255, 255, 0.5)' | ----|\n|ok                | Function | function (year, month, day, ,hour, minute) {} | When click ok button, this function will be call.|\n|cancel                | Function | function () {} | When click cancel button, DatePicker will be hidden. and you can do some thing in this function|\n|customTopBar | Component Function | function (ok, cancel) {return null;} |You can custom topBar use this prop, return a React Component, args 'ok'  and 'cancel'  are function ,just like props 'ok' and 'cancel' |\n\n#### DatePicker Methods\n\n##### show()\nyou use this method to open DatePicker.\n\nExample \n```\ncomponentDidMount () {\n   this.DatePicker.show();\n}\n\n\u003cDatePicker ref={(ref) =\u003e this.DatePicker = ref}\n  ok= {this.dateValChange}\n/\u003e\n```\n\n#### Final\n Good Luck!  \n :)\n\n### License \nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlerenow%2Freact-native-select-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhlerenow%2Freact-native-select-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlerenow%2Freact-native-select-picker/lists"}