react-native的UI组件库

1. QMBadge - 徽标
2. QMButton - 按钮
3. QMCheckBox - 复选框
4. QMRadio - 单选
5. QMList - 列表
6. QMSwitch - 滑动开关
7. QMInputItem - 文本输入
8. QMSwipeAction - 滑动操作(左滑删除)
9. QMTabs - 标签页
10. QMTag - 标签
11. QMToast - 轻提示
12. QMDropDown - 下拉菜单
13. QMPicker - 选择框
14. QMIcon - 自定义字体图标库
15. QMText - 文本
16. QMTextInput - 输入框
17. QMLoading - 加载中
18. QMTextArea - 多行文本输入
19. QMActionSheet - 动作面板
20. QMDatePicker - 日期控件

QMBadge - 徽标

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。 可参照mobile.ant.design

规则

• 当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。
• 当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ size | 大小，可选 large small | string | small text | 展示的数字或文案，当为数字时候，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏 | string|number | - corner | 置于角落 | boolean | false dot | 不展示数字，只有一个小红点 | boolean | false overflowCount | 展示封顶的数字值 | number | 99

QMButton - 按钮

点击后会触发一个操作。 可参照mobile.ant.design

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | type | 按钮类型，可选值为primary/ghost或者不设 | string | - | | size | 按钮大小，可选值为middle、small | string | middle| | activeStyle | 点击反馈的自定义样式 (设为 false 时表示禁止点击反馈) | {}/false | {} | | disabled | 设置禁用 | boolean | false | | style | 自定义样式 | Object | 无 | | onPress | 点击按钮的点击回调函数 | (e: Object): void | 无 | | onPressIn | 同 RN TouchableHighlight onPressIn | (e: Object): void | 无 | | onPressOut | 同 RN TouchableHighlight onPressOut | (e: Object): void | 无 | | onShowUnderlay | 同 RN TouchableHighlight onShowUnderlay | (e: Object): void | 无 | | onHideUnderlay | 同 RN TouchableHighlight onHideUnderlay | (e: Object): void | 无 |

QMCheckBox - 复选框

复选框 可参照mobile.ant.design

API

Checkbox

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | defaultChecked | 初始是否选中 | Boolean | 无 | | checked | 指定当前是否选中 | Boolean | 无 | | disabled | | Boolean | false | | onChange | change 事件触发的回调函数 | (e: Object): void | 无 |

Checkbox.CheckboxItem

基于List.Item对Checkbox进行封装,List.Item的thumb属性固定传入Checkbox,其他属性和List.Item一致。 其他 API 和 Checkbox 相同。

Checkbox.AgreeItem

QMRadio - 单选

单选框 可参照mobile.ant.design

Radio

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | name | name | String | 无 | | defaultChecked | 初始是否选中 | Boolean | 无 | | checked | 指定当前是否选中 | Boolean | 无 | | disabled | 禁用 | Boolean | false | | onChange | change 事件触发的回调函数 | (e: Object): void | 无 |

Radio.RadioItem

基于List.Item对Radio进行封装,List.Item的extra属性固定传入Radio,其他属性和List.Item一致。 其他 API 和 Radio 相同。

QMList - 列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作 可参照mobile.ant.design

规则

• 一般由主要信息、主要操作、次要信息、次要操作组成。
• 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

API

List

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | renderHeader | list heder | (): void | 无 | | renderFooter | list footer | (): void | 无 |

List.Item

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | thumb | 缩略图(当为 string 类型时作为 img src) | String/React.Element | 无 | | extra | 右边内容 | String/React.Element | 无 | | arrow | 箭头方向(右,上,下), 可选horizontal,up,down,empty，如果是empty则存在对应的dom,但是不显示 | String | 无 | | align | Flex 子元素垂直对齐，可选top,middle,bottom | String | middle | | onClick | 点击事件的回调函数 | (): void | 无 | | error(web only) | 报错样式,右侧文字颜色变成橙色 | Boolean | false | | multipleLine | 多行 | Boolean | false | | wrap | 是否换行，默认情况下，文字超长会被隐藏， | Boolean | false | | activeStyle(web only) | 自定义active的样式 | Object | | | platform (web only) | 设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式 | String | 'cross'|

QMList.Row 某些情况下，QMList.Item不能满足需求，尤其里面的布局不规则时，我们提供了QMList.Row，你可以在里面自定义布局。 属性 | 说明 ---|--- style | 为QMList.Row编写自定义样式 onPress | 为QMList.Row绑定onPress事件

