react-native-dynamic-picker v1.0.6

react-native-dynamic-picker

npmjs.com 里的文档(README.md)可能不是最新的。 请到 github 查阅

click to view English Document

Introduction

基于 react-native 原生组件 Picker 。支持多级联动，如 “省-市-区” 三级联动。 包内置有 DateTimePicker，该组件是 react-native-dynamic-picker 的一个扩展，可用于选择 “年-月-日-时-分-秒”。

注：在该文档下面的内容中，除非特别注明，否则 Picker 都指代 react-native-dynamic-picker

IOS效果图(IOS Demo Screenshot): 点击查看(click)

Android效果图(Android Demo Screenshot): 点击查看(click) 点击查看(click)

Install

lastest version: 1.0.6

npm install --save react-native-dynamic-picker

Example

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Picker, DateTimePicker } from 'react-native-dynamic-picker';

export default class Example extends React.Component {
	componentDidMount(){
		this.refs['Picker'].showPicker(true);
		this.refs['DynamicPicker'].showPicker(true);
		this.refs['DateTimePicker'].showPicker(true);		
	}
    render() {
        return (
            <View style={styles.container}>
                <Picker ref='Picker' data={this.props.list} title='选择' branchTitles={['选项']} />
                <Picker ref='DynamicPicker' isDynamic={true}  data={this.props.areaList} title='选择地区' branchTitles={['省', '市', '区']} />
                <DateTimePicker ref='DateTimePicker' title='选择日期' type={DateTimePicker.type.date} />
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    }
	})

Show And Hide

		this.refs['Picker'].showPicker(true);//Show
		this.refs['Picker'].showPicker(false);//Hide

data说明：

当 isDynamic 为true时

data 为一个 "item List"(即[item,item,item...]) ,该 List  是 Picker 第一列要显示的数据，
		
item的数据结构如下:
        {
            value: string, //值
            lable: string,  //显示的文本
            children: item[]  //子节点
            mustGetNewChildrenEveryTime: boolean  //当设置getChildrenFuns(参阅参数说明表)时，是否要每次都更新子节点，默认值false（注：没有 "动态数据绑定" 的开发需求的朋友，可以不用理会该值）
        }
样例数据：[
	{
		value:'100',
		lable:'山东省',
		children:[
					{
						value:'110',
						lable:'济宁市',
						children:[
									{
										value:'111',
										lable:'市中区',
										children:undefined 
									},
									{
										value:'112',
										lable:'任城区',
										children:undefined 
									}
								]
					},
					{
						value:'120',
						lable:'德州市',
						children:...
					}
				]
	},
	{
		value: '200',
		lable: '山西省',
		children: [
      		...
    		]
  	},
		...
	]

当 isDynamic 为false时

data 为一个二维数组 [[item,item...],[item,item...],[item,item...],...],其中每一个[item,item,...] 生成一列数据。

item数据结构如下：
			{
                value: string, //值
                lable: string,  //显示的文本
			}

样例数据：
		[
			[
			     {
				 	value:'00',
					lable:'00时'
				 },
				 {
				 	value:'01',
					lable:'01时'
				 },
				 {
				 	value:'02',
					lable:'02时'
				 },
				 ...
			],
			[
			     {
				 	value:'00',
					lable:'00分'
				 },
				 {
				 	value:'01',
					lable:'01分'
				 },
				 {
				 	value:'02',
					lable:'02分'
				 },
				 ...
			]
		]

DateTimePicker 使用说明

DateTimePicker 是基于 Picker 扩展并封装好的一个 datetime picker。支持 '年-月-日-时-分-秒' 全部或部分选择。具体效果可自己切换不同的  type  来体验。

type的值为  DateTimePicker.type  中的一个，取值如下
 {
    datetime,
    date,
    year_month,
    month_day_time,
    month_day,
    day_time,
    time
}

Picker Parameters

注： 只有data是必需参数，其它参数都有预设值。但请注意 isDynamic 和 data 的关系

DateTimePicker Parameters

所有 Picker 的 Parameters 在 DateTimePicker 中也是有效的，但如果没有特殊需求，请使用默认的 Picker 参数。

注：DateTimePicker 的所有 Parameters 均有预设值。

Last

第一次发布开源组件，不足的地方很多，我会加紧完善的。 自己做的小东西也不少，也早就想把一些自己觉得还可以的东西分享给大家。但工作一直挺忙，开源组件的质量把控和文档（尤其是英文的文档，想到就头痛）的维护又确实是一件很费神的事，所以就一拖再拖。最近我终于下定决心，不能再自己闭门造车了，要开始为咱们的开源社区添砖加瓦了，所以把这个我之前用typescript写的react-native组件发布出来。我在开发第一个react-native项目时，遇到了“省-市-区”三级联动的问题，在社区里找了一天也没有很合适的组件，于是我决定自己码一个出来。我自己用起来觉得还行，为了发布出来我又做了一些改进。希望大家能喜欢。

有问题请给我留言。

最后的最后：Enjoy It