'首页组件分离,flatlist改为sectionlist'

pages/components/ScrollRow.js

@@ -1,7 +1,7 @@
 /** 
  * @param: 
- *      width: 每一个item宽度
- *      height: 每一个item高度
+ *      itemWidth: 每一个图片宽度
+ *      itemHeight: 每一个图片高度
  *      data:  数据 Arrary
  */
 
@@ -10,49 +10,105 @@ import {
     StyleSheet,
     Text,
     View,
+    FlatList,
+    TouchableOpacity,
+    Image
 } from "react-native";
 import Dimensions from '../utils/dimensions'
 
-const styles = StyleSheet.create({
-
-})
-
 export default class ScrollRow extends Component {
 
-    
+
     render() {
         return (
             <FlatList
 
-                data={[{ title: 'Title Text', key: 'item1' }]}
+                data={[{
+                    summary: 'Title Text', key: 'item1', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }, {
+                    summary: 'Title Text', key: 'item2', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }, {
+                    summary: 'Title Text', key: 'item3', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }, {
+                    summary: 'Title Text', key: 'item4', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }, {
+                    title: 'Title Text', key: 'item5', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }, {
+                    summary: 'Title Text', key: 'item6', icon:
+                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
+                }]}
                 horizontal={true}
-                renderItem={({ item, separators }) => (
-                    <TouchableOpacity
-                        style={{
-                            flex: 1,
-                            height: "100%",
-                            width: this.getWindowWidth() * 0.9
+                renderItem={({ item, separators }) => this.renderItem(item, separators)}
+            />
+        )
+    }
+
+    renderItem(item, separators) {
+        return (
+            <TouchableOpacity
+                style={{
+                    // flex: 1,
+                    height: this.props.itemHeight,
+                    width: this.props.itemWidth,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginLeft: 9,
+                }}
+                onPress={() => {
+                    alert(item.title);
+                }}
+                activeOpacity={1}
+            >
+                <View style={{
+                    height: this.props.itemHeight,
+                    width: this.props.itemWidth,
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    // flex: 1,
+                }}>
+                    <Image
+                        source={{
+                            uri: item.icon
                         }}
-                        onPress={() => {
-                            alert(item.name);
+                        style={{
+                            borderRadius: 10,
+                            width: this.props.itemWidth,
+                            height: this.props.itemHeight,
+                            marginBottom: 6,
                         }}
-                        activeOpacity={1}
-                    >
-                        <Image
-                            source={{
-                                uri: item.icon
-                            }}
-                            style={{
-                                height: "100%",
-                                width: "100%",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                borderRadius: 20
-                            }}
-                        />
-                    </TouchableOpacity>
-                )}
-            />
+                    />
+                    {item.summary
+                        ?
+                        <Text style={styles.itemSummary}>
+                            {item.summary}
+                        </Text>
+                        :
+                        null
+                    }
+
+                </View>
+
+            </TouchableOpacity>
         )
     }
 }
+
+const styles = StyleSheet.create({
+    wrapper: {
+
+    },
+    itemSummary: {
+        // flex:1,
+        width: '100%',
+        height: 20,
+        alignItems: 'center',
+        justifyContent: "flex-start",
+        color: '#151515',
+        fontSize: 13,
+    }
+})

pages/components/Swiper.js

@@ -65,10 +65,12 @@ const styles = StyleSheet.create({
     width: Dimensions.getDp(352),
     height: Dimensions.getDp(153),
     marginHorizontal: Dimensions.getDp(3),
+    zIndex: 1
   },
   img: {
     width: Dimensions.getDp(352),
     height: Dimensions.getDp(153),
     borderRadius: Dimensions.getDp(10),
+    zIndex: 1
   }
 });

pages/components/TopicTitle.js

@@ -3,6 +3,7 @@
  *      title: 标题
  *      summary: 标题下的灰字简介
  *      background: 背景色
+ *      tubeColor: 左边小长条背景色
  *      ifTubeShow: 左侧icon是否显示,默认不显示  boolean
  */
 
@@ -36,7 +37,7 @@ const styles = StyleSheet.create({
         width: 4,
         height: 14,
         marginRight: 6,
-        backgroundColor: '#ffd101'
+        backgroundColor: 'red'
     },
     title: {
         color: '#373737',
@@ -49,7 +50,9 @@ const styles = StyleSheet.create({
 })
 
 export default class TopicTitle extends Component {
-
+    constructor(props) {
+        super(props);
+    }
     render() {
         let line2 = <View></View>;
         if (this.props.summary) {
@@ -61,10 +64,28 @@ export default class TopicTitle extends Component {
         if (this.props.ifTubeShow) {
             tube = 1
         }
+        const tubeColor = this.props.tubeColor ? this.props.tubeColor : '#ffd101';
+        console.log('背景色', this.props)
         return (
-            <View style={styles.wrapper}>
-                <View style={styles.line1}>
-                    <View style={this.props.ifTubeShow ? styles.tube : null}></View>
+            <View
+                style={{
+                    width: Dimensions.width,
+                    height: this.props.background ? 45 : 66,
+                    paddingLeft: 14,
+                    paddingTop: this.props.background ? 0: 20,
+                    // justifyContent: "center",
+                    flexDirection: 'column',
+                    backgroundColor: this.props.background ? this.props.background : '#fff'
+                }}>
+                <View 
+                style={styles.line1}>
+                    <View
+                        style={this.props.ifTubeShow ? {
+                            width: 4,
+                            height: 14,
+                            marginRight: 6,
+                            backgroundColor: tubeColor
+                        } : null}></View>
                     <Text style={styles.title}>{this.props.title}</Text>
                 </View>
                 {line2}