QMSwitch - 滑动开关

在两个互斥对象进行选择，eg：选择开或关。 可参照mobile.ant.design

规则

• 只在 List 中使用。
• 避免增加额外的文案来描述当前 Switch 的值。
• 可调整 Switch 的主体来满足 APP 的视觉风格。

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | checked | 是否默认选中 | Boolean | false | | disabled | 是否不可修改 | Boolean | false | | onChange | change 事件触发的回调函数 | (checked: bool): void | 无 | | name(web only) | switch 的 name | String | | | platform (web only) | 设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式 | String | 'cross'|

QMInputItem - 文本输入

用于接受单行文本。。 可参照mobile.ant.design

规则

• 支持通过键盘或者剪切板输入文本。
• 通过光标可以在水平方向进行移动。
• 对特定格式的文本进行处理，eg：隐藏密码。

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | type | 银行卡bankCard,手机号phone（此时最大长度固定为11,maxLength设置无效）,密码password, 数字number（尽量唤起数字键盘） | String | text | | value | value 值(受控与否参考https://facebook.github.io/react/docs/forms.html) | String | 无 | | defaultValue | 设置初始默认值 | String | - | | placeholder | placeholder | String | '' | | editable | 是否可编辑 | bool | true | | disabled | 是否禁用 | bool | false | | clear | 是否带清除功能(仅editable为true,disabled为false,value设置才生效) | bool | false | | maxLength | 最大长度 | number | 无 | | onChange | change 事件触发的回调函数 | (val: string): void | - | | onBlur | blur 事件触发的回调函数 | (val: string): void | - | | onFocus | focus 事件触发的回调函数 | (val: string): void | - | | error | 报错样式 | bool | false | | onErrorClick | 点击报错 icon 触发的回调函数 | (e: Object): void | 无 | | extra | 右边注释 | string or node | '' | | onExtraClick | extra 点击事件触发的回调函数 | (e: Object): void | 无 | | labelNumber | 定宽枚举值：num * @input-label-width: 34px，可用2-7之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符) | number | 5 | | autoFocus | 页面初始化时Input自动获取光标,每个页面只有一个Input的autpFocus会生效。（不保证所有浏览器都生效） | bool | false | | focused | 页面运行过程中,Input获取光标,当Input获取光标（focused更新为true）后，需要在onFocus或者onBlur时再次将该属性设置为false。 | bool | false | | updatePlaceholder (web only) | 当清除内容时，是否将清除前的内容替换到 placeholder 中 | bool | false | | prefixListCls (web only) | 列表 className 前缀 | String | am-list | | name (web only) | input 的 name | String | 无 |

更多属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)

QMSwipeAction - 滑动操作(左滑删除)

滑动操作组件。结合手势操作，从屏幕一侧唤出操作。 可参照mobile.ant.design

规则

1. 一次只可滑动一行列表
2. 点击任意按钮之外处或往回滑动该列表可隐藏操作。

API

SwipeAction

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | style | swipeout 样式 | Object | | | left | 左侧按钮组 | Array | null | | right | 右侧按钮组 | Array | null | | autoClose | 点击按钮后自动隐藏按钮 | Boolean | function() {} | | onOpen | 打开时回调函数 | (): void | function() {} | | disabled | 禁用 swipeout | Boolean | false | | onClose | 关闭时回调函数 | (): void | function() {} |

Button

| 参数 | 说明 | 类型 | 默认值 | |------|------------------|-------------------------|--------| | text | 按钮文案 | String | Click | | style | 按钮样式 | Object | `` | | onPress | 按钮点击事件 | (): void | function() {} |

QMTabs - 标签页

用于让用户在不同的视图中进行切换。 可参照mobile.ant.design

规则

• 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
• 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

API

适用平台：WEB、React-Native

