当前位置：58码农网 > 编程技术 > jquery >
jquery

纯JS实现的一个高效流畅的日期选择器和区域选择

react-native-pickers

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

安装：

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 选中
前往下载

版权声明：

1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。
2、网站不提供资料下载，如需下载请到原作者页面进行下载。
分享到：

相关推荐