qy-rn-component

v1.0.2

Published

2 years ago

## references

Downloads

0High
0Medium
0Low

qy_yeoman

react naive 库

references

搭建组件库用 typescript 进行编写

搭建 react-native + typescript
安装 storybook 进行调试

使用

安装 npm i qy-rn-component 或者 yarn add qy-rn-component

重要且紧急组件

重要不紧急组件

使用手册

旧版本 Toast 组件

文本默认时间
- Toast.info('test toast')
文本自定义时间(毫秒）
- Toast.info('test toast', 2000)
loading
- Toast.loading()
loading 带文本
- Toast.loading('test', 2000)
loading 修改背景颜色
- Toast.loading('test', 2000, '#ffffff')
success toast
- Toast.success('success', 2000)

Toast 组件

Toast 是一个 JavaScript 对象，它将提供三个 static 函数: Toast.info(), Toast.loading()以及 Toast.success()

Toast.info

| 参数（按表格前后顺序） | 说明 | 类型 | 默认值 | | ------------------------ | ------------------------------------------------ | ------ | --------- | | 第一个参数（message） | Toast 内容 | string | "" | | 第二个参数（time） | Toast 提示时间，单位以毫秒计 | number | 2000 | | 第三个参数 (position) | Toast 弹出位置，可选： top, center, bottom | string | center | | 第四个参数（colorTheme） | Toast 背景颜色 | string | "#7BAA31" |

Toast.loading

默认 loading 显示在屏幕中间位置，暂不支持自定义位置

| 参数（按表格前后顺序） | 说明 | 类型 | 默认值 | | ------------------------ | ---------------------------- | ------ | --------- | | 第一个参数（message） | Toast 内容 | string | "" | | 第二个参数（time） | Toast 提示时间，单位以毫秒计 | number | 2000 | | 第三个参数（colorTheme） | Toast 背景颜色 | string | "#7BAA31" |

Toast.success 参数同 Toast.info

Button

| 属性 | 说明 | 类型 | 默认值 | | ------------------ | ------------------------------------------------------------ | ----------------- | ------- | | title | 按钮文字（必填） | string | "" | | mode | 按钮类型：可选值为container、outline、text | string | solid | | size | 按钮大小：large、middle、small, fill | string | large | | viewStyles | 自定义按钮样式 | object | - -- | | textStyles | 自定义按钮文字样式 | object | - | | activeOpacity | 点击按钮时透明度，范围：0 ~ 1 | number | 0.85 | | styleType | 样式类型：primary、warning、 success、danger、dark | string | primary | | disabledViewStyles | 按钮禁用的按钮样式 | {}/false | {} | | disabledTextStyles | 按钮禁用的按钮文字样式 | {}/false | {} | | disabled | 设置按钮是否禁用 | boolean | false | | iconLeft | 按钮文字左侧带的图标 | Image 图片 | - | | iconLeftStyle | 自定义的左侧图标样式 | object | {} | | iconRight | 按钮文字右侧带的图标 | Image 图片/true | -> | | iconRightStyle | 自定义右侧图标样式 | object | {} | | onPress | 点击按钮的回调函数 | (e:object): vioid | - |

Modal 对话框

| 属性 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------- | -------- | --------- | | mode | 对话框类型: message、confirm | string | message | | visible | 对话框是否可见 | boolean | false | | closeable | 是否显示关闭按钮 | boolean | true | | maskClosable | 是否允许点击蒙层关闭对话框 | boolean | false | | transparent | 背景是否透明 | boolean | false | | closeBtnType | 关闭按钮样式: default、bottomIcon | string | default | | cancelText | 取消按钮文字 | string | Cancel | | confirmText | 确认按钮文字 | string | Confirm | | animationType | 对话框出现的方式：fade、slide(默认从底部入场) | string | fade | | maskStyle | 自定义对话框 mask（蒙层）样式 | object | {} | | onClose | 点击关闭按钮或者 mask 的回调 | (): void | - | | onConfirm | 点击确认按钮的回调 | (): void | - |

CheckBox

| 属性 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------------------------------------------ | --------------------------------------- | -------- | | mode | checkbox 的类型： circle, range | string | range | | defaultChecked | 初始是否选中 | boolean | false | | checked | 当前是否选中 | boolean | - | | disabled | 是否禁用 | boolean | false | | data | checkbox 内容：,label展示给用户内容，value作为选中时的自定义值 | {label: string, value:string | number} | - | | onChange | 点击操作事件触发的回调函数 | (e: boolean): void | () => {} |

RadioGroup

| 属性 | 说明 | 类型 | 默认值 | | --------------------- | -------------------------- | -------------------------------- | ------ | | options | 选项配置 | {label: string, value: string}[] | - | | radioImg | 未选中单选按钮背景图 | ImageSourcePropType | - | | radioImgSelected | 选中单选按钮背景图 | ImageSourcePropType | - | | onChange | 选中/取消回调 | (selectValue: string) | - | | defaultSelectValue | 默认选中值可选 | string | - | | groupStyle | radio group 容器样式可选 | StyleProp< TextStyle > | - | | itemStyle | 单个选项样式 | StyleProp< TextStyle > | - | | itemTextStyle | 单个选项文字样式 | StyleProp< TextStyle > | - | | selectedItemTextStyle | 单个选项文字样式(选中状态) | StyleProp< TextStyle > | - |

Radio

| 　属性 | 说明　 | 类型　 | 默认值　 | | ---------- | ------------------- | ------------------------ | -------- | | img | 未选中背景图 | ImageSourcePropType | - | | checkedImg | 选中背景图 | ImageSourcePropType | - | | onChange | 点击单选的回调函数 | (checked: boolean): void | - | | width | 单选按钮大小可选 | number | - | | checked | 是否为选中状态可选 | boolean | false |

ListItem

Basic

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------------------------------------------------- | --------------------------- | ------ | | style | 自定义主体内容样式 | {} | {} | | icon | 左侧的小图标,当为 string 类型时，为 Image 的 source | string / ReactNative.Elment | - | | iconStyle | 自定义 icon 样式 | {} | {} | | extra | 右边内容 | string/ReactNative.Element | - | | extraStyle | 自定义右边内容样式 | {} | {} | | arrow | 右边小箭头方向（上，下，右），可选right,up,down,empty, 如果是 empty 则存在对应的 dom,但是不显示 | string | - | | arrowStyle | 自定义箭头样式 | {} | {} | | align | 子元素垂直对齐，可选top, middle, bottom | string | middle | | onClick | 点击事件的回调函数 | (): void | - | | wrap | 是否换行，默认情况下，文字会自动换行 | boolean | true | | bottomBorder | 底部是否有分隔线,默认有 | boolean | true |

Input 输入框

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ------------------------------------ | ------------------- | -------------- | | placeholder | 提示内容 | string | "please enter" | | placeholderStyle | 提示内容文字样式 | {} | {} | | style | 自定义输入框样式 | {} | - | | value | 输入框输入的内容 | string | "" | | disabled | 输入框是否可用, 默认可用 | boolean | false | | onFocus | 数据框聚焦回调函数 | (value: string): {} | - | | onBlur | 输入框失焦的回调函数 | (value: string): {} | - | | onChange | 用户输入内容时的回调（同 TextInput） | (value: string): {} | - | | onPressUp | 键盘抬起时的回调 | (value: string): {} | - | | onPressDown | 键盘按下时的回调 | (value: string): {} | - |

NoticeBar 通告栏

| 属性 | 说明 | 类型 | 默认值 | | -------- | ------------------------------------------- | ------------------- | --------- | | mode | 提示类型，可选warning, closable, link | string | warning | | iconLeft | 在开始位置这是图标 | ReactNative.Element | - | | action | 用于替换操作 icon 的文案 | ReactNative.Element | - | | onClick | 点击 action 的 icon/文案的回调函数 | (): void | (): {} | | style | 通告内容样式 | {} | {} |

Line

DashLine

| 属性 | 说明 | 类型 | 默认值 | | ------ | -------------------------------------- | ------ | ---------- | | mode | 虚线类型，可选horizontal, vertical | string | vertical | | width | 虚线总长度,单位 dp | number | 30 | | length | 虚线线条长度,单位 dp | number | 2 | | weight | 虚线线条粗细,单位 dp | number | 1 | | color | 虚线颜色 | string | "#ccc" |

DeleteLine

| 属性 | 　说明　 | 　类型　 | 　默认值 | | --------- | ---------------- | -------- | -------- | | text | 文字内容 | string | "" | | rotateDeg | 删除线倾斜角度 | number | 0 | | lineStyle | 自定义删除线样式 | {} | {} |

PullToRefresh

| 属性 | 说明 | 类型 | 默认值 | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | | refreshState | 列表刷新状态：可选nomarl-正常，headerRefreshing-头部加载中,headerRefreshSuccess-顶部刷新成功,headerFailure-刷新失败,footerRefreshing-底部加载中,footerResfreshNoData-已加载全部是护具,footerFailure-加载失败 | string | nomarl | | onHeaderRefresh | 下拉刷新回调函数(必填) | (refreshState: string) => void | - | | onFooterRefresh | 上拉分页加载回调函数(必填) | (refreshState: string) => void | - | | headerRefreshingComponent | 自定义顶部刷新中控件 | ?any | - | | headerFailureComponent | 自定义顶部刷新失败控件 | ?any | - | | footerRefreshingComponent | 自定义底部刷新控件 | ?any | - | | footerFailureComponent | 自定义底部失败控件 | ?any | - | | footerNoMoreDataComponent | 自定义底部已加载全部控件 | ?any | - | | footerEmptyComponent | 自定义底部无数据控件 | ?any | - |