react-native-select-picker-spain

fix 显示组件时根据默认时间重新赋值

[](https://www.npmjs.com/ package/react-native-select-picker)

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