react-native-select-picker

A useful select picker, help you finish you app fast.

Demo

Install

npm install react-native-select-picker --save

Usage

import {SelectPicker, DatePicker} from 'react-native-select-picker';

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

export default class App extends Component<{}> {

  constructor (props) {
    super(props);
    this.state = {
      date: {},
      picker: ''
    }
  }

  componentDidMount () {
    this.DatePicker.show();
  }

  valChange  = (item, index) => {
    console.log('值改变', item, index);
    this.setState({
      picker: item
    })
  }

  dateValChange = (year,month, day, hour, minute) => {
    console.log({year,month, day, hour, minute});
    var dateObj = {year,month, day, hour, minute};
    this.setState({
      date:dateObj
    });
  }

  render() {
    var {date, picker} = this.state;
    console.log(this.state, 111);
    var date = JSON.stringify(date);

    return (
      <View style={styles.container}>
        <Text>
          date: {date}
        </Text>
        <Text>
          picker: {picker}
        </Text>
        <TouchableOpacity style={{backgroundColor: 'orange', padding: 10}} onPress={() => this.DatePicker.show()}>
          <Text>open DatePicker</Text>
        </TouchableOpacity>
        <SelectPicker 
          onValueChange={this.valChange}
        />
        <DatePicker ref={(ref) => this.DatePicker = ref}
          ok= {this.dateValChange}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

SelectPicker Config

Just a select picker.

|prop |type |defaut |description | |:---------- |:---------------|:------------- |:-----------------------------------------| |wrapHeight |Number |300 | The height of picker container | |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| |itemHeigh |Number |100 | The height of item heiht, which can be selett| |fontColor |String | '#444’ | Font color | |borderStyle |Object | {} | Border style | |maskercolor |String | 'rgba(255, 255, 255, 0.5)' | The mask color of SelectPicker| |data |Array | [1,2,3,4,5,6,7] | the picker list items | |onValueChange|Function | function (item, index) | When select picker value change, this function will be call|

DatePicker Config

A date picker.

|prop |type |defaut |description | |:---------- |:---------------|:------------- |:-----------------------------------------| |defaultTime |Date Object |new Date() |The default DateTime | |title |String |'选择时间' |topBar text | |titleStyle |Object |{} | ---| |okText |String | '确定' | the right button text| |okTextStyle |Object | {} | ---- | |okBtnBgColor |String | 'rgba(255, 255, 255, 0.5)' | ----| |cancelText |String | '取消' | the left button text| |cancelTextStyle |Object | {} | ---- | |cancelBtnBgColor |String | 'rgba(255, 255, 255, 0.5)' | ----| |ok | Function | function (year, month, day, ,hour, minute) {} | When click ok button, this function will be call.| |cancel | Function | function () {} | When click cancel button, DatePicker will be hidden. and you can do some thing in this function| |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' |

DatePicker Methods

show()

you use this method to open DatePicker.

Example

componentDidMount () {
   this.DatePicker.show();
}

<DatePicker ref={(ref) => this.DatePicker = ref}
  ok= {this.dateValChange}
/>

Final

Good Luck!
:)

License

MIT