合并

App.js

@@ -24,6 +24,7 @@ import MainPage from "./pages/components/MainPage";
 import SchedulePage from "./pages/components/SchedulePage";
 import PersonalInfo from "./pages/components/PersonalInfo";
 import CourseDetails from "./pages/CourseDetails";
+import userCenter from "./pages/userCenter";
 
 const RootNavigator = createStackNavigator(
   {
@@ -32,6 +33,7 @@ const RootNavigator = createStackNavigator(
     MainPage: { screen: MainPage },
     SchedulePage: { screen: SchedulePage },
     PersonalInfo: { screen: PersonalInfo },
+    userCenter: { screen: userCenter },
     CourseDetails: { screen: CourseDetails}
   },
   {

android/app/build.gradle

@@ -148,6 +148,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-orientation')
     implementation project(':react-native-video')
     implementation project(':react-native-gesture-handler')
     implementation fileTree(dir: "libs", include: ["*.jar"])

android/app/src/main/java/com/edufound/MainApplication.java

@@ -10,6 +10,7 @@ import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
+import com.github.yamill.orientation.OrientationPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 
 import java.util.Arrays;
@@ -30,7 +31,8 @@ public class MainApplication extends Application implements ReactApplication {
                     new ReactVideoPackage(),
                     new RNGestureHandlerPackage(),
                     new CustomPackage(),
-                    new ReactVideoPackage()
+                    new ReactVideoPackage(),
+                    new OrientationPackage()
             );
         }
 

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'efunbox_mobile_8'
+include ':react-native-orientation'
+project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
 include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
 include ':react-native-gesture-handler'

ios/efunbox_mobile_8.xcodeproj/project.pbxproj

@@ -42,6 +42,7 @@
 		E4A0D76E036246C0B94364AD /* libRNGestureHandler.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CED0874FBD894AB68259985E /* libRNGestureHandler.a */; };
 		40B60160FAE8416EABF8F455 /* libRNGestureHandler-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 63E89BCAA43940789F6CD17E /* libRNGestureHandler-tvOS.a */; };
 		9CB969D57DBB44968F57230A /* libRCTVideo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D361E312399E41ABA1C9CF77 /* libRCTVideo.a */; };