Tabs

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | activeKey | 当前激活 tab 面板的 key | String | 无 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String | 第一个面板 | | onChange | 切换面板的回调 | (key: string): void | 无 | | onTabClick | tab 被点击的回调 | (key: string): void | 无 | | animated | 是否动画 | boolean | true | | swipeable | 是否可以滑动 tab 内容进行切换 | boolean | true | | hammerOptions(Web Only) | 开启swipeable的时候可以对 hammerjs 的 pan 和 swipe 两种手势进行参数配置 | object | {} | | tabBarPosition | tab 位置 top/bottom | string | top | | destroyInactiveTabPane | 是否销毁掉不活动的 tabPane (优化使用) | boolean | false | | underlineColor(react-native only) | 线条颜色 | string | #ddd | | activeUnderlineColor(react-native only) | 选中线条颜色 | string | #108ee9 | | textColor(react-native only) | 文字颜色 | string | #000 | | activeTextColor(react-native only) | 选中文字颜色 | string | #108ee9 | | barStyle(react-native only) | tabs bar 样式 | object | {} | | prefixCls(web only) | className 前缀 | string | am-tabs | | className(web only) | 额外的 className | string | 无 | | pageSize(web only) | 可视区显示的 tab 数量，可以看做一页 | number | 5 | | speed(web only) | 多页模式下，TabBar 滑动的速度 | Number: 1 ~ 10 | 8 | | tabBarhammerOptions(web only) | 同hammerOptions，对 TabBar 的滑动手势进行配置 | Obejct | {} |

Tabs.TabPane

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | key | 对应 activeKey | String | 无 | | tab | 选项卡头显示文字 | React.Element or String | 无 |

QMTag - 标签

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。 可参照mobile.ant.design

规则

• 标签文字必须显示完全。

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | type | 按钮类型，可选值为default(点击无选中效果)/primary/hot/warning/success或者不设 | string | - | | small | 小号标签 | Boolean | false | | disabled | 是否不可用 | Boolean | false | | closable | 是否关闭（非 disabled small 状态） | Boolean | false | | selected | 是否默认选中 | Boolean | false | | onChange | 切换选中回调函数 | (selected: bool): void | 无 | | onClose | 点关闭时的回调函数 | (): void | 无 | | afterClose | 关闭后的回调 | (): void | 无 |

QMToast - 轻提示

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。 可参照mobile.ant.design

规则

• 一次只显示一个 toast。
• 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

API

适用平台：WEB、React-Native

• Toast.success(content, duration, onClose, mask)
• Toast.fail(content, duration, onClose, mask)
• Toast.info(content, duration, onClose, mask)
• Toast.loading(content, duration, onClose, mask)
• Toast.offline(content, duration, onClose, mask)

组件提供了五个静态方法，参数如下：

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | content | 提示内容 | React.Element or String | 无 | | duration | 自动关闭的延时，单位秒 | number | 3 | | onClose | 关闭后回调 | Function | 无 | | mask | 是否显示透明蒙层，防止触摸穿透 | Boolean | true |

注： duration = 0 时，onClose 无效，toast 不会消失；隐藏 toast 需要手动调用 hide

还提供了全局配置和全局销毁方法：

• Toast.hide()

QMDropDown - 下拉菜单

点击后会显示一个菜单。 API

DropDownItem

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | title | 按钮显示文本，如果为数组则自动为多个按钮（DropDownItem 必须添加titleIndex属性） | string或array | - | | onChange | 点击下拉菜单触发的事件 | (value: string, titleIndex: number): void | - | | defaultValue | 默认值 | - | - | | changeTitleAble | 点击下拉菜单是否切换title文本 | boolean | true | | visible | 是否可见 | boolean | true | | style | 自定义样式 | Object | 无 | | clearNext | 选中当前时候清空下一个的选中(多级时才有用) | boolean | false | | modalCloseVisible | 点击遮罩是否关闭下拉框 | boolean | true |

DropDownItem

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | value | 值 | string | - | | onClick | 点击下拉菜单触发的事件 | (value: string, titleIndex: number): void | - | | titleIndex | 多个按钮时对应的下标 | - | - |

QMPicker - 选择框

在一组预设数据中进行选择，e.g. 省市区选择 可参照mobile.ant.design

QMIcon - 自定义字体图标库

图标 如何使用

一. 首先安装依赖：（参考 https://github.com/oblador/react-native-vector-icons）

npm install react-native-vector-icons-qmicon —save

react-native link

二. 应用： import { QMIcon, QMButton } from "qmkit";

图标： 带图标按钮：123

API

适用平台：React-Native

| 属性 | 说明 | 类型 | 默认值 | |------------|----------------|----------------|--------------| | name | 图标名称 | name | ‘shouji1’ reqiure('xxx') | | size | 图标大小 | 'xxs'/'xs'/'sm'/'md'/'lg' | color | 图标颜色 | color | '#000' |

QMForm - 表单

form常用的组件，输入框、日期控件、只读组件、密码控件

QMText - 文本

文本，属性与react-native Text一致