Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

# Conflicts:
#	android/app/src/main/assets/index.android.bundle

App.js

@@ -23,6 +23,8 @@ import SchoolAge from "./pages/components/SchoolAge";
 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(
   {
@@ -31,10 +33,11 @@ const RootNavigator = createStackNavigator(
     MainPage: { screen: MainPage },
     SchedulePage: { screen: SchedulePage },
     PersonalInfo: { screen: PersonalInfo },
+    userCenter: { screen: userCenter },
     CourseDetails: { screen: CourseDetails}
   },
   {
-    initialRouteName: "CourseDetails",
+    initialRouteName: "SchoolAge",
     headerMode: "null"
   }
 );

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/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'
+    }
+})