+		BE43474A85F54112A6EA6E37 /* libRCTOrientation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 977DC2E26A1E45688924C43C /* libRCTOrientation.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -354,6 +355,8 @@
 		63E89BCAA43940789F6CD17E /* libRNGestureHandler-tvOS.a */ = {isa = PBXFileReference; name = "libRNGestureHandler-tvOS.a"; path = "libRNGestureHandler-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 		C6CF52A56D1E43279554ACA6 /* RCTVideo.xcodeproj */ = {isa = PBXFileReference; name = "RCTVideo.xcodeproj"; path = "../node_modules/react-native-video/ios/RCTVideo.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		D361E312399E41ABA1C9CF77 /* libRCTVideo.a */ = {isa = PBXFileReference; name = "libRCTVideo.a"; path = "libRCTVideo.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		13F318D169DD4BA79CB54ED5 /* RCTOrientation.xcodeproj */ = {isa = PBXFileReference; name = "RCTOrientation.xcodeproj"; path = "../node_modules/react-native-orientation/iOS/RCTOrientation.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		977DC2E26A1E45688924C43C /* libRCTOrientation.a */ = {isa = PBXFileReference; name = "libRCTOrientation.a"; path = "libRCTOrientation.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -384,6 +387,7 @@
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				E4A0D76E036246C0B94364AD /* libRNGestureHandler.a in Frameworks */,
 				9CB969D57DBB44968F57230A /* libRCTVideo.a in Frameworks */,
+				BE43474A85F54112A6EA6E37 /* libRCTOrientation.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -576,6 +580,7 @@
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				CB9C1A0696FE4DC596B9C15D /* RNGestureHandler.xcodeproj */,
 				C6CF52A56D1E43279554ACA6 /* RCTVideo.xcodeproj */,
+				13F318D169DD4BA79CB54ED5 /* RCTOrientation.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1206,11 +1211,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Debug;
@@ -1235,11 +1242,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Release;
@@ -1264,6 +1273,7 @@
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Debug;
@@ -1287,6 +1297,7 @@
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Release;
@@ -1319,11 +1330,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Debug;
@@ -1356,11 +1369,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Release;
@@ -1392,11 +1407,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Debug;
@@ -1428,11 +1445,13 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
 					"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
+					"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
 				);
 			};
 			name = Release;

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",
@@ -6953,10 +6967,10 @@
         "prop-types": "^15.5.10"
       }
     },
-    "react-native-program-stylesheet": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npm.taobao.org/react-native-program-stylesheet/download/react-native-program-stylesheet-1.0.8.tgz",
-      "integrity": "sha1-65vUGT1WZwTJMKsC0pEOtZmJT70="
+    "react-native-orientation": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/react-native-orientation/download/react-native-orientation-3.1.3.tgz",
+      "integrity": "sha1-1FgDhB/pS2zOmsvpBP1coZGjcR4="
     },
     "react-native-safe-area-view": {
       "version": "0.13.1",

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^16.8.6",
     "react-native": "0.59.4",
     "react-native-gesture-handler": "^1.1.0",
+    "react-native-orientation": "^3.1.3",
     "react-native-swiper": "^1.5.14",
     "react-native-video": "^4.4.1",
     "react-native-web": "^0.11.2",

pages/components/MainPage.js

@@ -20,7 +20,9 @@ import {
   Button,
   ViewPagerAndroid,
   DeviceEventEmitter,
-  SectionList
+  SectionList,
+  Animated,
+  TouchableHighlight
 } from "react-native";
 import Swiper from "react-native-swiper";
 import AndroidUtil from "../../util/AndroidUtil";
@@ -35,37 +37,52 @@ import ScrollRow from "./ScrollRow";
 export default class MainPage extends BasePage {
   constructor(props) {
     super(props);
-    this.state = {
-      grade: '大学',
-      text: '小伙子'
-    }
+  }
+
+  state = {
+    grade: '大学',
+    text: '小伙子',
+    ifGradeMenuShow: false,
+    fadeAnim: new Animated.Value(0),
   }
 
   render() {
     return (
-      <View style={{ flex: 1}}>
-        {/* 尝试切换为sectionList 分组显示 */}
-        <SectionList
-          sections={sectionData}
-          renderItem={({ item }) => {
-            return this.loadFlatItem(item);
-          }}
-          keyExtractor={(item, index) => item.key.toString()}
-          ListHeaderComponent={() => this.headerorfooterComponent()}
-          renderSectionHeader={this.sectionTitle}
-        />
-        <View style={styles.callUpGrade}>
-            <View style={styles.gradeItem}>
-              <Text style={styles.gradeText}>小学</Text>
-              </View>
-            <View style={styles.gradeItemMid}>
-              <Text style={styles.gradeText}>学前</Text>
-              </View>
-            <View style={styles.gradeItem}>
-              <Text style={styles.gradeText}>中学</Text>
-              </View>
-          </View>
-      </View>
+        <View style={{ flex: 1 }} onPress={this.hideGradeMenu}>
+          {/* 尝试切换为sectionList 分组显示 */}
+          <SectionList
+            sections={sectionData}
+            renderItem={({ item }) => {
+              return this.loadFlatItem(item);
+            }}
+            keyExtractor={(item, index) => item.key.toString()}
+            ListHeaderComponent={() => this.headerorfooterComponent()}
+            renderSectionHeader={this.sectionTitle}
+            onScroll={this.hideGradeMenu}
+          />
+          {
+            this.state.ifGradeMenuShow ? (
+              <Animated.View
+                style={{
+                  ...styles.callUpGrade,
+                  opacity: this.state.fadeAnim
+                }}>
+                <View style={styles.gradeItem}>
+                  <Text style={styles.gradeText}>小学</Text>
+                </View>
+                <View style={styles.gradeItemMid}>
+                  <Text style={styles.gradeText}>学前</Text>
+                </View>
+                <View style={styles.gradeItem}>
+                  <Text style={styles.gradeText}>中学</Text>
+                </View>
+              </Animated.View>
+            ) : (
+                null
+              )
+
+          }
+        </View>
     );
   }
 
