TabDetailView.js
2.1 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
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
Image,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {Row, Rows, Table} from 'react-native-table-component';
/**
* 表格/明细 组件
*/
export default class TabDetailView extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
tableData: [
['1', '2', '3', '4'],
['a', 'b', 'c', 'd'],
['1', '2', '3', '456\n789'],
['a', 'b', 'c', 'd']
]
};
this.attrData = this.props.attrData;
}
render() {
const options = this.state;
let {name, code, type, description, isRequired, isPreview} = this.attrData;
// 按钮文本 // 固定：list=列表|table=表格 // 显示合计
let {buttonText, showCount} = JSON.parse(this.attrData.data);
let tabType = this.attrData.data.type;
return(
<View style={{width: '100%', backgroundColor: 'white', paddingHorizontal: 5, paddingVertical: 10}}>
<View style={{flexDirection: 'row'}}>
{isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
{!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name}</Text>
</View>
<Table borderStyle={{borderWidth: 1, borderColor: '#f0f'}}>
<Row data={options.tableHead} style={styles.head} textStyle={styles.text}/>
<Rows data={options.tableData} textStyle={styles.text}/>
</Table>
<TouchableOpacity style={{width: '100%', height: 44, alignItems: 'center', justifyContent: 'center'}}>
<Text>{'+' + buttonText}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
})