1.修改CourseTitle更灵活（左侧按钮，右侧按钮）

2.修改课程表界面状态栏白色
3.提交个人信息页(demo)

pages/components/CourseTitle.js

@@ -52,14 +52,8 @@ export default class CourseTitle extends Component<Props> {
               justifyContent: "center"
             }}
           >
-            <TouchableOpacity
-              //返回
-              activeOpacity={1}
-              onPress={this.props.backPress}
-            >
-              <Image
-                style={{ width: 20, height: 20, backgroundColor: "blue" }}
-              />
+            <TouchableOpacity activeOpacity={1} onPress={this.props.backPress}>
+              {this.selectleftIcon()}
             </TouchableOpacity>
           </View>
           <View
@@ -74,6 +68,7 @@ export default class CourseTitle extends Component<Props> {
                 width: "100%",
                 fontSize: 18,
                 fontWeight: "bold",
+                color: this.props.textcolor,
                 textAlign: "center"
               }}
             >
@@ -87,14 +82,8 @@ export default class CourseTitle extends Component<Props> {
               justifyContent: "center"
             }}
           >
-            <TouchableOpacity
-              //分享
-              activeOpacity={1}
-              onPress={this.props.sharedpress}
-            >
-              <Image
-                style={{ width: 20, height: 20, backgroundColor: "blue" }}
-              />
+            <TouchableOpacity activeOpacity={1} onPress={this.props.rightPress}>
+              {this.selectRightIcon()}
             </TouchableOpacity>
           </View>
         </View>
@@ -106,16 +95,82 @@ export default class CourseTitle extends Component<Props> {
       </View>
     );
   }
+
+  selectleftIcon() {
+    let type = this.props.lefttype;
+    switch (type) {
+      case 1:
+        //左侧返回图片1
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "blue"
+            }}
+          />
+        );
+        break;
+      case 2:
+        //左侧返回图片2
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "red"
+            }}
+          />
+        );
+        break;
+    }
+  }
+  selectRightIcon() {
+    let type = this.props.righttype;
+    switch (type) {
+      case 1:
+        //课程表标题，右侧是分享
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "blue"
+            }}
+          />
+        );
+        break;
+      case 2:
+        //个人中心，右侧是设置
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "red"
+            }}
+          />
+        );
+        break;
+    }
+  }
 }
 /**
-
-      使用方法
-    <CourseTitle
-          width={150}
-          height={50}
-          title="学前"
-          backPress={() => this.goBack()}
-          sharedpress={() => alert("点击分享")}
-        />
+  <CourseTitle
+              width={this.getWindowWidth()}
+              title="第12周 爱上幼儿园"
+              //设置左侧按钮样式
+              lefttype={2}
+              //设置右侧按钮样式
+              righttype={1}
+              //设置文字颜色
+              textcolor={"red"}
+              // backPress={() => this.goBack()}
+              //左侧按钮方法
+              backPress={() => alert("点击返回")}
+              //右侧按钮方法
+              rightPress={() => alert("点击分享")}
+            />
+          </View>
 
  */

pages/components/PersonalInfo.js

