guang detail review by gaijianqiu

 'use strict';
 'use strict';
 
 
 import React, {Component} from 'react';
 import React, {Component} from 'react';
+import Immutable, {Map} from 'immutable';
+import DetailBrand from './DetailBrand';
+import OtherArticle from './OtherArticle';
+
 import ReactNative, {
 import ReactNative, {
     View,
     View,
     Text,
     Text,
@@ -19,17 +23,69 @@ export default class Detail extends Component {
 
 
     constructor(props) {
     constructor(props) {
         super(props);
         super(props);
+        this.renderRow = this.renderRow.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
+        });
+    }
 
 
+    shouldComponentUpdate(nextProps){
 
 
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
     }
     }
 
 
+    renderRow(rowData,sectionID,rowID,highlightRow) {
+
+        if (sectionID == 'detailList') {
+            return (
+                <Text>aaaaaa</Text>
+            );
+        }else if (sectionID == 'detailBrand') {
+            return (
+                <DetailBrand resource={rowData}/>
+            );
+        }else if (sectionID == 'detailOtherArticle') {
+            return (
+                <OtherArticle resource={rowData}/>
+            );
+        }
+        return null;
+    }
 
 
     render() {
     render() {
 
 
+        let {resource} = this.props;
+        let {
+            articleId,
+        	article,
+            author,
+            content,
+            brand,
+            otherArticle,
+            weixin,
+        } = resource;
+        let list = content?content.get('data'):[];
+
+        let dataSource = {
+            detailList: list.size?list.toArray():[],
+            detailBrand: [brand],
+            detailOtherArticle: [otherArticle],
+        };
+
         return (
         return (
-            <View style={styles.container}>
-                <Text>aaaaaa</Text>
-            </View>
+            <ListView
+                contentContainerStyle={styles.contentContainer}
+                enableEmptySections={true}
+                showsVerticalScrollIndicator={false}
+                dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
+                renderRow={this.renderRow}
+            />
         );
         );
     }
     }
 }
 }
@@ -41,7 +97,7 @@ let styles = StyleSheet.create({
         flex: 1,
         flex: 1,
         backgroundColor: '#f0f0f0',
         backgroundColor: '#f0f0f0',
     },
     },
-    contentContainer: {
+    contentContainer:{
 
 
     },
     },
 });
 });

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Immutable, {Map} from 'immutable';
+
+const {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ListView,
+  Dimensions,
+  TouchableOpacity,
+} = ReactNative;
+
+
+export default class DetailBrand extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+
+    render() {
+		return(
+			<Text>bbbbbbb</Text>
+		);
+		return null;
+    }
+};
+
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+
+});

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Immutable, {Map} from 'immutable';
+
+const {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ListView,
+  Dimensions,
+  TouchableOpacity,
+} = ReactNative;
+
+
+export default class OtherArticle extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+
+    render() {
+		return(
+			<Text>ccccccc</Text>
+		);
+		return null;
+    }
+};
+
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+
+});

@@ -50,7 +50,7 @@ class DetailContainer extends Component {
         this._onRefresh = this._onRefresh.bind(this);
         this._onRefresh = this._onRefresh.bind(this);
         this._onEndReached = this._onEndReached.bind(this);
         this._onEndReached = this._onEndReached.bind(this);
 
 
-        
+
     }
     }
 
 
     componentDidMount() {
     componentDidMount() {
@@ -66,25 +66,26 @@ class DetailContainer extends Component {
 
 
     _onRefresh() {
     _onRefresh() {
         InteractionManager.runAfterInteractions(() => {
         InteractionManager.runAfterInteractions(() => {
-            
+
         });
         });
     }
     }
 
 
     _onEndReached() {
     _onEndReached() {
         InteractionManager.runAfterInteractions(() => {
         InteractionManager.runAfterInteractions(() => {
-            
+
         });
         });
     }
     }
 
 
     render() {
     render() {
-        let {sale} = this.props;
+        let {detail} = this.props;
+
         return (
         return (
             <View style={styles.container}>
             <View style={styles.container}>
                 <Detail
                 <Detail
                     ref={(c) => {
                     ref={(c) => {
-                        this.sale = c;
+                        this.detail = c;
                     }}
                     }}
-                    data={sale}
+                    resource={detail}
                     onRefresh={this._onRefresh}
                     onRefresh={this._onRefresh}
                     onEndReached={this._onEndReached}
                     onEndReached={this._onEndReached}
                 />
                 />