Authored by 孙凯

guang detail review by gaijianqiu

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 });
  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 +});
  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 />