native-cmos-picker

react-native 项目中的选择器，iOS和安卓平台保持相同样式；支持用户自己传入数据，也可选择已有时间/日期数据进行展示。

安装

npm install --save-dev native-cmos-picker

link

react-native link

项目中引入

import CMOSPicker from 'native-cmos-picker';

使用

注意：==使用之前，如果是选择日期或时间（即用户不传入自定义数据），为了确保选择完成之后返回所需格式的时间/日期数据，请先创建一个对象用于定义格式。==其中的'date'、'dateTime'、'time'等是固定的，用户修改后面的'YYYY-MM-DD'等格式即可。

const FORMATS = {
  'date': 'YYYY-MM-DD',
  'simpleDate': 'YYYY-MM',
  'dateTime': 'YYYY-MM-DD HH:mm',
  'exactDateTime': 'YYYY-MM-DD HH:mm:ss',
  'time': 'HH:mm',
  'exactTime': 'HH:mm:ss'
};

引入组件之后，在render方法中引入标签，并传入相应配置：

render() {
    return (
      <CMOSDatePicker
            ref='CMOSDatePicker'
            mode='date'
			defaultValue={['2016','6','6']}
            cancelBtnText='cancel'
            confirmBtnText='commit'
            cancelBtnColor='#424242'
            confrimBtnColor='#009EFF'
            format={FORMATS}
            onDataConfirm={(dateStr,date) => this.dateChange(dateStr,date)}
            >
      </CMOSDatePicker>
    );
  }

CMOSPicker 标签中各配置参数介绍：

注意：以下参数为用户传入mode时的配置项，即选择时间/日期，不传入自定义数据

参数 | 类型 | 是否必填 | 说明 | 默认值 :---:|:---:|:---:|:---:|:---: ref | string | Y |组件的ref值，要通过该值获取到选择器组件，调用其show()方法 | / mode | string | Y |显示的日期格式，可选'date','datetime','time'等六种 | / defaultValue | array | N |选择器打开时的默认值，数组中的元素均为string类型 | 当前时间对应的数组 minDate | Date或Number | N |选择器显示的可供选择的最小时间 | 当前时间之前20年 maxDate | Date或Number | N |选择器显示的可供选择的最大时间 | 当前时间之后20年 confirmBtnText | string | N |选择器右上角按钮显示文字 | 确认' cancelBtnText | string | N |选择器左上角按钮显示文字 | '取消' titleText | string | N |选择器中上部显示的文字 | 见下方说明 confrimBtnColor | array | N |选择器右上角按钮文字颜色 | [25,172,255,1] cancelBtnColor | array | N |选择器左上角按钮文字颜色 | [153,153,153,1] titleColor | array | N |选择器中上部文字颜色| [20,20,20,1] toolBarBg | array | N |选择器上部工具栏背景颜色| [232,232,232,1] pickerBg | array | N |选择器背景颜色| [232,232,232,1] fontColor | array | N |选择器内文字颜色| [31,31,31,1] topLineColor | string | N |选择器顶部分割线颜色| '#ffffff' toolBarFontSize | number | N |选择器工具栏文字字体大小| 16 fontSize | number | N |选择器内文字字体大小| 16 format | object | N |时间/日期样式，传入开头定义的样式对象即可，用户确认选择后将按此样式进行返回，返回类型为字符串| 上文中FORMATS对象中的格式 onDateChange | function | Y |用户确认选择后的回调方法，==参数有两个：1.选择后对应格式的字符串；2.所选时间对应的时间戳（Date类型）==| /

注意：以下参数为用户传入自定义数据时的配置项。==若用户传入自定义数据，则就无须再配置mode或format，否则传入的自定义数据是无效的。==

参数 | 类型 | 是否必填 | 说明 | 默认值 :---:|:---:|:---:|:---:|:---: data | array或json对象 | Y |选择器数据，支持数据联动 | / onDateChange | function | Y |用户确认选择后的回调方法，==参数为包含选择数据的数组==| /

补充说明：

