Qy-rn-component NPM | npm.io

1.0.2 • Published 4 years ago

Install

Weekly downloads

37

License

-

Repository

Last release

4 years ago

react naive 库

references

搭建组件库用 typescript 进行编写

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

使用

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

重要且紧急组件

Toast
Button
Modal 对话框
CheckBox
RadioGroup
Radio
ListItem
Basic
Input 输入框
NoticeBar 通告栏
Line
DashLine 虚线
DeleteLine 文字删除线

重要不紧急组件

ListItem
SubTitle
Validation
PullToRefresh 拉动刷新（下拉刷新上拉加载）
Form 表单
InputArea 多行输入
SearchBar

使用手册

旧版本 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	-

@infinitebrahmanuniverse/nolb-qy @everything-registry/sub-chunk-2518

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago