react-native-ui-lvxinghai
简介:
这是一套基于React-native的组件库,目前仅支持adroid,你可以根据自己的需求导入需要使用的组件。
安装:
npm i react-native-ui-lvxinghai
目录:
1、Radio(单选按钮)
2、RadioGroup(单选按钮组)
3、Button(按钮)
4、Table(表格)
5、BaseModal(基础模态框)
6、Message(带图标的消息提示框)
7、RNECharts(对echarts的封装)
7、DatePicker(日期选择器)
Radio(单选按钮)
; <Radio defaultChecked=false id='radio' onChange= { // alert(checked) } label="单选按钮" style= height: 70 lineHeight: 70 fontSize: 20 color: '#333' radioColor="blue" />
props:
- id(string):必选。单选按钮的唯一标识。
- label(string):可选。单选按钮的文字描述。
- defaultChecked(bool):可选。默认选中否?
- onChange(func):可选。点击的回调函数,返回当前选中情况。
- style(object):可选。单选按钮以及label的样式设置,可以设置字体大小行高颜色等。
- radioColor(string):可选。单独设置Radio(label除外)的颜色。
- groupCheckedId(string):可选。提供给RadioGroup使用,指定当前选中的单选按钮id,该单选按钮以外的组成员选中状态置为false。
RadioGroup(单选按钮组)
; <RadioGroup defaultChecked="1" onChange= { } option= id: '1' label: '不处理' style: height: 70 lineHeight: 70 fontSize: 20 color: '#333' radioColor: "blue" flex: 1 id: '2' label: '继续观察' flex: 1 id: '3' label: '已处理' flex: 1 id: '4' label: '慢性变化无需处理' flex: 1 style= padding: 20 width: 200 height: 100 />
props:
- option(Array):必选。配置,可通过option子对象中的style属性和radioColor属性设置Radio的样式,具体如下:
- defaultChecked(string):可选。默认选中项的id;
- onChange(function):可选。发生改变时的回调函数,返回值是选中的Radio id值;
- style(object):可选。样式属性,暂时只支持设置包裹层样式;
如果要分组横向排列就使用
option= id: '1' label: '不处理' flex: 1 id: '2' label: '继续观察' flex: 1 id: '3' label: '已处理' flex: 1 id: '4' label: '慢性变化无需处理' flex: 1
如果直接竖直排列,
option = id: '1' label: '不处理' flex: 1 id: '2' label: '继续观察' flex: 1 id: '3' label: '已处理' flex: 1 id: '4' label: '慢性变化无需处理' flex: 1
支持设置Radio的flex,但它并不是必须的。
Button(按钮)
;<Button text="确认" onPress= { } style= width: 100 margin: 10 textStyle= color: "#333" />
props:
- text(string):必选。按钮名称;
- onPress(function):可选。点击按钮触发的事件;
- style(obj):可选。按钮样式;
- textStyle(obj):可选。按钮文字样式。
Table(表格)
;<Table ref="table" head= id: 'hldj' name: '护理等级' flex: 1 width: 300 id: 'cwhz' name: '床位患者' flex: 5 width: 300 id: 'js' name: '计数' flex: 1 <Text onPress= thisrefstable>This is a element:datajs</Text> data= hldj: 1 cwhz: 2 js: 3 children: <View style= height: 300 > <Text>子项</Text> </View> rowBgStyle: color: "#ddd" hldj: 1 cwhz: 2 js: 3 hldj: 1 cwhz: 2 js: 3 style= width: 800 height: 550 headStyle= height: 50 headTextStyle= width: 200 bodyStyle= backgroundColor: '#fff' bodyRowStyle= height: 50 bodyTextStyle= color: '#333' evenRowColor="#4ACA6D" hasBorder="row" horizontal=true fixedFirst=true/>
props:
- head(Array):必选。表头信息;
其中name可以为字符串也可以为一个react-native组件,flex、width和bodyColStyle为可选参数,默认值flex=1,width=100;当horizontal = false时,flex生效,设置一个单元格的宽度比例值;horizontal=true时,width生效,设置单元格的宽度;bodyColStyle设置这一列body的样式(包括背景色字体颜色大小等等;注意,不是head的样式)。
其中render(data, index)可以用元素替换表中的内容,data为一整行值的对象。注意:如果是字符串或者数字,请务必使用Text标签包裹起来,使用bodyTextStyle设置的样式对该元素无效,需要单独设置。 - data(Array):必选。数据,注意数据字段名称与表头id一一对应;需要注意的是children字段为预留字段,用以向每行传递需要展示的子项(展开子项请参照下方ref);rowBgStyle设置指定行的样式(字体颜色,背景色等等)。
- style(obj):可选。表格样式;
- headStyle(obj):可选。设置表头样式。
- headTextStyle(obj):可选。设置表头单元格文字样式。
- bodyStyle(obj):可选。设置表格内容样式,如果想设置表格的body部分内容超出沿Y轴滚动,只需要给bodyStyle一个height值。
- bodyRowStyle(obj):可选。设置表格行样式。
- bodyTextStyle(obj):可选。设置表格单元格文字样式。
- horizontal(bool):可选。标识是否可横向滑动,即表头过长时,显示横向滚动条。
- evenRowColor(string):可选。设置表格内容偶数行的颜色,传值类型为为颜色字符串,如:"#fff"、"red"。
- ref: 另外预留了一个clickRow方法供外部调用,以展开每行的子项。例如:this.refs.table.clickRow(index);showModal方法显示一个相对table绝对定位的内容块,this.refs.table.showModal(option),option={modalStyle: {/样式,可以控制内容块位置和样式/}, modalContent: {/要显示的内容/}},当不传参数时(this.refs.table.showModal())为关闭。
- childrenStyle(obj):可选。设置子项包裹框样式。
- hasBorder(oneOf(['row', 'all']));可选。指定是否需要border,以及行border('row')还是行列都需要('all')。
- fixedFirst(bool):可选。是否需要第一列固定,之后的列横向滚动。第一列宽度默认为100px,可以通过给表头第一个元素的width属性赋值来设置。
BaseModal(基础模态框)
;<BaseModal visible=thisstatevisible closeModal= this />
props:
- visible(bool):可选。控制模态框的显示隐藏;
- closeModal(func):可选。关闭模态框的函数,点击右上角的关闭按钮时触发;
- hideCloseBtn(bool):可选。隐藏自带的关闭按钮;
- children(any):可选。子元素,即要在模态框中显示的内容,例如
<BaseModal><Text>这是一个基础模态框</Text><BaseModal>
Message(带图标的消息提示框)
<Message type="error" title="这是标题" content="这是内容" option= text: 'cancle' { } text: 'ok' style: borderWidth: 0 backgroundColor: "#3B7CFF" textStyle: color: "#fff" />
props:
- type: PropTypes.oneOf(['info', 'warning', 'error', 'success']), 可选。指定消息框类型,默认为info。
- title(string):可选。消息框的标题
- content(string):可选。消息框的内容
- option(array):可选。底部按钮的配置,具体配置如上代码段,默认有一个ok按钮。如有需求可以自定义按钮,设置按钮的显示内容、样式以及按钮的触摸回调函数。
- closeCallback(func): 可选。关闭消息框的回调函数。
RNECharts(对echarts的封装)
在你使用之前需要完成以下三个步骤:
- 将src/components/chart/chart.html文件复制到你项目中的android\app\src\main\assets文件夹下。
- 执行 npm i react-native-webview
- 执行 react-native link react-native-webview
;... { /** * 连续不间断刷新图标demo */ thistimer = } { var option = title: text: 'ECharts 入门示例' tooltip: {} legend: data: '销量' xAxis: data: "衬衫" "羊毛衫" "雪纺衫" "裤子" "高跟鞋" "袜子" yAxis: {} series: name: '销量' type: 'bar' data: 5 20 36 10 10 20 ; return <RNECharts ref="charts" option=option /> }
props:
- option(object),必选。echarts的配置,请参照ECharts 配置项
- width(number),可选。图表宽度;
- height(number),可选。图表高度;
- backgroundColor(string),可选。背景色。
DatePicker(日期选择器)
<DatePicker defaultDate="2019-09-30" callback= />
props:
- callback(func),必选。返回选中日期的函数,返回值为 yyyy-MM-dd格式的日期字符串。
- defaultDate(string),可选。选择器的默认日期(yyyy-MM-dd格式的日期字符串),为空时,默认为今天。
- style(object),可选。外层样式。
- imgStyle(object),可选。图标样式。
- textStyle(object),可选。文字样式。