1. defaultValue数组中，元素个数不得多于mode类型对应的元素个数，如：若mode为date，则该数组中最多有三个元素；若mode为time，则数组中最多有两个元素。如果是自定义数据，则默认值必须在自定义数据中存在。
2. ==ref必填的原因是，CMOSPicker组件暴露给用户了一个show()方法，==用于在需要展示选择器的地方调用。用户只有设置ref才能获取到相关组件。具体使用见使用示例。
3. titleText针对不同mode有不同的默认值：mode为date时，titleText为'年/月/日'；mode为dateTime时，titleText为'年/月/日/时/分'，其他的以此类推。
4. 注意：minDate/maxDate为Date类型，与默认值传入类型（数组）不同
5. 注意：==配置项中所有关于颜色的配置，传入的都是数组类型（rgba）==，如[25,172,255,1]
6. 用户自定义数据时，若只有单个滚轮，则直接传入数组即可，若数据量大且有联动，最好单独写到json文件中再引入。具体参看下文示例。

使用示例

testData.json // 两个滚轮，且联动

[
      {
          "a": [1, 2, 3, 4]
      },
      {
          "b": [5, 6, 7, 8]
      }
]

testDataThree.json // 三个滚轮，且联动

[
        {
            "a": [
                {
                    "a1": [1, 2, 3, 4]
                },
                {
                    "a2": [5, 6, 7, 8]
                },
                {
                    "a3": [9, 10, 11, 12]
                }
            ]
        },
        {
            "b": [
                {
                    "b1": [11, 22, 33, 44]
                },
                {
                    "b2": [55, 66, 77, 88]
                },
                {
                    "b3": [99, 1010, 1111, 1212]
                }
            ]
        },
        {
            "c": [
                {
                    "c1": ["a", "b", "c"]
                },
                {
                    "c2": ["a2", "b2", "c2"]
                },
                {
                    "c3": ["a3", "b3", "c3"]
                }
            ]
        }
]

index.js

/**
 * Created by wangchengzhi on 2017/3/15
 * native
 */

import React, { Component } from 'react';
import Moment from 'moment';
import CMOSPicker from 'native-cmos-picker';
import testData from './testData.json';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
} from 'react-native';

const FORMATS = {
  'date': 'YYYY-MM-DD',
  'simpleDate': 'YYYY-MM',
  'dateTime': 'YYYY-MM-DD HH:mm',
  'exactDateTime': 'YYYY-MM-DD HH:mm:ss',
  'time': 'HH:mm',
  'exactTime': 'HH:mm:ss'
};

export default class DatePickerTest extends Component {

  constructor(props){
    super(props);
    this.state = {
      text: '123',
      date: new Date(),
    }
  }

  render() {
    return (
      <View style={styles.container}>

         <Button
            style={{marginTop:20,}}
            onPress={() => this.onPressShowPicker()}
            title="DataPicker"
            color="#841584"
          />

          <TextInput
            style={{height: 40, borderColor: 'gray', borderWidth: 1,width:200}}
            placeholder= {this.state.text}
          />

          <CMOSPicker
            ref='CMOSPicker'
            titleText='请选择'
            format={FORMATS}
            mode='dateTime'
            onDataConfirm={(dateStr,date) => this.dateChange(dateStr,date)}
            minDate={this.state.date.getFullYear()-1}
            maxDate={this.state.date.getFullYear()+1}
            // defaultValue={['2016']}
          >
          </CMOSPicker>

          <CMOSPicker
            ref='CMOSPicker_NO2'
            data={testData}
            onDataConfirm={(date) => this.customDataChange(date)}
            defaultValue={['a',2]}
          >
          </CMOSPicker>
      </View>
    );
  }

  // 选择日期/时间
  dateChange(dateStr,date){
    this.setState({
      text: dateStr,
      // text: JSON.stringify(date),
    });
    console.log(date);
  }

  // 选择自定义数据
  customDataChange(dateArray){
    this.setState({
      text: JSON.stringify(dateArray[0]) + ' ' +  JSON.stringify(dateArray[1]),
    });
  }

  onPressShowPicker(){
    this.refs.CMOSPicker.show();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
    backgroundColor: '#F5FCFF',
    padding: 50,
  },
});

AppRegistry.registerComponent('DatePickerTest', () => DatePickerTest);