react-native-pickers-zn

react-native-pickers

纯JS实现Picker，还是有点难度的，需要涉及到RN的性能优化（联动不能使用setState来更新）、 自定义手势、自定义点击以及动画等。
其他Dialog只是因为Picker是基于项目的BaseDialog扩展来的，就一并整理发布。

🤗 🤗 随手给颗星星呗，有bug或者交流，欢迎留言第一时间维护。🤗 🤗

安装：

yarn add react-native-pickers
yarn add react-native-svg
react-native link react-native-svg

使用：

AreaPicker:

属性	默认值	描述	截图
selectedValue	['香港', '香港', '中西區']	选中
areaJson	null	地址数据源
confirmText	'确定'	确定选择文本
confirmTextSize	14	确定选择文本字体大小
confirmTextColor	'#333333'	确定选择字体颜色
cancelText	'取消'	取消选择文本
cancelTextSize	14	取消选择文本字体大小
cancelTextColor	'#333333'	取消选择文本字体颜色
itemTextColor	0x333333ff	item正常颜色，仅支持16进制数字
itemSelectedColor	0x1097D5ff	item选择颜色，仅支持16进制数字
itemHeight	40	item高度
onPickerCancel	null	取消选择回调
onPickerConfirm	null	确认选择回调

DatePicker:

属性	默认值	描述	截图
itemTextColor	0x333333ff	item正常颜色，仅支持16进制数字
itemSelectedColor	0x1097D5ff	item选择颜色，仅支持16进制数字
onPickerCancel	null	取消选择回调
onPickerConfirm	null	确认选择回调
unit	['年', '月', '日']	单位
selectedValue	[ new Date().getFullYear() + '年', new Date().getMonth() + 1 + '月', new Date().getDate() + '日']	选中
startYear	1990	起始年份
endYear	new Date().getFullYear()	截至年份
cancelText	'取消'	取消选择文本
cancelTextSize	14	取消选择文本字体大小
cancelTextColor	'#333333'	取消选择文本字体颜色
itemTextColor	0x333333ff	item正常颜色，仅支持16进制数字
itemSelectedColor	0x1097D5ff	item选择颜色，仅支持16进制数字
onPickerCancel	null	取消选择回调
onPickerConfirm	null	确认选择回调
confirmText	'确定'	确定选择文本
confirmTextSize	14	确定选择文本字体大小
confirmTextColor	'#333333'	确定选择字体颜色
cancelText	'取消'	取消选择文本
cancelTextSize	14	取消选择文本字体大小
cancelTextColor	'#333333'	取消选择文本字体颜色
itemHeight	40	item高度
HH	true	是否显示小时
mm	true	是否显示分钟
xx	false	是否显示秒

AlertDialog:

属性	默认值	描述	截图
messageText	'Alert Message'	消息文本
messageTextColor	'#444444'	消息文本字体颜色
messageTextSize	14	消息文本字体大小
negativeText	'cancel'	取消文本
negativeColor	'#666666'	取消文本颜色
negativeSize	16	取消文本字体大小
positiveText	'ok'	确定文本
positiveColor	'#1097D5'	确定文本颜色
positiveSize	16	确定文本字体大小
onPress	null	positive(确定)返回true or negative(取消)返回false

SimpleItemsDialog:

属性	默认值	描述	截图
items	['a', 'b', 'c']	列表数据，可以string、object(需要指定itemKey)
itemKey	'key'	当item为object时，来指定显示的属性 items:[{id:0, value: 'v1'},{id:0, value: 'v1'}] itemKey设为'value',则等同于['v1', 'v2']
itemStyle	{ fontSize: 14, fontWeight: '400', color: '#333333' }	列表文字样式
cancel	true	是否在列表最后 增加 ‘取消’ 项
cancelText	'取消'	取消项文本
cancelTextStyle	{ fontSize: 14, fontWeight: '400', color: '#999999' }	取消文本字体样式
onPress	null	返回选中index

SimpleChooseDialog:

属性	默认值	描述	截图
items	['a', 'b', 'c']	列表数据，可以string、object (需要指定itemKey)
itemKey	'key'	当item为object时，来指定显示的属性 items:[{id:0, value: 'v1'},{id:0, value: 'v1'}] itemKey设为'value',则等同于 ['v1', 'v2']
itemStyle	{ fontSize: 14, fontWeight: '400', color: '#333333' }	列表文字样式
selectColor	'#1097D5'	选中颜色
normalColor	'#666666'	未选中颜色
pointSize	18	左侧选中标识大小
pointBorderRadius	9	左侧选中标识边框弧度
confirmText	'确定'	确定选择文本
confirmBtnColor	'#1097D5'	确定选择按钮颜色
confirmTextColor	'#ffffff'	确定选择文本颜色
onPress	null	返回选中index

InputDialog:

属性	默认值	描述	截图
title	'我要举报'	标题文本
titleSize	16	标题文本字体大小
titleColor	'#333333'	标题文本文本颜色
cancelText	'返回'	取消文本
cancelSize	14	取消文本字体大小
cancelColor	'#333333'	取消文本字体颜色
btnText	'提交'	提交文本
btnTextSize	12	提交文本字体大小
btnTextColor	'#ffffff'	提交文本字体颜色
btnBgColor	'#1097D5'	提交按钮颜色
placeholder	'请尽量说明问题，我们将尽快处理...'	输入框提示语
onSubmit	null	返回输入的文本内容
InputDialog.show(text)，显示dialog，text：用于编辑时，设置前值

DownloadDialog:

属性	默认值	描述	截图
title	'视频下载'	标题文本
titleSize	16	标题文本字体大小
titleColor	'#333333'	标题文本文本颜色
active	false	按钮是否可点击
actionText	'打开'	按钮文本
onAction	null	点击按钮回调
totalTextColor	'#666666'	总数文本字体颜色
totalTextSize	12	总数文本字体大小
DownloadDialog.setProcess(0, '4.24MB')，设置当前进度，及下载文件总数

ToastComponent:

属性	默认值	描述	截图
duration	1500	显示时长（自动隐藏）
fontSize	14	message字体大小
textColor	'#ffffff'	message字体颜色
lineHeight	20	message字体行高
paddingH	10	水平padding
paddingV	5	上下padding
borderRadius	5	背景圆角
backgroundColor	0x00000099	背景颜色
ToastComponent.show('message')，显示‘message’toast。应放在navigation同层，全局唯一

BaseDialog:

属性	默认值	描述
removeSubviews	true	dismiss，是否回收前景控件，拓展出来的子控件，不要动态设置改属性
coverClickable	ture	背景点击隐藏
onCoverPress	null	点击背景，dismiss回调
showAnimationType	null	入场动画方式 spring timing

PickerView:

属性	默认值	描述
itemTextColor	0x333333ff	item正常颜色，仅支持16进制数字
itemSelectedColor	0x1097D5ff	item选择颜色，仅支持16进制数字
itemHeight	40	item高度
onPickerSelected	null	选中时回调
selectedIndex	0	选中

V2.0.3-zn 修复点击事件，触摸滚动区域