添加 goods_group Ui review by zhanglixia

@@ -9,6 +9,7 @@ import DetailText from './DetailText';
 import GoodsCell from './GoodsCell';
 import Header from './Header';
 import MoreLink from './MoreLink';
+import GoodsGroupHeader from './GoodsGroupHeader';
 
 import ReactNative, {
     View,
@@ -74,6 +75,10 @@ export default class Detail extends Component {
                 return (
                     <Text>weixinPublic</Text>
                 );
+            }else if (template_name == 'goods_group') {
+                return (
+                    <GoodsGroupHeader resource={rowData}/>
+                );
             }else if (template_name == 'goods') {
                 return (
                     <GoodsCell resource={rowData}/>
@@ -108,7 +113,7 @@ export default class Detail extends Component {
             weixin,
         } = resource;
         let list = content?content.get('data'):[];
-console.log(list.toJS());
+
         let dataSource = {
             detailList: list.size?list.toArray():[],
             detailBrand: [brand],

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import {getSlicedUrl} from '../../../classify/utils/Utils';
+
+const {
+    View,
+    Text,
+    ListView,
+    TouchableOpacity,
+    Dimensions,
+    StyleSheet,
+	Image,
+} = ReactNative;
+
+
+export default class GoodsGroupHeader extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this._renderRow = this._renderRow.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1.key != r2.key,
+        });
+
+        this.state = {
+            selectedIndex: 0,
+        };
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (nextProps.dataSource == this.props.dataSource) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    _renderRow(rowData, sectionID, rowID) {
+
+
+		let cover = rowData.get('cover');
+		let url = getSlicedUrl(cover.get('cover'), 640, 640, 2);
+		let borderWidth = 0;
+		if (this.state.selectedIndex == rowID) {
+			borderWidth = 1;
+		}
+        return (
+            <View style={{backgroundColor: 'white'}}>
+                <View key={'row' + rowID} style={styles.rowContainer}>
+					<TouchableOpacity onPress={() => {
+	                    // this.props.onPressFilter && this.props.onPressFilter(rowID);
+	                }}>
+						<View style={{width: itemW - 20,height: itemH - 20,borderColor: 'black',borderWidth: borderWidth}}>
+							<Image source={{uri: url}} style={{width: itemW - 20 - 2*borderWidth,height: itemH - 20 - 2*borderWidth,backgroundColor:'white',}} resizeMode={'contain'}></Image>
+						</View>
+					</TouchableOpacity>
+                </View>
+            </View>
+        );
+    }
+
+    render() {
+		let {resource} = this.props;
+		let list = resource.get('data');
+		if (!list || list.size == 0) {
+			return null;
+		}
+		let scrollEnabled = list.size > 5?true:false;
+        return (
+            <View style={[styles.container]}>
+                <ListView
+                    contentContainerStyle={[styles.contentContainer]}
+                    enableEmptySections={true}
+                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
+                    renderRow={this._renderRow}
+                    scrollEnabled={scrollEnabled}
+                    scrollsToTop={false}
+                />
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+let itemW = Math.ceil(width / 5);
+let itemH = itemW * (50/40);
+
+let styles = StyleSheet.create({
+    container: {
+        width: width,
+        height: itemH + 20,
+		backgroundColor:'white',
+    },
+    contentContainer: {
+        flexDirection: 'row',
+    },
+    rowContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: itemW,
+        height: itemH + 20,
+		backgroundColor:'white',
+    },
+});