react-native-ui-lvxinghai
Version:
323 lines (302 loc) • 12.7 kB
Markdown
react-native-ui-lvxinghai
===
简介:
这是一套基于React-native的组件库,目前仅支持adroid,你可以根据自己的需求导入需要使用的组件。
安装:
npm i react-native-ui-lvxinghai
目录:
1、[Radio(单选按钮)](#Radio单选按钮)
2、[RadioGroup(单选按钮组)](#RadioGroup单选按钮组)
3、[Button(按钮)](#Button按钮)
4、[Table(表格)](#Table表格)
5、[BaseModal(基础模态框)](#BaseModal基础模态框)
6、[Message(带图标的消息提示框)](#Message带图标的消息提示框)
7、[RNECharts(对echarts的封装)](#RNECharts对echarts的封装)
7、[DatePicker(日期选择器)](#DatePicker日期选择器)
Radio(单选按钮)

```js
import { Radio } from "react-native-ui-lvxinghai";
<Radio
defaultChecked={false}
id='radio'
onChange={(checked) => {
// 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(单选按钮组)

```js
import { RadioGroup } from "react-native-ui-lvxinghai";
<RadioGroup
defaultChecked="1"
onChange={(id) => { alert(id) }}
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):可选。样式属性,暂时只支持设置包裹层样式;
如果要分组横向排列就使用
```js
option=[
[
{ id: '1', label: '不处理', flex: 1 },
{ id: '2', label: '继续观察', flex: 1 },
], [
{ id: '3', label: '已处理', flex: 1 },
{ id: '4', label: '慢性变化无需处理', flex: 1 },
]
]
```
如果直接竖直排列,
```js
option = [
{ id: '1', label: '不处理', flex: 1 },
{ id: '2', label: '继续观察', flex: 1 },
{ id: '3', label: '已处理', flex: 1 },
{ id: '4', label: '慢性变化无需处理', flex: 1 },
]
```
支持设置Radio的flex,但它并不是必须的。
Button(按钮)

```js
import { Button } from "react-native-ui-lvxinghai";
<Button
text="确认"
onPress={() => { }}
style={{ width: 100, margin: 10 }}
textStyle={{ color: "#333" }} />
```
props:
* text(string):必选。按钮名称;
* onPress(function):可选。点击按钮触发的事件;
* style(obj):可选。按钮样式;
* textStyle(obj):可选。按钮文字样式。
Table(表格)

```js
import { Table } from "react-native-ui-lvxinghai";
<Table
ref="table"
head={[
{ id: 'hldj', name: '护理等级', flex: 1, width: 300 },
{ id: 'cwhz', name: '床位患者', flex: 5, width: 300 },
{ id: 'js', name: '计数', flex: 1, render: (data, index) => <Text onPress={() => this.refs.table.clickRow(index)}>This is a element:{data.js}</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(基础模态框)
```js
import { BaseModal } from "react-native-ui-lvxinghai";
<BaseModal
visible={this.state.visible}
closeModal={() => this.setState({ visible: false })} />
```
props:
* visible(bool):可选。控制模态框的显示隐藏;
* closeModal(func):可选。关闭模态框的函数,点击右上角的关闭按钮时触发;
* hideCloseBtn(bool):可选。隐藏自带的关闭按钮;
* children(any):可选。子元素,即要在模态框中显示的内容,例如
```js
<BaseModal><Text>这是一个基础模态框</Text><BaseModal>
```
Message(带图标的消息提示框)

```js
<Message
type="error"
title="这是标题"
content="这是内容"
option={[
{
text: 'cancle',
onPress: () => { alert('yes') },
},
{
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
```js
import { RNECharts } from "react-native-ui-lvxinghai";
...
componentDidMount() {
/**
* 连续不间断刷新图标demo
*/
this.timer = setInterval(() => {
let data = [5, 20, 36, 10, 10, 20].map((v) => {
return Math.random() * v
})
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
/**普通图表刷新通过改变state内部的option实现,缺点就是组件不断更新,导致图表组件重头开始渲染,没有连贯效果
* 在chartComponent里面封装的setNewOption方法,
* 目的是为了调用myChart.setOption(option)
* 达到不抖屏不更新state刷新图表
* */
this.refs.charts.setNewOption(option)
}, 2000)
}
render() {
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 配置项](https://echarts.baidu.com/option.html#title)
* width(number),可选。图表宽度;
* height(number),可选。图表高度;
* backgroundColor(string),可选。背景色。
DatePicker(日期选择器)
--
```js
<DatePicker defaultDate="2019-09-30" callback={(date) => alert(date)} />
```
props:
* callback(func),必选。返回选中日期的函数,返回值为 yyyy-MM-dd格式的日期字符串。
* defaultDate(string),可选。选择器的默认日期(yyyy-MM-dd格式的日期字符串),为空时,默认为今天。
* style(object),可选。外层样式。
* imgStyle(object),可选。图标样式。
* textStyle(object),可选。文字样式。