@@ -0,0 +1,422 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  Button,
+  StatusBar,
+  DeviceEventEmitter
+} from "react-native";
+import AndroidUtil from "../../util/AndroidUtil";
+import BasePage from "../BasePage";
+import CourseTitle from "./CourseTitle";
+import Header from "./Header";
+
+type Props = {};
+export default class PersonalInfo extends BasePage {
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+        />
+
+        <ImageBackground style={{ flex: 1, backgroundColor: "blue" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "column"
+            }}
+          >
+            <View
+              style={{
+                width: "100%",
+                flex: 1
+              }}
+            >
+              <CourseTitle
+                width={this.getWindowWidth()}
+                title="个人信息"
+                backPress={() => this.goBack()}
+                lefttype={2}
+                righttype={2}
+                textcolor={"white"}
+                backPress={() => alert("点击左侧")}
+                rightPress={() => alert("点击分享")}
+              />
+            </View>
+
+            <View
+              style={{
+                width: "100%",
+                flex: 3,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "white",
+                  width: "90%",
+                  height: "90%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 20
+                }}
+              />
+            </View>
+            <View
+              style={{
+                width: "100%",
+                flex: 4,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "#F3F3F3",
+                  width: "90%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "90%",
+                  overflow: "hidden",
+                  borderRadius: 20
+                }}
+              >
+                {this.userInfo123()}
+              </View>
+            </View>
+            <View
+              style={{
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+                flex: 4
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "#F3F3F3",
+                  width: "90%",
+                  height: "90%",
+                  overflow: "hidden",
+                  borderRadius: 20
+                }}
+              >
+                {this.userInfo456()}
+              </View>
+            </View>
+            <View
+              style={{
+                width: "100%",
+                flex: 4,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <View
+                style={{
+                  width: "80%",
+                  height: "35%"
+                }}
+              >
+                <ImageBackground
+                  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,
+                    alignItems: "center",
+                    borderRadius: 40,
+                    justifyContent: "center",
+                    width: "100%",
+                    height: "100%"
+                  }}
+                  imageStyle={{ borderRadius: 40 }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 30,
+                      color: "white",
+                      width: "100%",
+                      textAlign: "center"
+                    }}
+                  >
+                    退出登录
+                  </Text>
+                </ImageBackground>
+              </View>
+            </View>
+          </View>
+        </ImageBackground>
+      </View>
+    );
+  }
+
+  userInfo123() {
+    return (
+      <View
+        style={{
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%"
+        }}
+      >
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>头像</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>昵称</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>生日</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+  userInfo456() {
+    return (
+      <View
+        style={{
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%"
+        }}
+      >
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>所在地区</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>我的学习</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>我的年级</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "row",
+    backgroundColor: "white"
+  },
+  item_text: {
+    flex: 10,
+    textAlignVertical: "center",
+    color: "black",
+    fontSize: 20
+  }
+});

pages/components/SchedulePage.js

@@ -16,6 +16,7 @@ import {
   TouchableOpacity,
   ImageBackground,
   FlatList,
+  StatusBar,
   Button,
   DeviceEventEmitter
 } from "react-native";
@@ -51,145 +52,161 @@ export default class SchedulePage extends BasePage {
     return (
       <View
         style={{
-          flex: 1,
-          backgroundColor: "#F3F3F3",
-          justifyContent: "center",
-          alignItems: "center"
+          flex: 1
         }}
       >
-        <View style={{ flex: 50 }}>
-          <CourseTitle
-            width={this.getWindowWidth()}
-            title="第12周 爱上幼儿园"
-            backPress={() => this.goBack()}
-            // backPress={() => alert("点击返回")}
-            sharedpress={() => alert("点击分享")}
-          />
-        </View>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+        />
+
         <View
           style={{
-            flex: 281,
-            width: "100%"
+            flex: 1,
+            backgroundColor: "#F3F3F3",
+            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"
-            }}
+          <View style={{ flex: 50, backgroundColor: "white" }}>
+            <CourseTitle
+              width={this.getWindowWidth()}
+              title="第12周 爱上幼儿园"
+              lefttype={1}
+              righttype={1}
+              textcolor={"red"}
+              // backPress={() => this.goBack()}
+              backPress={() => alert("左侧按钮")}
+              rightPress={() => alert("右侧按钮")}
+            />
+          </View>
+          <View
             style={{
-              flex: this.state.videoImg_flex,
-              width: this.state.videoImg_width,
-              height: this.state.videoImg_height
+              flex: 281,
+              width: "100%"
             }}
-          />
-          <CusVideo
-            uri={this.state.video_uri}
-            ref={view => (this.video = view)}
+          >
+            <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: this.state.videoImg_flex,
+                width: this.state.videoImg_width,
+                height: this.state.videoImg_height
+              }}
+            />
+            <CusVideo
+              uri={this.state.video_uri}
+              ref={view => (this.video = view)}
+              style={{
+                flex: this.state.video_flex,
+                width: this.state.video_width,
+                height: this.state.video_height
+              }}
+            />
+          </View>
+          <View style={{ flex: 10 }} />
+          <View
             style={{
-              flex: this.state.video_flex,
-              width: this.state.video_width,
-              height: this.state.video_height
-            }}
-          />
-        </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);
+              flex: 505,
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%"
             }}
-            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"
-              },
-              {
-                key: 11,
-                typecolor: "#74E0FF",
-                typename: "习惯养成",
-                videoname: "碗里不剩一粒米",
-                videourl: "碗里不剩一粒米xxxx"
-              },
-              {
-                key: 12,
-                typecolor: "#FB5B76",
-                typename: "品格礼仪",
-                videoname: "我有很多朋友",
-                videourl: "我有很多朋友xxxx"
-              },
-              {
-                key: 13,
-                typecolor: "#EC48E1",
-                typename: "自我保护",
-                videoname: "小猫喵喵叫",
-                videourl: "小猫喵喵叫xxxx"
-              },
-              {
-                key: 14,
-                typecolor: "#39D6B9",
-                typename: "亲子游戏",
-                videoname: "安静的睡前游戏-全家人都睡了",
-                videourl:
-                  "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
-              },
-              {
-                key: 15,
-                typecolor: "#3397F0",
-                typename: "欢乐音乐",
-                videoname: "小鸡捉虫子",
-                videourl:
-                  "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
-              }
-            ]}
-          />
+          >
+            <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"
+                },
+                {
+                  key: 11,
+                  typecolor: "#74E0FF",
+                  typename: "习惯养成",
+                  videoname: "碗里不剩一粒米",
+                  videourl: "碗里不剩一粒米xxxx"
+                },
+                {
+                  key: 12,
+                  typecolor: "#FB5B76",
+                  typename: "品格礼仪",
+                  videoname: "我有很多朋友",
+                  videourl: "我有很多朋友xxxx"
+                },
+                {
+                  key: 13,
+                  typecolor: "#EC48E1",
+                  typename: "自我保护",
+                  videoname: "小猫喵喵叫",
+                  videourl: "小猫喵喵叫xxxx"
+                },
+                {
+                  key: 14,
+                  typecolor: "#39D6B9",
+                  typename: "亲子游戏",
+                  videoname: "安静的睡前游戏-全家人都睡了",
+                  videourl:
+                    "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
+                },
+                {
+                  key: 15,
+                  typecolor: "#3397F0",
+                  typename: "欢乐音乐",
+                  videoname: "小鸡捉虫子",
+                  videourl:
+                    "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+                }
+              ]}
+            />
+          </View>
         </View>
       </View>
     );