StockStats.js
3.13 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
'use strict';
import React, {Component} from 'react';
import PlainTextSection from './PlainTextSection';
import Placeholder from './Placeholder';
import {
StyleSheet,
View,
Text,
ListView,
Image,
Dimensions,
TouchableHighlight,
} from 'react-native';
export default class StockStats extends Component {
constructor(props) {
super (props);
this.ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this._renderRow = this._renderRow.bind(this);
}
_renderRow(rowData, sectionID, rowID) {
return (
<TouchableHighlight underlayColor={'white'} onPress={() => {}}>
<View style={styles.row}>
<Image source={{uri: rowData.thumb}} style={styles.thumb}/>
<View style={styles.detail}>
<Text style={styles.brand}>{rowData.brand}</Text>
<Text style={styles.product}>{rowData.product}</Text>
<Text style={styles.brand}>{'厂家编号：' + rowData.vendor + ' sku：' + rowData.sku}</Text>
<Text style={styles.product}>{'进货价：' + rowData.importPrice + ' 库存：' + rowData.stockNum}</Text>
</View>
</View>
</TouchableHighlight>
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.dateContainer}>
<Image source={require('../images/date.png')}/>
<Text style={styles.date}>{this.props.section1}</Text>
</View>
<Placeholder />
<PlainTextSection content={this.props.section2} />
<Placeholder />
<ListView
dataSource={this.ds.cloneWithRows(this.props.section3)}
renderRow={this._renderRow}
renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
onEndReachedThreshold={-10}
onEndReached={this.props.requestData}
enableEmptySections={true} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
dateContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 45,
backgroundColor: 'white',
},
date: {
fontSize: 14,
color: '#444444',
textAlign: 'center',
marginLeft: 10,
},
separator: {
height: 1,
},
row: {
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: 'white',
alignItems: 'center',
},
detail: {
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
paddingLeft: 10,
},
thumb: {
width: 60,
height: 80,
},
brand: {
color: '#B0B0B0',
fontSize: 12,
},
product: {
color: '#444444',
fontSize: 12,
},
});