# react-native-q-picker

> a react native picker for android and ios

Latest version **0.0.5** (published 2018-01-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-q-picker
pnpm add react-native-q-picker
yarn add react-native-q-picker
bun add react-native-q-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-01-23 |
| First published | 2018-01-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vayen |
| Maintainers | vayen |
| Keywords | react, native, pikcer |

## Links

- npm: https://www.npmjs.com/package/react-native-q-picker
- Repository: https://github.com/pentakill666/react-native-q-picker
- Homepage: https://github.com/pentakill666/react-native-q-picker#readme
- Issues: https://github.com/pentakill666/react-native-q-picker/issues
- npm.io page: https://npm.io/package/react-native-q-picker

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2018-01-23
- 0.1.5 — 2018-01-23
- 0.1.4 — 2018-01-23
- 0.1.3 — 2018-01-23
- 0.1.2 — 2018-01-23

## README

# react-native-q-picker
a react native picker for android and ios
由于react-native-picker的Android版使用悬浮窗，造成小米和魅族手机需要手动打开悬浮窗权限，所以决定抛弃react-native-picker，自己写了一个支持Android和ios版的picker，效果图：
<div style="width:100%;overflow:hidden;">
<img src="https://github.com/pentakill666/react-native-q-picker/blob/master/img/3P157.gif" style="width:50%;float:left" alt="ios" />
<img src="https://github.com/pentakill666/react-native-q-picker/blob/master/img/GQZSB.gif" style="width:50%;float:right" alt="android"/>
</div>

</br>
</br>


### Install
由于Android版依赖了react-native-wheel-picker，所以安装的时候对于Android需要进行特殊配置：
```
npm i react-native-wheel-picker --save
```
```
npm i react-native-q-picker --save
```

### 配置Android
 #### Add in settings.gradle
```
include ':react-native-wheel-picker'
project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')
```
#### Add in app/build.gradle
```
compile project(':react-native-wheel-picker')
```
#### Modify MainApplication
```
    import com.zyu.ReactNativeWheelPickerPackage;
    ......

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            ······，
            new ReactNativeWheelPickerPackage()
        );
    }
```
### usage

```
import React, { Component } from 'react';
import {
    Text,
    View,
} from 'react-native';
import Picker from 'react-native-q-picker';

export default class PickerDemo extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            list:[
                {name:'老师',id:0},
                {name:'学生',id:2},
                {name:'工人',id:4},
                {name:'科学家',id:19},
                {name:'画家',id:7},
                {name:'书法家',id:10},
            ],
            professional:'',
            index:'',
        }
    }
    render() {
        return (
            <View style={styles.container}>
                  <View style={styles.wrap}>
                      <View style={styles.header}>
                          <Text style={styles.htxt}>选择索引：{this.state.index}</Text>
                          <Text style={styles.htxt}>选择标签：{this.state.professional}</Text>
                      </View>
                      <Picker PickerData={this.state.list} 
                      defaultValue={2} 
                      label={'职业'} 
                      getTxt={(val,label)=>this.setState({index:val,professional:label})}/>
                  </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: '#f7f7f7',
    },
    wrap:{
        padding:13,
    },
    header:{
        height:40,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    htxt:{
        fontSize:16,
        marginLeft:20
    }
});
```

---
_Source: https://npm.io/package/react-native-q-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._