@@ -79,7 +96,7 @@ export default class MainPage extends BasePage {
           height={150}
           username="卡通笨笨熊"
           flowerNumber="123234"
-          onPress={() => this.toNextPage("MainActivity")}
+          onPress={() => this.toNextPage("userCenter")}
         />
         {/* 搜索区域 */}
         <View style={styles.searchSection}>
@@ -88,7 +105,7 @@ export default class MainPage extends BasePage {
             onChangeText={(text) => this.setState({ text })}
             value={this.state.text}
           />
-          <TouchableOpacity onPress={() => alert('press')}>
+          <TouchableOpacity onPress={this.tabCallOutHandler}>
             <View
               style={styles.rightBtn}
             >
@@ -103,7 +120,7 @@ export default class MainPage extends BasePage {
               </Text>
             </View>
           </TouchableOpacity>
-          
+
         </View>
       </View>
 
@@ -285,6 +302,30 @@ export default class MainPage extends BasePage {
         break;
     }
   }
+
+  // 点击呼出学龄菜单
+  tabCallOutHandler = () => {
+    this.setState({
+      ifGradeMenuShow: !this.state.ifGradeMenuShow
+    }, () => {
+      Animated.timing(
+        this.state.fadeAnim,
+        {
+          toValue: this.state.ifGradeMenuShow ? 1 : 0,
+          duration: 300,
+        }
+      ).start();
+    })
+  }
+
+  // 如果切换学龄在显示状态，那么在它失去焦点时将它隐藏
+  hideGradeMenu = () => {
+    if (this.state.ifGradeMenuShow) {
+      this.setState({
+        ifGradeMenuShow: false
+      })
+    }
+  }
 }
 
 const styles = StyleSheet.create({
@@ -341,25 +382,25 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 9,
     top: 125,
-    zIndex:999,
+    zIndex: 999,
     elevation: 999,
     backgroundColor: '#fff',
     flexDirection: 'column'
   },
-  gradeItem:{
-    zIndex:999,
-    flex:1,
+  gradeItem: {
+    zIndex: 999,
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  gradeItemMid:{
-    zIndex:999,
-    flex:1,
+  gradeItemMid: {
+    zIndex: 999,
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor : '#f0f1f5'
+    borderColor: '#f0f1f5'
   },
   gradeText: {
     color: '#151515',

pages/components/SchedulePage.js

@@ -20,6 +20,7 @@ import {
   Button,
   DeviceEventEmitter
 } from "react-native";
+import Orientation from "react-native-orientation";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
@@ -37,6 +38,7 @@ export default class SchedulePage extends BasePage {
   constructor(props) {
     super(props);
     this.state = {
+      statusbar_hidden: false,
       videoImg_flex: 1,
       videoImg_width: "100%",
       videoImg_height: "100%",
@@ -44,7 +46,12 @@ export default class SchedulePage extends BasePage {
       video_width: "0%",
       video_height: "0%",
       video_uri:
-        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8",
+      title_height: "6%",
+      video_frame_height: "32%",
+      seat_height: "2%",
+      flatlist_height: "60%",
+      isFull: false
     };
   }
 
@@ -60,6 +67,7 @@ export default class SchedulePage extends BasePage {
           barStyle={"dark-content"}
           backgroundColor={"white"}
           translucent={false}
+          hidden={this.state.statusbar_hidden}
         />
 
         <View
@@ -72,7 +80,7 @@ export default class SchedulePage extends BasePage {
         >
           <View
             style={{
-              flex: 50,
+              height: this.state.title_height,
               backgroundColor: "white"
             }}
           >
@@ -89,7 +97,7 @@ export default class SchedulePage extends BasePage {
           </View>
           <View
             style={{
-              flex: 281,
+              height: this.state.video_frame_height,
               width: "100%"
             }}
           >
@@ -115,10 +123,10 @@ export default class SchedulePage extends BasePage {
               }}
             />
           </View>
-          <View style={{ flex: 10 }} />
+          <View style={{ height: this.state.seat_height }} />
           <View
             style={{
-              flex: 505,
+              height: this.state.flatlist_height,
               justifyContent: "center",
               alignItems: "center",
               width: "100%"
@@ -132,6 +140,13 @@ export default class SchedulePage extends BasePage {
                   }}
                 />
               )}
+              ListFooterComponent={() => (
+                <View
+                  style={{
+                    height: 30
+                  }}
+                />
+              )}
               renderItem={({ item }) => {
                 return this.loadFlatItem(item);
               }}
@@ -228,16 +243,31 @@ export default class SchedulePage extends BasePage {
     );
   }
   fullScreenPlayer() {
-    alert("宽" + this.getWindowWidth());
-    alert("高：" + this.getWindowHeight());
-    this.setState({
-      video_width: this.getWindowHeight(),
-      video_height: 1111
-    });
+    if (!this.state.isFull) {
+      Orientation.lockToLandscape();
+      this.setState({
+        title_height: "0%",
+        video_frame_height: "100%",
+        seat_height: "0%",
+        flatlist_height: "0%",
+        statusbar_hidden: true,
+        isFull: true
+      });
+    } else {
+      Orientation.lockToPortrait();
+      this.setState({
+        title_height: "6%",
+        video_frame_height: "32%",
+        seat_height: "2%",
+        flatlist_height: "60%",
+        statusbar_hidden: false,
+        isFull: false
+      });
+    }
   }
   changeUrl(url) {
     //切换视频并且播放
-    alert(url);
+    // alert(url);
     this.setState({
       videoImg_flex: 0,
       videoImg_width: "0%",

pages/userCenter.js

@@ -0,0 +1,100 @@
+/* 
+ * 个人中心页面
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ImageBackground,
+    Button,
+    StatusBar,
+    Modal,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    ScrollView
+} from "react-native";
+import BasePage from "./BasePage";
+import Dimensions from './utils/dimensions'
+
+export default class userCenter extends BasePage {
+    state = {
+        nickName: "初始昵称",
+        schoolName: "未设置",
+        ifDiscount: true,
+        isVIP: false,
+        btnArr: [
+            { title: '订单', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
+            { title: '优惠券', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
+            { title: '活动', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
+            { title: '客服', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
+        ]
+    };
+    render() {
+        let btnRender = null;
+        this.state.btnArr.forEach((item) => {
+            btnRender + (
+                <View style={styles.btnItem}>
+                    <Image
+                        source={{ uri: item.icon }}
+                        style={styles.btnIcon}
+                    />
+                    <Text
+                        style={styles.btnTitle}
+                    >
+                        {item.title}
+                    </Text>
+                </View>
+            )
+        })
+        return (
+            <ScrollView style={{ height: 1000, overflow: 'scroll' }}>
+                <View style={styles.topSection}>
+                    <ImageBackground
+                        source={
+                            require('./images/userCenter/top-bg.png')
+                        }
+                        style={{width: '100%',height: 203}}
+                    >
+                        <View style={styles.userInfo}>
+                            
+                        </View>
+                        <View style={styles.btnBox}>
+                            {btnRender}
+                        </View>
+                    </ImageBackground>
+
+                </View>
+                <View style={styles.discountSection}></View>
+                <View style={styles.recordSection}></View>
+                <View style={styles.collectSection}></View>
+            </ScrollView>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    topSection: {
+        height: 250,
+        width: Dimensions.width,
+        // backgroundColor: 'red'
+    },
+    discountSection: {
+        width: Dimensions.width,
+        height: 242,
+        backgroundColor: 'green'
+    },
+    recordSection: {
+        width: Dimensions.width,
+        height: 235,
+        backgroundColor: 'blue'
+    },
+    collectSection: {
+        width: Dimensions.width,
+        height: 235,
+        backgroundColor: 'yellow'
+    }
+})