'组建分离'

App.js

@@ -35,7 +35,7 @@ const RootNavigator = createStackNavigator(
     MainPage: { screen: MainPage }
   },
   {
-    initialRouteName: "SchoolAge",
+    initialRouteName: "MainPage",
     headerMode: "none"
   }
 );

package-lock.json

@@ -6692,6 +6692,36 @@
         "scheduler": "^0.13.3"
       }
     },
+    "react-addons-shallow-compare": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npm.taobao.org/react-addons-shallow-compare/download/react-addons-shallow-compare-15.6.2.tgz",
+      "integrity": "sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=",
+      "requires": {
+        "fbjs": "^0.8.4",
+        "object-assign": "^4.1.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "fbjs": {
+          "version": "0.8.17",
+          "resolved": "http://registry.npm.taobao.org/fbjs/download/fbjs-0.8.17.tgz",
+          "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+          "requires": {
+            "core-js": "^1.0.0",
+            "isomorphic-fetch": "^2.1.1",
+            "loose-envify": "^1.0.0",
+            "object-assign": "^4.1.0",
+            "promise": "^7.1.1",
+            "setimmediate": "^1.0.5",
+            "ua-parser-js": "^0.7.18"
+          }
+        }
+      }
+    },
     "react-art": {
       "version": "16.8.6",
       "resolved": "https://registry.npm.taobao.org/react-art/download/react-art-16.8.6.tgz",
@@ -6966,6 +6996,15 @@
       "resolved": "https://registry.npm.taobao.org/react-native-screens/download/react-native-screens-1.0.0-alpha.22.tgz",
       "integrity": "sha1-ehIDd7Uqqbu5TQuFQaAUAmvpKJs="
     },
+    "react-native-snap-carousel": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npm.taobao.org/react-native-snap-carousel/download/react-native-snap-carousel-3.7.5.tgz",
+      "integrity": "sha1-cXJFbUCrkWFSMFXrMC+bA7JEJAo=",
+      "requires": {
+        "prop-types": "^15.6.1",
+        "react-addons-shallow-compare": "15.6.2"
+      }
+    },
     "react-native-swiper": {
       "version": "1.5.14",
       "resolved": "https://registry.npm.taobao.org/react-native-swiper/download/react-native-swiper-1.5.14.tgz",

pages/components/Header.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
     height: 72,
     flex: 1,
     alignItems: "center",
-    backgroundColor: 'red',
+    // backgroundColor: 'red',
     justifyContent: "center",
     flexDirection: "row"
   },

pages/components/MainPage.js

