增加了分割线楼层、楼层顶部标题cell。review by yuliang。

+'use strict';
+
+import React, {Component} from 'react';
+
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
+
+export default class HeadTitleCell extends Component{
+
+
+	constructor(props) {
+	  super(props);
+	}
+
+
+	render(){
+		return(
+			<View style={styles.container}>
+				<Text style={styles.headerText}>潮流`优选</Text>
+				<Image style={styles.headerMore} source={require("../../images/head_title_more.png")}/>
+			</View>
+        );
+	}
+
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+
+let styles = StyleSheet.create({
+
+	container: {
+        width: width,
+		height: 40 * DEVICE_WIDTH_RATIO,
+        backgroundColor: '#f0f0f0',
+        flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+    },
+
+
+    headerText:{
+    	flex: 1,
+		fontSize: 14 * DEVICE_WIDTH_RATIO,
+		color: '#444444',
+		textAlign: 'center',
+
+	},
+
+	headerMore:{
+		marginRight: 10 * DEVICE_WIDTH_RATIO,
+	},
+
+});
+

+'use strict';
+
+import React, {Component} from 'react';
+import SlicedImage from '../../../common/components/SlicedImage';
+
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    ListView,
+    StyleSheet,
+    Dimensions,
+    TouchableOpacity,
+} from 'react-native';
+import Immutable from 'immutable';
+
+/**
+ *   这个楼层还没有做，涉及到几个组合的，后面再做
+ *
+ **/
+export default class ActivityProductFloor extends Component{
+
+
+	constructor(props) {
+	  super(props);
+	
+	  this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
+	  this.renderHeader = this.renderHeader.bind(this);
+	  this.renderRow = this.renderRow.bind(this);
+
+	}
+
+	renderHeader(){
+
+		let {title} = this.props;
+
+		return(
+			<View style={styles.headerContainer}>
+				<Text style={styles.headerText}>{title}</Text>
+				<TouchableOpacity style={styles.headerMore} activeOpacity={1} onPress={() => this.props.onPressCategoryBMore && this.props.onPressCategoryBMore()}>
+					<Text style={styles.headerMoreText}>MORE</Text>
+					<Image style={styles.headerMoreArrow} source={require("../../images/category_b_arrow.png")}/>
+				</TouchableOpacity>
+				<View style={styles.headerLine}/>
+			</View>
+		);
+	}
+
+
+
+	renderRow(rowData, sectionID, rowID, highlightRow){
+
+		if (!rowData || rowData.length == 0) {
+            return null;
+        }
+
+		let imageUrl = SlicedImage.getSlicedUrl(rowData.get("default_images"), 98, 128, 2);
+		// let categoryName = rowData.get("category_name");
+
+		//数据类型，纯文字型和图片型，列表中会出现纯文本的情况,比如MORE
+		let dataType = rowData.get("data_type");
+
+		if(dataType && dataType == 'text')
+			return (
+	            <TouchableOpacity activeOpacity={1}  onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
+	                <View style={styles.rowContainer}>
+                		<Text style={styles.rowText} numberOfLines={1}>{rowData.get("show_category_name")}</Text>
+	                </View>
+	            </TouchableOpacity>
+	        );
+		else{
+			return (
+	            <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
+	                <View style={styles.rowContainer}>
+                		<Image style={styles.rowThumbnail} source={{uri: imageUrl}}/>
+                		<View style={styles.rowTextContainer}><Text style={styles.rowText} numberOfLines={2}>{rowData.get("category_name")}</Text></View>
+	                </View>
+	            </TouchableOpacity>
+	        );
+		}
+		
+	}
+
+
+	render(){
+		let {data} = this.props;
+
+		return(
+			<View style={styles.container}>
+				<ListView
+					pageSize={3}
+	                contentContainerStyle={styles.contentContainer}
+	                dataSource={this.dataSource.cloneWithRows(data)}
+	                enableEmptySections={true}
+	                renderRow={this.renderRow}
+	                renderHeader={this.renderHeader}
+	            />
+	        </View>
+        );
+	}
+
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+
+let styles = StyleSheet.create({
+
+	container: {
+        flexWrap: 'wrap',
+    },
+
+	contentContainer: {
+		flexDirection: 'row',
+        flexWrap: 'wrap',
+		alignItems:'center',
+		backgroundColor: '#f5f7f6',
+	},
+
+	headerContainer:{
+		width: 210 * DEVICE_WIDTH_RATIO,
+		height: 40 * DEVICE_WIDTH_RATIO,
+		paddingLeft: 5 * DEVICE_WIDTH_RATIO,
+		paddingRight: 5 * DEVICE_WIDTH_RATIO,
+		backgroundColor: '#ffffff',
+	},
+
+	headerText:{
+		position: 'absolute',
+		left: 5 * DEVICE_WIDTH_RATIO,
+		bottom: 11 * DEVICE_WIDTH_RATIO,
+		fontSize: 12 * DEVICE_WIDTH_RATIO,
+		color: '#B0B0B0',
+	},
+
+	headerMore:{
+		position: 'absolute',
+		right: 5 * DEVICE_WIDTH_RATIO,
+		bottom: 11 * DEVICE_WIDTH_RATIO,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+
+	headerMoreText:{
+		fontSize: 10 * DEVICE_WIDTH_RATIO,
+		color: '#B0B0B0',
+		marginRight: 5 * DEVICE_WIDTH_RATIO,
+	},
+
+	headerMoreArrow: {
+        width: 4 * DEVICE_WIDTH_RATIO,
+        height: 7 * DEVICE_WIDTH_RATIO,
+    },
+
+	headerLine:{
+		width: 200 * DEVICE_WIDTH_RATIO,
+		height: 0.5 * DEVICE_WIDTH_RATIO,
+		backgroundColor: '#E0E0E0',
+		left: 0,
+		top: 35 * DEVICE_WIDTH_RATIO,
+	},
+
+	rowContainer:{
+		width: 70 * DEVICE_WIDTH_RATIO,
+		height: 93 * DEVICE_WIDTH_RATIO,
+		paddingLeft: 5 * DEVICE_WIDTH_RATIO,
+		paddingRight: 5 * DEVICE_WIDTH_RATIO,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: '#f5f7f6',
+	},
+
+	rowThumbnail:{
+		width: 48 * DEVICE_WIDTH_RATIO,
+		height: 65 * DEVICE_WIDTH_RATIO,
+	},
+
+	rowTextContainer:{
+		width: 53 * DEVICE_WIDTH_RATIO,
+		height: 28 * DEVICE_WIDTH_RATIO,
+		marginTop: 2 * DEVICE_WIDTH_RATIO,
+	},
+
+	rowText:{
+		fontSize: 9 * DEVICE_WIDTH_RATIO,
+		color: '#B0B0B0',
+		textAlign: 'center',
+	},
+
+
+});
+

+'use strict';
+
+import React, {Component} from 'react';
+import SlicedImage from '../../../common/components/SlicedImage';
+
+
+import ReactNative, {
+    View,
+    Image,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
+
+/**
+ *   分割线楼层
+ **/
+export default class DivideImage extends Component{
+
+
+	constructor(props) {
+	  super(props);
+	}
+
+
+	render(){
+
+		//测试数据
+		let rowData = {"template_name":"divideImage","data":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/11/24/13/01d93f236d113d1a9f9f93d2163a6b5080.jpg?imageView2/{mode}/w/{width}/h/{height}","alt":"","url":""}],"template_intro":"分隔图","template_id":"113991"}
+		let url = rowData.data[0].src;
+
+		let imageUrl = SlicedImage.getSlicedUrl(url, width, height, 2);
+
+		return(
+			<View style={styles.container}>
+				<Image style={styles.immage} key={imageUrl} source={{uri: imageUrl}}/>
+			</View>
+        );
+	}
+
+};
+
+let {width} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+let height = 15 * DEVICE_WIDTH_RATIO;
+
+let styles = StyleSheet.create({
+
+	container: {
+        width: width,
+		height: height,
+		backgroundColor: "#e5e5e5",
+    },
+
+    immage: {
+        width: width,
+		height: height,
+    },
+
+});
+