lg-iot-ui
v1.0.3
Published
朗国iot平台移动端RN小程序ui框架
Downloads
7
Readme
朗国移动端RN组件库
本组件库用编写朗国iot平台移动端APP中RN小程序使用，请下载使用朗国iot的官方RN脚手架编写
开发指南
安装
npm安装hilink-ui框架
//npm
npm install lg-iot-ui
//yarn
yarn add lg-iot-ui引入lg-iot-ui
在页面进行如下配置
import {
BasePage,
//组件名称
} from 'lg-iot-ui';
import {
View
} from 'react-native';
class Demo extends BasePage{
renderProps(){
return {
isToolBar: true,
style: {
padding: 10
},
toolBarAttr: {
title: "消息组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
}
};
}
renderPage(){
return (
<View>
{/*编写具体内容*/}
</View>
);
}
}
export default Demo;BasePage Props
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | isToolBar | 是否显示头部ToolBar | Boolean | -- | | style | 主体内容区域样式 | Object | -- | | toolBarAttr | 头部toolBar属性 | Object | 详情请见下方toolbar组件属性 |
组件
按钮组件
使用方式
import React, {Component} from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import {
Button,
Table,
Page
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class ButtonPage extends Component{
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "按钮组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
eventData: Data.event
}
}
render() {
const {
headerData,
attributeData,
eventData,
toolBarAttr
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>按钮</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {alert("点击了默认按钮！")}}
children={"默认"}/>
<Button
style={style.item}
bgColor={"#47cc47"}
children={"成功"}/>
<Button
style={style.item}
bgColor={"#ffbf00"}
children={"警告"}/>
<Button
style={style.item}
bgColor={"#fa2a2d"}
children={"失败"}/>
</View>
<View style={style.row}>
<Button
style={{flex:1}}
ghost
children={"默认"}/>
<Button
ghost
style={style.item}
bgColor={"#47cc47"}
children={"成功"}/>
<Button
ghost
style={style.item}
bgColor={"#ffbf00"}
children={"警告"}/>
<Button
ghost
style={style.item}
bgColor={"#fa2a2d"}
children={"失败"}/>
</View>
<Text style={style.title}>禁用按钮</Text>
<View style={style.row}>
<Button
style={{flex:1}}
disabled
children={"默认"}/>
<Button
disabled
style={style.item}
bgColor={"#47cc47"}
children={"成功"}/>
<Button
disabled
style={style.item}
bgColor={"#ffbf00"}
children={"警告"}/>
<Button
disabled
style={style.item}
bgColor={"#fa2a2d"}
children={"失败"}/>
</View>
<View style={style.row}>
<Button
style={{flex:1}}
ghost
disabled
children={"默认"}/>
<Button
ghost
disabled
style={style.item}
bgColor={"#47cc47"}
children={"成功"}/>
<Button
ghost
disabled
style={style.item}
bgColor={"#ffbf00"}
children={"警告"}/>
<Button
ghost
disabled
style={style.item}
bgColor={"#fa2a2d"}
children={"失败"}/>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
</Page>
);
}
}
export default ButtonPage;
Button Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | ghost | 是否为边框按钮 | Boolean | -- | | color | 按钮字体颜色 | String | -- | | bgColor | 背景或边框颜色 | String | #007dff | | children | 文本或组件 | String/组件 | -- | | height | 高度 | String/Number | 36 | | width | 宽度 | String/Number | 70 | | borderRadius | 边框圆角度数 | Number | 10 | | fontSize | 文字大小 | String/Number | 14 | | style | 按钮Style | Object | -- | | fontStyle | 文字Style | Object | -- | | disabled | 是否禁用 | Boolean | false |
Button Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onClick | 点击回调 | -- |
对话框组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image
} from 'react-native';
import {
BasePage,
Button,
Table
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class DialogPage extends BasePage {
constructor(props) {
super(props);
this.state = {
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
optionsData: Data.options,
eventData: Data.event
};
}
renderProps() {
return {
isToolBar: true,
style: style.main,
toolBarAttr: {
title: "对话框组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
}
};
}
renderPage() {
const {
headerData,
optionsData,
eventData
} = this.state;
const toast = (msg, type) => {
this.showToast({
duration: 1000,
msg,
type
})
};
const childRender = (
<View style={Style.childView}>
<Image
style={{
width: 100,
height: 100
}}
source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
<Text>自定义内容</Text>
</View>
);
return (
<View>
<Text style={style.title}>简单对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: true,
children: "简单对话框",
confirmText: "好的",
onConfirm:() => {
this.hideDialog();
}
});
}}
children={"简单对话框"}/>
</View>
<Text style={style.title}>带标题对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: true,
title: "标题",
children: "带标题对话框",
confirmText: "好的",
onConfirm:() => {
this.hideDialog();
}
});
}}
children={"带标题对话框"}/>
</View>
<Text style={style.title}>自定义内容对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: true,
title: "标题",
top: 200,
closeOnMaskClick: true,
children: childRender,
confirmText: "好的",
onConfirm:() => {
this.hideDialog();
}
});
}}
children={"自定义内容对话框"}/>
</View>
<Text style={style.title}>取消按钮对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: true,
title: "标题",
children: "取消按钮对话框",
confirmText: "确认",
cancelText: "取消",
onConfirm:() => {
toast("点击了确认按钮",'success');
this.hideDialog();
},
onCancel:() => {
toast("点击了取消按钮",'danger');
this.hideDialog();
}
});
}}
children={"取消按钮对话框"}/>
</View>
<Text style={style.title}>点击遮罩关闭对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: true,
title: "提示",
children: "点击遮罩关闭对话框",
closeOnMaskClick: true,
confirmText: "好的",
onConfirm:() => {
this.hideDialog();
}
});
}}
children={"点击遮罩关闭对话框"}/>
</View>
<Text style={style.title}>不带遮罩对话框</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showDialog({
isMask: false,
title: "提示",
children: "不带遮罩对话框",
confirmText: "好的",
onConfirm:() => {
this.hideDialog();
}
});
}}
children={"不带遮罩对话框"}/>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={optionsData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
</View>
);
}
}
export default DialogPage;Dialog Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | isMask | 是否显示遮罩 | Boolean | false | | title | 对话框标题 | String | -- | | children | 对话框内容 | String/组件 | -- | | closeOnMaskClick | 点击遮罩是否关闭对话框 | Boolean | false | | confirmText | 确认按钮文字 | String | -- | | confirmStyle | 确认按钮文字样式 | Object | -- | | cancelText | 取消按钮文字 | String | -- | | cancelStyle | 取消按钮文字样式 | Object | -- | | top | 对话框离头部高度 | Number | 300 | | width | 对话框宽度（单位：%） | Number | 70 |
Dialog Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onConfirm | 确认按钮监听 | -- | | onCancel | 取消按钮监听 | -- |
图标组件
使用方式
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import {
IconFont,
Page, Table
} from '../../../../component/index.native';
import Style from './style/index';
import * as Data from './data';
const style = StyleSheet.create(Style);
class IconPage extends Component{
constructor(props) {
super(props);
this.state = {
num: 79,
toolBarAttr: {
title: "图标组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute
};
this.list = [];
this.row = Math.trunc(this.state.num/4) + (this.state.num%4 > 0 ? 1 : 0);
for (let i = 0; i < this.row; i++) {
let rowList = [];
for (let j = 0; j < 4; j++) {
let id = (4*i) + j;
if (id == 13 || id == 69 || id > 79) {
id++;
}
rowList.push(id > 0 ? ("weibiaoti--" + id) : "weibiaoti--")
}
this.list.push(rowList);
}
}
render() {
const {
toolBarAttr,
headerData,
attributeData
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>图标列表</Text>
{
this.list.map((item, index) => (
<View style={{
width: '100%',
flexDirection: 'row'
}} key={index}>
{
item.map((val, id) => (
<View style={style.iconItem} key={id}>
<IconFont name={val} size={30} color={"#909090"}/>
<Text style={{
marginTop: 10
}}>{val}</Text>
</View>
))
}
</View>
))
}
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
</Page>
)
}
}
export default IconPage;
Icon Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | name | 图标名称 | String | -- | | size | 图标大小 | Number | 18 | | color | 图标颜色 | string/string[] | #242424 |
加载组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image
} from 'react-native';
import {
BasePage,
Button,
Table
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class LoadingPage extends BasePage {
renderProps() {
return {
isToolBar: true,
style: style.main,
toolBarAttr: {
title: "加载组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
}
};
}
constructor(props) {
super(props);
this.state = {
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
optionsData: Data.options
};
}
renderPage() {
const {
headerData,
optionsData
} = this.state;
const loadingIconRender = (
<Image
style={{
width: 35,
height: 35
}}
source={require('../../../assets/loading.png')}/>
);
return (
<View>
<Text style={style.title}>带蒙版加载</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showLoading({
isMask: true,
msg: "加载中"
})
}}
children={"带蒙版加载"}/>
</View>
<Text style={style.title}>不带蒙版加载</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showLoading({
msg: "加载中"
})
}}
children={"不带蒙版加载"}/>
</View>
<Text style={style.title}>更改加载颜色</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showLoading({
isMask: true,
msg: "加载中",
color: 'red'
})
}}
children={"更改加载颜色"}/>
</View>
<Text style={style.title}>更改加载图标</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
onClick={() => {
this.showLoading({
isMask: true,
msg: "加载中",
icon: loadingIconRender
})
}}
children={"更改加载颜色"}/>
</View>
<View style={style.row}>
<Text style={{color: 'red'}}>
(*注意：在启动加载过程后可以通过返回按钮进行关闭)
</Text>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={optionsData}/>
</View>
)
}
}
export default LoadingPage;Loading Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | isMask | 是否打开蒙版 | Boolean | false | | msg | 加载文字 | String | -- | | color | 默认加载图标颜色 | String | #ffffff | | icon | 自定义加载组件 | 组件 | ActivityIndicator |
消息组件
import React, { Component, cloneElement } from 'react';
import {
View,
Text,
StyleSheet,
Pressable
} from 'react-native';
import {
Page,
BasePage,
Button,
Table
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class MessagePage extends BasePage{
renderProps() {
return {
isToolBar: true,
style: style.main,
toolBarAttr: {
title: "消息组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
}
};
}
constructor(props) {
super(props);
this.state = {
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
optionsData: Data.options,
};
}
renderPage() {
const {
headerData,
optionsData
} = this.state;
return (
<View style={{
marginTop: 50
}}>
<Text style={style.title}>自动关闭消息</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {this.showToast({
msg: "正常消息",
type: "info",
duration: 2000
})}}
children={"弹出正常消息"}/>
<Button
style={style.item}
bgColor={"#47cc47"}
onClick={() => {this.showToast({
msg: "成功消息",
type: "success",
duration: 2000
})}}
children={"弹出成功消息"}/>
</View>
<View style={style.row}>
<Button
style={{flex:1}}
bgColor={"#ffbf00"}
onClick={() => {this.showToast({
msg: "警告消息",
type: "warning",
duration: 2000
})}}
children={"弹出警告消息"}/>
<Button
style={style.item}
bgColor={"#fa2a2d"}
onClick={() => {this.showToast({
msg: "危险消息",
type: "danger",
duration: 2000
})}}
children={"弹出危险消息"}/>
</View>
<Text style={style.title}>手动关闭消息</Text>
<View style={style.row}>
<Button
style={{width: '100%'}}
bgColor={"#47cc47"}
onClick={() => {this.showToast({
msg: "成功消息",
type: "success"
})}}
children={"弹出成功消息"}/>
</View>
<View style={style.row}>
<Button
style={{width: '100%'}}
bgColor={"#fa2a2d"}
onClick={() => {this.hideToast()}}
children={"关闭消息"}/>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={optionsData}/>
</View>
)
}
}
export default MessagePage;Message Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | duration | 自动关闭时间，单位ms | Number | false | | msg | 消息内容 | String | -- | | type | 消息类型，可选['success','warning','danger','info'] | String | info |
弹出框组件
使用方式
import React, { Component, cloneElement } from 'react';
import {
View,
Text,
StyleSheet,
Pressable
} from 'react-native';
import {
BasePage,
Button,
Table,
Popup
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class PopupPage extends BasePage{
renderProps() {
return {
isToolBar: true,
style: style.main,
toolBarAttr: {
title: "弹出框组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
}
};
}
constructor(props) {
super(props);
this.state = {
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
optionsData: Data.options
}
}
renderPage() {
const {
headerData,
optionsData
} = this.state;
const msgRender = msg => (
<View style={style.topStyle}>
<Text style={{ color: '#000', fontSize: 20 }}>{msg}</Text>
</View>
);
return (
<View>
<Text style={style.title}>带标题弹出框</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {
this.showPopup({
title: '标题',
children: msgRender("带标题弹出框")
})
}}
children={"带标题弹出框"}/>
</View>
<Text style={style.title}>不带标题弹出框</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {
this.showPopup({
isMask: true,
children: msgRender("不带标题弹出框")
})
}}
children={"不带标题弹出框"}/>
</View>
<Text style={style.title}>带蒙版弹出框</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {
this.showPopup({
title: '标题',
closeOnMaskClick: true,
isMask: true,
children: msgRender("带蒙版弹出框")
})
}}
children={"带蒙版弹出框"}/>
</View>
<Text style={style.title}>不带蒙版弹出框</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {
this.showPopup({
title: '标题',
closeOnMaskClick: false,
isMask: false,
children: msgRender("不带蒙版弹出框")
})
}}
children={"不带蒙版弹出框"}/>
</View>
<Text style={style.title}>更改弹出框高度</Text>
<View style={style.row}>
<Button
style={{flex:1}}
onClick={() => {
this.showPopup({
title: '标题',
height: 200,
closeOnMaskClick: true,
isMask: true,
children: msgRender("更改弹出框高度")
})
}}
children={"更改弹出框高度"}/>
</View>
<View style={style.row}>
<Text style={{color: 'red'}}>
(*注意：弹出框可以通过返回按钮进行关闭)
</Text>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={optionsData}/>
</View>
);
}
}
export default PopupPage;Popup Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | height | 弹出框高度 | Number/String | 400 | | isMask | 是否显示蒙版 | Boolean | true | | children | 弹出窗内容 | 组件 | -- | | title | 标题文字 | String | -- | | closeOnMaskClick | 点击蒙版是否关闭弹窗 | Boolean | false |
滑块组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import {
Page,
Progress,
Table
} from '../../../../component/index.native';
import Style from './style/index';
import * as Data from './data';
const style = StyleSheet.create(Style);
class SliderPage extends Component {
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "滑块组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
eventData: Data.event
};
}
render() {
const {
toolBarAttr,
headerData,
attributeData,
eventData
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>默认滑块</Text>
<Progress
min={0}
max={100}
step={1}
value={20}/>
<Text style={style.title}>改变颜色</Text>
<Progress
min={0}
max={100}
step={1}
minimumTrackTintColor={"red"}
value={20}/>
<Text style={style.title}>改变步长</Text>
<Progress
min={0}
max={100}
step={10}
value={20}/>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
</Page>
)
}
}
export default SliderPage;Slider Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | width | 进度条长度 | Number/String | -- | | value | 初始数值 | Number | -- | | min | 最小值 | Number | 0 | | max | 最大值 | Number | 100 | | step | 步长 | Number | 1 | | style | 样式 | Object | -- | | minimumTrackTintColor | 滑动条颜色 | String | #007dff | | thumbTintColor | 滑动条背景颜色 | String | #909090 |
Slider Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onValueChange | 拖动回调，msg滑块当前数值 | msg | | onSlidingComplete | 松开滑块回调，msg滑块当前数值 | msg |
计数器组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import {
Page,
Stepper,
Table
} from '../../../../component/index.native'
import Style from './style/index';
import * as Data from './data';
const style = StyleSheet.create(Style);
class StepperPage extends Component{
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "计数器组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
value: 0,
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
eventData: Data.event,
}
}
render() {
const {
toolBarAttr,
headerData,
attributeData,
eventData,
value
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>默认计数器</Text>
<Stepper style={style.mb} value={value} onChange={(v) => console.log(v)} />
<Text style={style.title}>初始值计数器</Text>
<Stepper style={style.mb} defaultValue={2} />
<Text style={style.title}>限定范围计数器</Text>
<Stepper style={style.mb} max={3} min={-3} />
<Text style={style.title}>步长计数器</Text>
<Stepper style={style.mb} step={5} />
<Text style={style.title}>禁用计数器</Text>
<Stepper style={style.mb} disabled />
<Text style={style.title}>radius类型计数器</Text>
<Stepper style={style.mb} shape="radius" />
<Text style={style.title}>circle类型计数器</Text>
<Stepper style={style.mb} shape="circle" />
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
</Page>
)
}
}
export default StepperPage;Stepper Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | shape | 形状，可选值 rect, radius, circle | String | radius | | size | 大小，可选值 md、lg | String | md | | type | 输入类型，可选值 text、number、price、tel | String | text | | value | 绑定值 | Number/String | -- | | disabled | 是否禁用 | Boolean | false | | defaultValue | 初始值 | Number | -- | | min | 最小值 | Number | -- | | max | 最大值 | Number | -- | | step | 步长 | Number | 1 | | disableInput | 是否禁用输入框 | Boolean | false |
Stepper Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onInputChange | 输入值变化时触发的回调函数 | value?: number ｜ string | | onChange | 值变化时触发的回调函数 | value?: number ｜ string |
开关组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import {
Switch,
Page,
IconFont,
Table
} from '../../../../component/index.native'
import Style from './style/index';
import * as Data from './data';
const style = StyleSheet.create(Style);
class SwitchPage extends Component {
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "开关组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
eventData: Data.event,
rodSw1: true,
rodSw2: true,
rodSw3: true,
rodSw4: true
};
}
render() {
const {
toolBarAttr,
headerData,
attributeData,
eventData,
rodSw1,
rodSw2,
rodSw3,
rodSw4,
} = this.state;
const onRender = color => (
<IconFont name={"weibiaoti--38"} size={10} color={color}/>
);
const offRender = (
<IconFont name={"weibiaoti--38"} size={10} color={"#c1c1c1"}/>
);
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>默认开关</Text>
<View style={style.row}>
<Switch
style={style.item}
value={true}
onChange={(isOpen) => alert(isOpen ? "开关已打开" : "开关已关闭")}/>
<Switch
style={style.item}
bgColor={"#47cc47"}
value={true}/>
<Switch
style={style.item}
bgColor={"#ffbf00"}
value={true}/>
<Switch
style={style.item}
bgColor={"#fa2a2d"}
value={true}/>
</View>
<Text style={style.title}>禁用开关</Text>
<View style={style.row}>
<Switch
disabled
style={style.item}
value={true}/>
<Switch
disabled
style={style.item}
bgColor={"#47cc47"}
value={true}/>
<Switch
disabled
style={style.item}
bgColor={"#ffbf00"}
value={true}/>
<Switch
disabled
style={style.item}
bgColor={"#fa2a2d"}
value={true}/>
</View>
<Text style={style.title}>开关文字</Text>
<View style={style.row}>
<Switch
onChildren={"开"}
offChildren={"关"}
style={style.item}
value={rodSw1}
rodStyle={{
color: "#007dff"
}}
onChange={(msg) => this.setState({rodSw1: msg})}/>
<Switch
onChildren={"开"}
offChildren={"关"}
style={style.item}
bgColor={"#47cc47"}
value={rodSw2}
rodStyle={{
color: "#47cc47"
}}
onChange={(msg) => this.setState({rodSw2: msg})}/>
<Switch
onChildren={"开"}
offChildren={"关"}
style={style.item}
bgColor={"#ffbf00"}
value={rodSw3}
rodStyle={{
color: "#ffbf00"
}}
onChange={(msg) => this.setState({rodSw3: msg})}/>
<Switch
onChildren={"开"}
offChildren={"关"}
style={style.item}
bgColor={"#fa2a2d"}
rodStyle={{
color: "#fa2a2d"
}}
value={rodSw4}
onChange={(msg) => this.setState({rodSw4: msg})}/>
</View>
<Text style={style.title}>开关图标</Text>
<View style={style.row}>
<Switch
onChildren={onRender("#007dff")}
offChildren={offRender}
style={style.item}
value={true}/>
<Switch
onChildren={onRender("#47cc47")}
offChildren={offRender}
bgColor={"#47cc47"}
style={style.item}
value={true}/>
<Switch
onChildren={onRender("#ffbf00")}
offChildren={offRender}
bgColor={"#ffbf00"}
style={style.item}
value={true}/>
<Switch
onChildren={onRender("#fa2a2d")}
offChildren={offRender}
bgColor={"#fa2a2d"}
style={style.item}
value={true}/>
</View>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
</Page>
)
}
}
export default SwitchPage;Switch Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | value | 给开关赋值状态 | String | false | | bgColor | 开关打开时背景颜色 | String | #007dff | | style | 开关样式 | Object | -- | | rodStyle | 开关按钮样式 | Object | -- | | disabled | 是否禁用 | Boolean | false | | onChildren | 开启时按钮内容 | String/组件 | -- | | offChildren | 关闭时按钮内容 | String/组件 | -- |
Switch Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onChange | 点击回调,附带isOpen参数判断点击状态 | isOpen |
表格组件
使用方式
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import {
Table,
Page
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class TablePage extends Component {
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "表格组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
cellData: Data.cell
};
}
render() {
const {
toolBarAttr,
headerData,
attributeData,
cellData
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>默认表格</Text>
<Table
headerData={Data.defHeader}
data={Data.defData}/>
<Text style={style.title}>表格自定义配置</Text>
<Table
config={{
flexs: [1,2,1],
aligns: ['left', 'left', 'left']
}}
headerRowStyle={{
backgroundColor: "#fc5531"
}}
headerData={Data.defHeader}
data={Data.defData}/>
<Text style={style.title}>表格显示组件</Text>
<Table
contentItemStyle={{
alignItems:'center'
}}
headerData={Data.imgHeader}
data={Data.imgData}/>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>单元格配置</Text>
<Table
headerData={headerData}
data={cellData}/>
</Page>
)
}
}
export default TablePage;Table Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | headerData | 头部数据 | Array | -- | | data | 表数据 | Array | -- | | config | 单元格配置 | Object | 具体见下方Cell配置 | | headerRowStyle | 头部样式 | Object | -- | | headerItemStyle | 头部单元格样式 | Object | -- | | headerTextStyle | 头部文字样式 | Object | -- | | contentItemStyle | 内容样式 | Object | -- | | contentTextStyle | 内容文字样式 | Object | -- |
Cell Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | flexs | 单元格占比 | Array[Number] | [...1] | | aligns | 单元格对其方向 | Array[String] | [...'center'] |
toolBar组件
使用方式
import React, {Component} from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import {
Table,
ToolBar,
Page
} from '../../../../component/index.native';
import * as Data from './data';
import Style from './style/index';
const style = StyleSheet.create(Style);
class ToolBarPage extends Component{
constructor(props) {
super(props);
this.state = {
toolBarAttr: {
title: "ToolBar组件",
isShowEditor: false,
onBack: () => this.props.navigation.goBack()
},
headerData: [{
name: "属性",
dec: "说明",
type: "类型",
def: "默认值"
}],
attributeData: Data.attribute,
eventData: Data.event,
iconData: Data.icon
}
}
render() {
const {} = this.props;
const {
headerData,
attributeData,
eventData,
iconData,
toolBarAttr
} = this.state;
return (
<Page
isToolBar
toolBarAttr={toolBarAttr}
style={style.main}>
<Text style={style.title}>默认导航栏</Text>
<ToolBar
onBack={() => alert('你点击了返回')}
onEditor={() => alert('你点击了编辑')}
title={"默认导航栏"}/>
<Text style={style.title}>隐藏编辑图标</Text>
<ToolBar
onBack={() => alert('你点击了返回')}
isShowEditor={false}
title={"隐藏编辑图标"}/>
<Text style={style.title}>隐藏返回图标</Text>
<ToolBar
onEditor={() => alert('你点击了编辑')}
isShowBack={false}
title={"隐藏返回图标"}/>
<Text style={style.title}>自定义样式</Text>
<ToolBar
onBack={() => alert('你点击了主页')}
onEditor={() => alert('你点击了信息')}
bgColor={"#0061fd"}
color={"#ffffff"}
fontWeight={'100'}
fontSize={20}
iconAttr={{
leftIconName: 'weibiaoti--2',
rightIconName: 'weibiaoti--3',
rightSize: 14,
rightColor: '#ffffff',
leftSize: 14,
leftColor: '#ffffff'
}}
title={"自定义样式"}/>
<Text style={style.title}>属性说明</Text>
<Table
headerData={headerData}
data={attributeData}/>
<Text style={style.title}>事件说明</Text>
<Table
headerData={headerData}
data={eventData}/>
<Text style={style.title}>图标属性说明</Text>
<Table
headerData={headerData}
data={iconData}/>
</Page>
)
}
}
export default ToolBarPage;ToolBar Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | style | toolBar整体样式 | Object | -- | | fontStyle | 标题样式 | Object | -- | | bgColor | toolBar背景颜色 | String | #ffffff | | title | 标题名称 | String | -- | | fontWeight | 标题粗细 | String | bold | | color | 标题颜色 | String | #464646 | | fontSize | 标题大小 | String/Number | 20 | | isShowBack | 是否显示返回按钮 | Boolean | true | | isShowEditor | 是否显示编辑按钮 | Boolean | true | | iconAttr | 图标配置 | Object | 具体见下方图标配置 |
iconAttr Attributes
| 属性 | 说明 | 类型 | 默认值 | | :------: | :--------------: | :------: | :------: | | leftIconName | 左边图标名称，详见icon组件 | String | weibiaoti-- | | rightIconName | 右边图标名称，详见icon组件 | String | weibiaoti--1 | | leftSize | 左边图标大小 | Number | 24 | | rightSize | 右边图标大小 | Number | 24 | | leftColor | 左边图标颜色 | String | #464646 | | rightColor | 右边图标颜色 | String | #464646 |
ToolBar Events
| 事件名称 | 说明 | 回调参数 | | :------: | :--------------: | :------: | | onBack | 返回按钮回调 | -- | | onEditor | 编辑按钮回调 | -- |