@@ -25,9 +25,9 @@ import Swiper from "react-native-swiper";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import Header from "./Header";
-import Swipers from "./Swiper";
-import Dimensions from '../utils/dimensions'
-
+import MySwiper from "./Swiper";
+import Dimensions from '../utils/dimensions';
+import TopicTitle from './TopicTitle';
 
 export default class MainPage extends BasePage {
   constructor(props) {
@@ -43,7 +43,7 @@ export default class MainPage extends BasePage {
       <View style={{ flex: 1 }}>
 
         <FlatList
-          style={{ flex: 1 }}
+          style={{ flex: 1, backgroundColor: 'f0f1f5' }}
           ref="_flatlist"
           horizontal={false}
           removeClippedSubviews={false}
@@ -267,9 +267,9 @@ export default class MainPage extends BasePage {
           />
           <View
             style={styles.rightBtn}
-          > 
-            <Image 
-              source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
+          >
+            <Image
+              source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
               style={styles.rightBtnIcon}
             />
             <Text
@@ -284,180 +284,108 @@ export default class MainPage extends BasePage {
     );
   }
 
+  getSwiperElement() {
+    return (
+      <View
+        style={{
+          height: 193,
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <View
+          style={{
+            // width: Dimensions.width,
+            width: Dimensions.getDp(358),
+            height: Dimensions.getDp(150),
+            justifyContent: "center",
+            overflow: 'hidden'
+          }}
+        >
+          <MySwiper
+            autoplay={true}
+            loop={true}
+            ifShowMiddle={true}
+          />
+        </View>
+      </View>
+    );
+  }
 
-  loadFlatItem(data) {
-    switch (data.typea) {
-      // case 0:
-      //   return (
-      //     <View
-      //       style={{
-      //         height: 50,
-      //         width: "100%",
-      //         justifyContent: "center",
-      //         alignItems: "center",
-      //         backgroundColor: "red"
-      //       }}
-      //     >
-      //       <View
-      //         style={{
-      //           height: "60%",
-      //           justifyContent: "center",
-      //           alignItems: "center",
-      //           width: "90%",
-      //           backgroundColor: "green",
-      //           borderRadius: 20,
-      //           flexDirection: "row"
-      //         }}
-      //       >
-      //         <View style={{ flex: 0.2 }} />
-      //         <Text
-      //           numberOfLines={1}
-      //           style={{
-      //             flex: 12,
-      //             justifyContent: "center",
-      //             alignItems: "center",
-      //             fontSize: 18,
-      //             fontWeight: "bold",
-      //             color: "#3E455B"
-      //           }}
-      //         >
-      //           {data.title}
-      //         </Text>
-
-      //         <View
-      //           style={{
-      //             flex: 1,
-      //             height: "100%",
-      //             justifyContent: "center",
-      //             alignItems: "center"
-      //           }}
-      //         >
-      //           <Image
-      //             source={{
-      //               uri:
-      //                 "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-      //             }}
-      //             style={{
-      //               width: "50%",
-      //               height: "50%",
-      //               justifyContent: "center",
-      //               alignItems: "center",
-      //               borderRadius: 30
-      //             }}
-      //           />
-      //         </View>
-      //       </View>
-      //     </View>
-      //   );
-      //   break;
-      case 1:
-        return (
-          <View
+  getScheduleElement(data) {
+    let arr = [];
+    let index = 0;
+    for (let item of data.item.icon_item) {
+      arr.push(
+        <TouchableOpacity
+          style={{ width: 172, height: 86, marginRight: 12, backgroundColor: 'red' }}
+          onPress={() => {
+            alert(item.name);
+          }}
+          key={index}
+          activeOpacity={1}
+        >
+          <Image
+            source={{
+              uri: item.icon
+            }}
+            key={index}
             style={{
-              height:193,
               flex: 1,
               justifyContent: "center",
               alignItems: "center",
-              flexDirection: "row",
-              backgroundColor: 'red'
+              borderRadius: 10
+
             }}
-          >
-            <View
-              style={{
-                // width: "90%",
-                width: Dimensions.width,
-                // overflow: "hidden",
-                height: 150
-              }}
-            >
-            <Swipers 
-              autoplay={true}
-              loop={true}
-              ifShowMiddle={true}
-            />
-            </View>
-          </View>
-        );
-        break;
-      case 2:
-        let arr = [];
-        let index = 0;
-        for (let item of data.item.icon_item) {
-          arr.push(
-            <TouchableOpacity
-              style={{ flex: 2 }}
-              onPress={() => {
-                alert(item.name);
-              }}
-              key={index}
-              activeOpacity={1}
-            >
-              <Image
-                source={{
-                  uri: item.icon
-                }}
-                key={index}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  borderRadius: 10
-                }}
-              />
-            </TouchableOpacity>
-          );
-          if (index < data.item.icon_item.length - 1) {
-            arr.push(
-              <View
-                key={item.name}
-                style={{
-                  flex: 0.1
-                }}
-              />
-            );
-          }
-          index++;
-        }
-        return (
+          />
+        </TouchableOpacity>
+      );
+      if (index < data.item.icon_item.length - 1) {
+        arr.push(
           <View
+            key={item.name}
             style={{
-              marginTop: 20,
-              flex: 1,
-              justifyContent: "center",
-              alignItems: "center"
+              flex: 0.1
             }}
-          >
-            <View
-              style={{
-                flex: 1,
-                flexDirection: "column",
-                width: "90%",
-                height: 150
-              }}
-            >
-              <Text
-                style={{
-                  flex: 0.5,
-                  fontSize: 18,
-                  fontWeight: "bold",
-                  color: "#3E455B"
-                }}
-              >
-                {data.item.title}
-              </Text>
-              <View
-                style={{
-                  flex: 2,
-                  flexDirection: "row",
-                  justifyContent: "space-between"
-                }}
-              >
-                {arr}
-              </View>
-            </View>
-          </View>
+          />
         );
+      }
+      index++;
+    }
+    return (
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "column",
+          height: 140,
+          backgroundColor: 'blue'
+        }}
+      >
+        <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
+        <View
+          style={{
+            flex: 2,
+            flexDirection: "row",
+            backgroundColor: 'green',
+            alignItems: 'center',
+            paddingLeft: 10
+          }}
+        >
+          {arr}
+        </View>
+      </View>
+    );
+  }
+
+  loadFlatItem(data) {
+    switch (data.typea) {
+      case 1:
+        return this.getSwiperElement();
+        break;
+      case 2:
+        return this.getScheduleElement(data);
         break;
       case 3:
         return (
@@ -466,7 +394,8 @@ export default class MainPage extends BasePage {
               marginTop: 20,
               flex: 1,
               justifyContent: "center",
-              alignItems: "center"
+              alignItems: "center",
+              backgroundColor: 'blue'
             }}
           >
             <View
@@ -490,7 +419,7 @@ export default class MainPage extends BasePage {
                     height: 14,
                     justifyContent: "flex-start",
                     alignItems: "center",
-                    backgroundColor: "#01AFFE",
+                    backgroundColor: "green",
                     borderRadius: 20
                   }}
                 />
@@ -857,9 +786,9 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     paddingRight: 10,
   },
-  rightBtnIcon:{
-    width:14,
-    height:14
+  rightBtnIcon: {
+    width: 14,
+    height: 14
   },
   rightBtnText: {
     color: '#151515',

pages/components/ScrollRow.js

@@ -0,0 +1,58 @@
+/** 
+ * @param: 
+ *      width: 每一个item宽度
+ *      height: 每一个item高度
+ *      data:  数据 Arrary
+ */
+
+import React, { Component } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+} 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' }]}
+                horizontal={true}
+                renderItem={({ item, separators }) => (
+                    <TouchableOpacity
+                        style={{
+                            flex: 1,
+                            height: "100%",
+                            width: this.getWindowWidth() * 0.9
+                        }}
+                        onPress={() => {
+                            alert(item.name);
+                        }}
+                        activeOpacity={1}
+                    >
+                        <Image
+                            source={{
+                                uri: item.icon
+                            }}
+                            style={{
+                                height: "100%",
+                                width: "100%",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                borderRadius: 20
+                            }}
+                        />
+                    </TouchableOpacity>
+                )}
+            />
+        )
+    }
+}

pages/components/Swiper.js

@@ -16,66 +16,59 @@ import {
 import Dimensions from '../utils/dimensions';
 import Swiper from "react-native-swiper";
 
+const dotRegular = <View style={{ borderColor: '#fff', borderWidth: 2, width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
+const dotActive = <View style={{ backgroundColor: '#fff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
 export default class Swipers extends Component {
+
   render() {
     return (
-      <View style={styles.Carousel}>
-        <Swiper
-          style={{ flex: 1 }}
-          horizontal={true}
-          autoplayTimeout={5}
-          autoplay={this.props.autoplay}
-          loop={this.props.loop}
-          index={this.props.ifShowMiddle ? 1 : 0}
-          activeDotColor="#fff"
-          showsPagination={false}
-        >
-          <View style={styles.slide}>
-            <Image
-              source={{
-                uri:
-                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-              }}
-              style={styles.img}
-            />
-          </View>
-          <View style={styles.slide}>
-            <Image
-              source={{
-                uri:
-                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-              }}
-              style={styles.img}
-            />
-          </View>
-        </Swiper>
-      </View>
+      <Swiper
+        style={styles.wrapper}
+        horizontal={true}
+        autoplayTimeout={5}
+        autoplay={this.props.autoplay}
+        loop={this.props.loop}
+        index={this.props.ifShowMiddle ? 1 : 0}
+        activeDotColor="#fff"
+        showsPagination={true}
+        dot={dotRegular}
+        activeDot={dotActive}
+      >
+        <View style={styles.slide}>
+          <Image
+            source={{
+              uri:
+                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+            }}
+            style={styles.img}
+          />
+        </View>
+        <View style={styles.slide}>
+          <Image
+            source={{
+              uri:
+                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+            }}
+            style={styles.img}
+          />
+        </View>
+      </Swiper>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  Carousel: {
-    // width: '100%',
-    // height: 153,
-    flex:1,
-    borderRadius: 10,
-    overflow: 'hidden'
-  },
   wrapper: {
-    width: '100%'
+    // flex: 1,
   },
   slide: {
     width: 352,
     height: 153,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-    marginHorizontal:6
+    marginHorizontal: 3,
   },
   img: {
     width: 352,
     height: 153,
-    borderRadius: 10
+    borderRadius: 10,
   }
 });

pages/components/TopicTitle.js

@@ -0,0 +1,75 @@
+/** 
+ * @param: 
+ *      title: 标题
+ *      summary: 标题下的灰字简介
+ *      background: 背景色
+ *      ifTubeShow: 左侧icon是否显示,默认不显示  boolean
+ */
+
+import React, { Component } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import Dimensions from '../utils/dimensions'
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: Dimensions.width,
+        height: 45,
+        paddingLeft: 14,
+        justifyContent: "center",
+        flexDirection: 'column',
+        backgroundColor: 'yellow'
+    },
+    line1: {
+        flex: 1,
+        alignItems: "center",
+        flexDirection: 'row'
+    },
+    line2: {
+        // 123
+        flex: 1
+    },
+    tube: {
+        width: 4,
+        height: 14,
+        marginRight: 6,
+        backgroundColor: '#ffd101'
+    },
+    title: {
+        color: '#373737',
+        fontSize: 18
+    },
+    summary: {
+        color: '#787878',
+        fontSize: 16
+    }
+})
+
+export default class TopicTitle extends Component {
+
+    render() {
+        let line2 = <View></View>;
+        if (this.props.summary) {
+            line2 = <View style={styles.line2}>
+                <Text style={styles.summary}>{this.props.summary}</Text>
+            </View>
+        }
+        let tube = <View></View>;
+        if (this.props.ifTubeShow) {
+            tube = 1
+        }
+        return (
+            <View style={styles.wrapper}>
+                <View style={styles.line1}>
+                    <View style={this.props.ifTubeShow ? styles.tube : null}></View>
+                    <Text style={styles.title}>{this.props.title}</Text>
+                </View>
+                {line2}
+            </View>
+
+        );
+    }
+}

pages/utils/dimensions.js

@@ -1,3 +1,5 @@
+// let console = require('console');
+
 let {Dimensions,StatusBar,Platform,PixelRatio} = require('react-native');
 
 let {width,scale,height,fontScale} = Dimensions.get("window");
@@ -5,8 +7,13 @@ let isIOS = Platform.OS == "ios";
 let statusBarHeight = isIOS? 20: StatusBar.currentHeight;
 let pixelRatio = PixelRatio;
 fontScale = scale;
-
-
+const widthScale = width / 375;
+const heightScale = height / 667;
+/* 
+* 设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）
+* 358 / 375 = x / width
+*/
+// console.log('widthScale',widthScale)
 export default Dimensions  = {
 	get:Dimensions.get,
 	screenWidth:width,
@@ -23,11 +30,14 @@ export default Dimensions  = {
 		return size*fontScale;
 	},
 	getWidth:function(width){
-		return width*fontScale;
+		
+		return width*widthScale;
 	},
 	getHeight:function(height){
-		return height*fontScale;
+		return height*heightScale;
 	},
+	/* px转dp */
+	getDp: px => PixelRatio.roundToNearestPixel(px),
 	size:{
 		"1":1*fontScale
 	}