ContainerView.js
2.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, {Component} from 'react';
import {Text, View,} from "react-native";
// 兼容处理ios/android对于Text组件文字垂直样式设定的差异
import {getTextAlignVerticalStyle} from "../utils/Common";
// 默认高度
const defaultHeight = (30);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);
/**
布局容器组件(type:'CONTAINER')
*/
export default class ContainerView extends Component {
// 构造方法
constructor(props) {
super(props);
this.state = {}
// 传入参数
this.attrData = this.props.attrData;
// this.onDeleterListener = this.props.onDeleterListener;
}
// 绘制UI
render() {
/*
name:标题
code:代码编号
type:控件类型(CONTAINER)
description:描述
isRequired:是否必须
isPreview:是否预览
*/
let {name, code, type, description, isRequired, isPreview} = this.attrData;
// 是否显示分隔线
let {showSplitLine} = JSON.parse(this.attrData.data);
// ----xxxx-----这样一个样式
return (
// 最外部的样式区域
<View style={{
// 宽度
width: '100%',
// 上内边距
paddingTop: VPading,
// 左内边距
paddingLeft: 20,
// 高度
height: defaultHeight,
// 背景色
backgroundColor: '#fff'
}}>
<View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
{/*文字前的分隔线*/}
{showSplitLine && <View style={{height: 1, width: 20, backgroundColor: '#eee'}}></View>}
{/*文字显示区域*/}
<Text style={[{
fontSize: 14,
color: 'rgb(51,51,51)',
marginHorizontal: 4
}, getTextAlignVerticalStyle(defaultHeight)]}>{name || ''}</Text>
{/*文字后的分隔线*/}
{showSplitLine && <View style={{height: 1, flex: 1, backgroundColor: '#eee'}}></View>}
</View>
</View>
);
}
}