1.修改标题组件

2.增加课程表item组件
3.提交课程表界面

pages/components/CourseTitle.js

@@ -28,7 +28,7 @@ export default class CourseTitle extends Component<Props> {
     return (
       <View
         style={{
-          backgroundColor: "withe",
+          flex: 1,
           width: this.props.width,
           height: this.props.height,
           flexDirection: "column"
@@ -62,7 +62,13 @@ export default class CourseTitle extends Component<Props> {
               />
             </TouchableOpacity>
           </View>
-          <View style={{ flex: 5 }}>
+          <View
+            style={{
+              flex: 5,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
             <Text
               style={{
                 width: "100%",
@@ -74,7 +80,13 @@ export default class CourseTitle extends Component<Props> {
               {this.props.title}
             </Text>
           </View>
-          <View style={{ flex: 1 }}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
             <TouchableOpacity
               //分享
               activeOpacity={1}

pages/components/ScheduleFlatItem.js

@@ -0,0 +1,103 @@
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  Button,
+  Dimensions,
+  DeviceEventEmitter
+} from "react-native";
+
+/** 因没有图，所以Image先用颜色代替，有图可替换 */
+const instructions = Platform.select({
+  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+  android:
+    "Double tap R on your keyboard to reload,\n" +
+    "Shake or press menu button for dev menu"
+});
+
+type Props = {};
+var width = Dimensions.get("window").width;
+var height = Dimensions.get("window").height;
+export default class ScheduleFlatItem extends Component<Props> {
+  render() {
+    return (
+      <View
+        style={{
+          backgroundColor: "white",
+          width: this.props.width,
+          height: this.props.height,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 30
+        }}
+      >
+        <View
+          style={{
+            width: "95%",
+            height: "80%",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <View
+            style={{
+              flex: 2.5,
+              backgroundColor: this.props.data.typecolor,
+              width: "95%",
+              height: "70%",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 20
+            }}
+          >
+            <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
+          </View>
+          <View style={{ flex: 0.5 }} />
+          <View
+            style={{
+              flex: 10,
+              width: "100%",
+              justifyContent: "center",
+              height: "100%"
+            }}
+          >
+            <Text style={{ textAlign: "left" }}>
+              {this.props.data.videoname}
+            </Text>
+          </View>
+          <View
+            style={{
+              flex: 1,
+              width: "100%",
+              height: "80%",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "blue"
+            }}
+          >
+            <Image style={{ width: 20, height: 20, backgroundColor: "blue" }} />
+          </View>
+          <View style={{ flex: 0.1 }} />
+        </View>
+      </View>
+    );
+  }
+}
+/**
+
+      使用方法
+    <CourseTitle
+          width={150}
+          height={50}
+          title="学前"
+          backPress={() => this.goBack()}
+          sharedpress={() => alert("点击分享")}
+        />
+
+ */

pages/components/SchedulePage.js

@@ -15,12 +15,14 @@ import {
   Image,
   TouchableOpacity,
   ImageBackground,
+  FlatList,
   Button,
   DeviceEventEmitter
 } from "react-native";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
+import ScheduleFlatItem from "./ScheduleFlatItem";
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:
@@ -32,16 +34,114 @@ type Props = {};
 export default class SchedulePage extends BasePage {
   render() {
     return (
-      <View style={{ backgroundColor: "#F3F3F3" }}>
-        <CourseTitle
-          width={this.getWindowWidth()}
-          height={50}
-          title="第12周 爱上幼儿园"
-          // backPress={() => this.goBack()}
-          backPress={() => alert("点击返回")}
-          sharedpress={() => alert("点击分享")}
-        />
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "#F3F3F3",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+      >
+        <View style={{ flex: 50 }}>
+          <CourseTitle
+            width={this.getWindowWidth()}
+            title="第12周 爱上幼儿园"
+            // backPress={() => this.goBack()}
+            backPress={() => alert("点击返回")}
+            sharedpress={() => alert("点击分享")}
+          />
+        </View>
+        <View
+          style={{
+            flex: 281,
+            width: "100%",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Image
+            source={{
+              uri:
+                "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"
+            }}
+            style={{
+              flex: 1,
+              width: "100%",
+              height: "100%"
+            }}
+          />
+        </View>
+        <View style={{ flex: 10 }} />
+        <View
+          style={{
+            flex: 505,
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%"
+          }}
+        >
+          <FlatList
+            ItemSeparatorComponent={() => (
+              <View
+                style={{
+                  height: 10
+                }}
+              />
+            )}
+            renderItem={({ item }) => {
+              return this.loadFlatItem(item);
+            }}
+            keyExtractor={(item, index) => item.key.toString()}
+            horizontal={false}
+            data={[
+              {
+                key: 1,
+                typecolor: "#74E0FF",
+                typename: "习惯养成",
+                videoname: "碗里不剩一粒米",
+                videourl: "xxxx"
+              },
+              {
+                key: 2,
+                typecolor: "#FB5B76",
+                typename: "品格礼仪",
+                videoname: "我有很多朋友",
+                videourl: "xxxx"
+              },
+              {
+                key: 3,
+                typecolor: "#EC48E1",
+                typename: "自我保护",
+                videoname: "小猫喵喵叫",
+                videourl: "xxxx"
+              },
+              {
+                key: 4,
+                typecolor: "#39D6B9",
+                typename: "亲子游戏",
+                videoname: "安静的睡前游戏-全家人都睡了",
+                videourl: "xxxx"
+              },
+              {
+                key: 5,
+                typecolor: "#3397F0",
+                typename: "欢乐音乐",
+                videoname: "小鸡捉虫子",
+                videourl: "xxxx"
+              }
+            ]}
+          />
+        </View>
       </View>
     );
   }
+  loadFlatItem(data) {
+    return (
+      <ScheduleFlatItem
+        width={this.getWindowWidth() * 0.95}
+        height={60}
+        data={data}
+      />
+    );
+  }
 }