guang detail review by gaijianqiu
Showing
4 changed files
with
156 additions
and
7 deletions
1 | 'use strict'; | 1 | 'use strict'; |
2 | 2 | ||
3 | import React, {Component} from 'react'; | 3 | import React, {Component} from 'react'; |
4 | +import Immutable, {Map} from 'immutable'; | ||
5 | +import DetailBrand from './DetailBrand'; | ||
6 | +import OtherArticle from './OtherArticle'; | ||
7 | + | ||
4 | import ReactNative, { | 8 | import ReactNative, { |
5 | View, | 9 | View, |
6 | Text, | 10 | Text, |
@@ -19,17 +23,69 @@ export default class Detail extends Component { | @@ -19,17 +23,69 @@ export default class Detail extends Component { | ||
19 | 23 | ||
20 | constructor(props) { | 24 | constructor(props) { |
21 | super(props); | 25 | super(props); |
26 | + this.renderRow = this.renderRow.bind(this); | ||
27 | + | ||
28 | + this.dataSource = new ListView.DataSource({ | ||
29 | + rowHasChanged: (r1, r2) => !Immutable.is(r1, r2), | ||
30 | + sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2), | ||
31 | + }); | ||
32 | + } | ||
22 | 33 | ||
34 | + shouldComponentUpdate(nextProps){ | ||
23 | 35 | ||
36 | + if (Immutable.is(nextProps.resource, this.props.resource)) { | ||
37 | + return false; | ||
38 | + } else { | ||
39 | + return true; | ||
40 | + } | ||
24 | } | 41 | } |
25 | 42 | ||
43 | + renderRow(rowData,sectionID,rowID,highlightRow) { | ||
44 | + | ||
45 | + if (sectionID == 'detailList') { | ||
46 | + return ( | ||
47 | + <Text>aaaaaa</Text> | ||
48 | + ); | ||
49 | + }else if (sectionID == 'detailBrand') { | ||
50 | + return ( | ||
51 | + <DetailBrand resource={rowData}/> | ||
52 | + ); | ||
53 | + }else if (sectionID == 'detailOtherArticle') { | ||
54 | + return ( | ||
55 | + <OtherArticle resource={rowData}/> | ||
56 | + ); | ||
57 | + } | ||
58 | + return null; | ||
59 | + } | ||
26 | 60 | ||
27 | render() { | 61 | render() { |
28 | 62 | ||
63 | + let {resource} = this.props; | ||
64 | + let { | ||
65 | + articleId, | ||
66 | + article, | ||
67 | + author, | ||
68 | + content, | ||
69 | + brand, | ||
70 | + otherArticle, | ||
71 | + weixin, | ||
72 | + } = resource; | ||
73 | + let list = content?content.get('data'):[]; | ||
74 | + | ||
75 | + let dataSource = { | ||
76 | + detailList: list.size?list.toArray():[], | ||
77 | + detailBrand: [brand], | ||
78 | + detailOtherArticle: [otherArticle], | ||
79 | + }; | ||
80 | + | ||
29 | return ( | 81 | return ( |
30 | - <View style={styles.container}> | ||
31 | - <Text>aaaaaa</Text> | ||
32 | - </View> | 82 | + <ListView |
83 | + contentContainerStyle={styles.contentContainer} | ||
84 | + enableEmptySections={true} | ||
85 | + showsVerticalScrollIndicator={false} | ||
86 | + dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)} | ||
87 | + renderRow={this.renderRow} | ||
88 | + /> | ||
33 | ); | 89 | ); |
34 | } | 90 | } |
35 | } | 91 | } |
@@ -41,7 +97,7 @@ let styles = StyleSheet.create({ | @@ -41,7 +97,7 @@ let styles = StyleSheet.create({ | ||
41 | flex: 1, | 97 | flex: 1, |
42 | backgroundColor: '#f0f0f0', | 98 | backgroundColor: '#f0f0f0', |
43 | }, | 99 | }, |
44 | - contentContainer: { | 100 | + contentContainer:{ |
45 | 101 | ||
46 | }, | 102 | }, |
47 | }); | 103 | }); |
js/guang/components/detail/DetailBrand.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import React from 'react'; | ||
4 | +import ReactNative from 'react-native'; | ||
5 | +import Immutable, {Map} from 'immutable'; | ||
6 | + | ||
7 | +const { | ||
8 | + AppRegistry, | ||
9 | + StyleSheet, | ||
10 | + Text, | ||
11 | + View, | ||
12 | + Image, | ||
13 | + ListView, | ||
14 | + Dimensions, | ||
15 | + TouchableOpacity, | ||
16 | +} = ReactNative; | ||
17 | + | ||
18 | + | ||
19 | +export default class DetailBrand extends React.Component { | ||
20 | + constructor(props) { | ||
21 | + super(props); | ||
22 | + } | ||
23 | + | ||
24 | + shouldComponentUpdate(nextProps){ | ||
25 | + if (Immutable.is(nextProps.resource, this.props.resource)) { | ||
26 | + return false; | ||
27 | + } else { | ||
28 | + return true; | ||
29 | + } | ||
30 | + } | ||
31 | + | ||
32 | + | ||
33 | + render() { | ||
34 | + return( | ||
35 | + <Text>bbbbbbb</Text> | ||
36 | + ); | ||
37 | + return null; | ||
38 | + } | ||
39 | +}; | ||
40 | + | ||
41 | + | ||
42 | +let {width, height} = Dimensions.get('window'); | ||
43 | + | ||
44 | +let styles = StyleSheet.create({ | ||
45 | + | ||
46 | +}); |
js/guang/components/detail/OtherArticle.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import React from 'react'; | ||
4 | +import ReactNative from 'react-native'; | ||
5 | +import Immutable, {Map} from 'immutable'; | ||
6 | + | ||
7 | +const { | ||
8 | + AppRegistry, | ||
9 | + StyleSheet, | ||
10 | + Text, | ||
11 | + View, | ||
12 | + Image, | ||
13 | + ListView, | ||
14 | + Dimensions, | ||
15 | + TouchableOpacity, | ||
16 | +} = ReactNative; | ||
17 | + | ||
18 | + | ||
19 | +export default class OtherArticle extends React.Component { | ||
20 | + constructor(props) { | ||
21 | + super(props); | ||
22 | + } | ||
23 | + | ||
24 | + shouldComponentUpdate(nextProps){ | ||
25 | + if (Immutable.is(nextProps.resource, this.props.resource)) { | ||
26 | + return false; | ||
27 | + } else { | ||
28 | + return true; | ||
29 | + } | ||
30 | + } | ||
31 | + | ||
32 | + | ||
33 | + render() { | ||
34 | + return( | ||
35 | + <Text>ccccccc</Text> | ||
36 | + ); | ||
37 | + return null; | ||
38 | + } | ||
39 | +}; | ||
40 | + | ||
41 | + | ||
42 | +let {width, height} = Dimensions.get('window'); | ||
43 | + | ||
44 | +let styles = StyleSheet.create({ | ||
45 | + | ||
46 | +}); |
@@ -77,14 +77,15 @@ class DetailContainer extends Component { | @@ -77,14 +77,15 @@ class DetailContainer extends Component { | ||
77 | } | 77 | } |
78 | 78 | ||
79 | render() { | 79 | render() { |
80 | - let {sale} = this.props; | 80 | + let {detail} = this.props; |
81 | + | ||
81 | return ( | 82 | return ( |
82 | <View style={styles.container}> | 83 | <View style={styles.container}> |
83 | <Detail | 84 | <Detail |
84 | ref={(c) => { | 85 | ref={(c) => { |
85 | - this.sale = c; | 86 | + this.detail = c; |
86 | }} | 87 | }} |
87 | - data={sale} | 88 | + resource={detail} |
88 | onRefresh={this._onRefresh} | 89 | onRefresh={this._onRefresh} |
89 | onEndReached={this._onEndReached} | 90 | onEndReached={this._onEndReached} |
90 | /> | 91 | /> |
-
Please register or login to post a comment