1

package-lock.json

@@ -2832,11 +2832,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2849,15 +2851,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2960,7 +2965,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2970,6 +2976,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2982,17 +2989,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3009,6 +3019,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3081,7 +3092,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3091,6 +3103,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3196,6 +3209,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

pages/MainActivity.js

@@ -17,6 +17,9 @@ import {
 } from "react-native";
 import AndroidUtil from "../util/AndroidUtil";
 import BasePage from "./BasePage";
+import Header from "./components/Header";
+import RevisionAge from "./components/RevisionAge";
+import CourseTitle from "./components/CourseTitle";
 
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
@@ -42,6 +45,21 @@ export default class MainActivity extends BasePage {
         <Button title="testJssssss" onPress={() => this.testJssss()} />
         <Text style={styles.instructions}>To get started, edit App.js</Text>
         <Button title="back" onPress={() => this.backSchoolAge()} />
+        <Header
+          uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
+          width={200}
+          height={150}
+          username="卡通笨笨熊"
+          flowerNumber="123234"
+          onPress={() => this.toWebPage("这里写json......")}
+        />
+        <RevisionAge
+          width={150}
+          height={50}
+          textss="学前"
+          onPress={() => this.toWebPage("这里写json......")}
+        />
+        <CourseTitle width={150} height={50} title="学前" />
       </View>
     );
   }
@@ -52,7 +70,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#F5FCFF"
+    backgroundColor: "black"
   },
   welcome: {
     fontSize: 20,

pages/components/CourseTitle.js

@@ -39,11 +39,11 @@ export default class CourseTitle extends Component<Props> {
             activeOpacity={1}
             onPress={() => this.props.navigation.goBack()}
           >
-            <Image style={{ width: 20, height: 20, backgoundColor: "black" }} />
+            <Image style={{ width: 20, height: 20, backgroundColor: "blue" }} />
           </TouchableOpacity>
         </View>
         <View style={{ flex: 5 }}>
-          <Text>课程或者专题标题</Text>
+          <Text>{this.props.title}</Text>
         </View>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
@@ -51,7 +51,7 @@ export default class CourseTitle extends Component<Props> {
             activeOpacity={1}
             onPress={() => this.props.navigation.goBack()}
           >
-            <Image style={{ width: 20, height: 20, backgoundColor: "black" }} />
+            <Image style={{ width: 20, height: 20, backgroundColor: "blue" }} />
           </TouchableOpacity>
         </View>
       </View>

pages/components/MainPage.js

@@ -23,7 +23,7 @@ import {
 import Swiper from "react-native-swiper";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
-
+import Header from "./Header";
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:
@@ -241,263 +241,14 @@ export default class MainPage extends BasePage {
 
   headerorfooterComponent() {
     return (
-      <ImageBackground
-        style={{
-          width: "100%",
-          height: 130
-        }}
-      >
-        <View
-          style={{
-            flex: 2,
-            width: "90%",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "stretch"
-          }}
-        >
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "row",
-              alignItems: "stretch",
-              justifyContent: "center",
-              backgroundColor: "#FFFFFF"
-            }}
-          >
-            <View
-              style={{
-                flex: 1
-              }}
-            />
-            <TouchableOpacity
-              activeOpacity={1}
-              style={{
-                flex: 1,
-                justifyContent: "center",
-                height: "100%"
-              }}
-              onPress={() => this.toNextPage("MainActivity")}
-            >
-              <Image
-                // source={{
-                //   uri:
-                //     "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=532481250,2026274152&fm=15&gp=0.jpg"
-                // }}
-                style={{
-                  width: 56,
-                  justifyContent: "center",
-                  height: 56,
-                  borderRadius: 50,
-                  backgroundColor: "#828282"
-                }}
-              />
-            </TouchableOpacity>
-            <View
-              style={{
-                flex: 0.5
-              }}
-            />
-            <View
-              style={{
-                flex: 9,
-                marginLeft: 20,
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                height: "100%"
-              }}
-            >
-              <View
-                style={{
-                  flex: 1,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  height: "100%",
-                  justifyContent: "center",
-                  width: "100%"
-                }}
-              >
-                <Text
-                  style={{
-                    textAlign: "left",
-                    height: 20,
-                    justifyContent: "center",
-                    width: "100%",
-                    fontSize: 18
-                  }}
-                >
-                  用户昵称
-                </Text>
-              </View>
-
-              <View
-                style={{
-                  flex: 1,
-                  alignItems: "center",
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  width: "100%"
-                }}
-              >
-                <Image
-                  source={{
-                    uri:
-                      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=532481250,2026274152&fm=15&gp=0.jpg"
-                  }}
-                  style={{
-                    width: 22,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: 22
-                  }}
-                />
-
-                <View
-                  style={{
-                    flex: 9,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    height: "100%",
-                    width: "100%"
-                  }}
-                >
-                  <Text
-                    style={{
-                      textAlign: "left",
-                      justifyContent: "center",
-                      width: "100%",
-                      fontSize: 18
-                    }}
-                  >
-                    6548
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            <View
-              style={{
-                flex: 3,
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <TouchableOpacity
-                activeOpacity={1}
-                onPress={() => this.toNextPage("MainActivity")}
-              >
-                <View
-                  style={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    height: "80%",
-                    width: "100%"
-                  }}
-                >
-                  <Image
-                    source={{
-                      uri:
-                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=532481250,2026274152&fm=15&gp=0.jpg"
-                    }}
-                    style={{
-                      width: 16,
-                      justifyContent: "center",
-                      alignItems: "center",
-                      marginRight: 5,
-                      height: 15
-                    }}
-                  />
-                  <View>
-                    <Text style={{}}>我的课程</Text>
-                  </View>
-                </View>
-              </TouchableOpacity>
-            </View>
-            <View
-              style={{
-                flex: 0.5
-              }}
-            />
-          </View>
-
-          <View
-            style={{
-              flex: 0.1,
-              backgroundColor: "#F8F8F8"
-            }}
-          />
-          <View
-            //这里要改成活的
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%"
-            }}
-          >
-            <View
-              style={{
-                flexDirection: "row",
-                flex: 1,
-                width: "90%",
-                backgroundColor: "#FFFFFF",
-                alignItems: "center"
-              }}
-            >
-              <Text
-                style={{
-                  flex: 1.5,
-                  fontSize: 18,
-                  fontWeight: "bold",
-                  color: "black"
-                }}
-              >
-                学前
-              </Text>
-
-              <View
-                style={{
-                  flex: 9
-                }}
-              />
-              <View
-                style={{
-                  flex: 2,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexDirection: "row"
-                }}
-              >
-                <Image
-                  source={{
-                    uri:
-                      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=532481250,2026274152&fm=15&gp=0.jpg"
-                  }}
-                  style={{
-                    width: 14,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: 13,
-                    marginRight: 5
-                  }}
-                />
-                <Text style={{}}>切换学龄</Text>
-              </View>
-            </View>
-            <View
-              style={{
-                flex: 0.1,
-                width: "90%",
-                backgroundColor: "#F8F8F8"
-              }}
-            />
-          </View>
-        </View>
-      </ImageBackground>
+      <Header
+        uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
+        width={400}
+        height={150}
+        username="卡通笨笨熊"
+        flowerNumber="123234"
+        onPress={() => this.toNextPage("MainActivity")}
+      />
     );
   }