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

App.js

@@ -27,6 +27,9 @@ import CourseDetails from "./pages/CourseDetails";
 import userCenter from "./pages/userCenter";
 import Order from './pages/buy/order'
 import Ticket from './pages/buy/ticket'
+import Buy from './pages/buy/buy'
+import Login from './pages/Login'
+import SearchResult from './pages/searchResult'
 
 const RootNavigator = createStackNavigator(
   {
@@ -39,9 +42,12 @@ const RootNavigator = createStackNavigator(
     CourseDetails: { screen: CourseDetails },
     Order: { screen: Order },
     Ticket: { screen: Ticket },
+    Login: { screen: Login },
+    Buy: { screen: Buy },
+    SearchResult: { screen: SearchResult },
   },
   {
-    initialRouteName: "CourseDetails",
+    initialRouteName: "MainPage",
     headerMode: "null"
   }
 );

pages/Login.js

@@ -0,0 +1,166 @@
+/* 
+ * 登录
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ImageBackground,
+    Button,
+    StatusBar,
+    Modal,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    TextInput,
+    ScrollView
+} from "react-native";
+import BasePage from "./BasePage";
+import Dimensions from './utils/dimensions';
+import ShopBox from "./components/ShopBox";
+import TopicTitle from './components/TopicTitle';
+import ScrollRow from './components/ScrollRow';
+
+export default class Login extends BasePage {
+    state = {
+
+
+    };
+    render() {
+        return (
+            <View style={styles.wrapper}>
+                <View style={styles.jump}>
+                    <TouchableOpacity style={styles.jumpBtn}>
+                        <Text style={styles.jumpText}>跳过</Text>
+                        <Image source={require('./images/common/arrowRight.png')}></Image>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.phoneNumberBox}>
+                    <Text style={styles.phoneNumber}>手机号</Text>
+                    <TextInput
+                        style={styles.phoneText}
+                        onChangeText={(text) => this.setState({ text })}
+                        value={this.state.text}
+                        placeholder={'请输入手机号'}
+                    />
+                </View>
+                <View style={styles.signNumberBox}>
+                    <Text style={styles.phoneNumber}>验证码</Text>
+                    <View style={styles.signNumberLine2}>
+                        <TextInput
+                            style={styles.signText}
+                            onChangeText={(text) => this.setState({ text })}
+                            value={this.state.text}
+                            placeholder={'请输入验证码'}
+                        />
+                        <TouchableOpacity>
+                            <Text style={styles.getSign}>获取验证码</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <View style={styles.loginIn}>
+                    <Text style={styles.loginText}>登录</Text>
+                </View>
+                <View style={styles.wechatLogin}>
+                    <Image source={require('./images/common/wechat.png')}></Image>
+                    <Text style={styles.wechatLoginText}>微信登录</Text>
+                    <Image source={require('./images/common/arrowRight.png')}></Image>
+                </View>
+            </View>
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1
+    },
+    jumpText: {
+        color: '#3e3e3e',
+        fontSize: 16,
+        marginRight: 4
+    },
+    jump: {
+        // width: Dimensions.width,
+        flex: 2,
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        paddingHorizontal: '8%'
+    },
+    jumpBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    phoneNumberBox: {
+        flex: 2,
+        paddingHorizontal: '8%'
+    },
+    phoneNumber: {
+        color: '#3e3e3e',
+        fontSize: 18,
+        marginBottom: 10
+    },
+    phoneText: {
+        width: '100%',
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#f3f3f3'
+    },
+    signNumberBox: {
+        flex: 2,
+        paddingHorizontal: '8%'
+    },
+    signNumberLine2: {
+        flexDirection: 'row',
+        width: Dimensions.width,
+    },
+    signText: {
+        width: '54%',
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#f3f3f3',
+        marginRight: 9
+    },
+    getSign: {
+        width: 105,
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#38da84',
+        lineHeight: Dimensions.getHeight(50),
+        color: '#fff',
+        fontSize: 16,
+        textAlign: 'center'
+    },
+    loginIn: {
+        flex: 3,
+        paddingHorizontal: '8%'
+    },
+    loginText: {
+        width: '100%',
+        height: Dimensions.getHeight(50),
+        backgroundColor: '#63aeff',
+        textAlign: 'center',
+        lineHeight: Dimensions.getHeight(50),
+        color: '#fff',
+        fontSize: 20,
+        borderRadius: 25
+    },
+    wechatLogin: {
+        flex: 3,
+        flexDirection: 'row',
+        paddingHorizontal: '33.6%',
+        alignItems: 'center',
+        justifyContent: 'center',
+
+    },
+    wechatLoginText: {
+        fontSize: 16,
+        color: '#3e3e3e',
+        marginHorizontal: 6
+    }
+})

pages/buy/buy.js

@@ -0,0 +1,256 @@
+/* 
+ * 
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    FlatList,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    ScrollView,
+    Modal,
+    Animated
+} from "react-native";
+import BasePage from "../BasePage";
+import Dimensions from '../utils/dimensions';
+import TopicTitle from '../components/TopicTitle';
+import CourseTitle from "../components/CourseTitle";
+
+export default class Buy extends BasePage {
+    state = {
+        shopData: [
+            { title: '1个月', originPrice: '199', price: '49', },
+            { title: '12个月', originPrice: '499', price: '199' }
+        ],
+        currentTapindex: 0,
+        slideAnim: new Animated.Value(-150),
+        ifDialogShow: false
+    };
+    itemTap = (index) => {
+        this.setState({
+            currentTapindex: index
+        })
+    }
+    renderItem = (item, index) => {
+        return (
+            <TouchableOpacity style={this.state.currentTapindex === index ? styles.itemWrapperTap : styles.itemWrapperNormal} onPress={() => { this.itemTap(index) }} key={index}>
+                <Text style={this.state.currentTapindex === index ? styles.timeLengthTap : styles.timeLength}>{item.title}</Text>
+                <Text style={this.state.currentTapindex === index ? styles.priceTap : styles.price}>￥{item.price}元</Text>
+                <Text style={this.state.currentTapindex === index ? styles.originPriceTap : styles.originPrice}>原价:￥{item.originPrice}</Text>
+            </TouchableOpacity>
+        )
+    }
+    changeMethod = () => {
+        this.setState({
+            ifDialogShow: !this.state.ifDialogShow
+        }, () => {
+            Animated.timing(
+                this.state.slideAnim,
+                {
+                    toValue: 0,
+                    duration: 300,
+                }
+            ).start();
+        })
+    }
+    render() {
+        return (
+            <View style={{ flex: 1 }}>
+                <View
+                    style={{
+                        height: 30,
+                        marginTop: 30
+                    }}
+                >
+                    <CourseTitle
+                        width={this.getWindowWidth()}
+                        title="VIP购买"
+                        lefttype={1}
+                        textcolor={"#231F20"}
+                        backPress={() => this.goBack()}
+                    // backPress={() => alert("左侧按钮")}
+                    />
+                </View>
+                <View style={styles.top}>
+                    <Text style={styles.title}>套餐选择</Text>
+                    <View>
+                        {this.state.shopData.map((item, index) => this.renderItem(item, index))}
+                    </View>
+                </View>
+                <TouchableOpacity style={styles.payment} onPress={() => this.changeMethod()}>
+                    <Text style={styles.left}>支付方式</Text>
+                    <View style={styles.right}>
+                        <Text style={styles.method}>微信支付</Text>
+                        <Image source={require('../images/common/arrowRight.png')} />
+                    </View>
+                </TouchableOpacity>
+                <View style={styles.bottom}>
+                    <Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
+                    <TouchableOpacity style={styles.bottomRight}>
+                        <Text style={styles.bottomRightText}>支付</Text>
+                    </TouchableOpacity>
+                </View>
+                {
+                    this.state.ifDialogShow
+                        ?
+                        <View style={{ ...styles.dialog }}>
+                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
+                                <Text>选择支付方式</Text>
+                                {/* <View> */}
+
+                                {/* </View> */}
+                            </Animated.View>
+                        </View>
+                        :
+                        null
+                }
+
+                {/* <Modal
+                    animationType="none "
+                    transparent={true}
+                    visible={true}
+                    onRequestClose={() => {
+                        alert("Modal has been closed.");
+                    }}
+                    
+                ></Modal> */}
+            </View>
+
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    top: {
+        width: Dimensions.width,
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingBottom: 20
+    },
+    title: {
+        fontSize: 20,
+        color: '#a8674d',
+        marginTop: 22,
+    },
+    itemWrapperNormal: {
+        borderWidth: 1,
+        borderColor: '#a8674d',
+        borderRadius: 27,
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        width: '86%',
+        height: Dimensions.getHeight(53),
+        marginTop: 20,
+    },
+    itemWrapperTap: {
+        // borderWidth: 1,
+        // borderColor: '#a8674d',
+        borderRadius: 27,
+        backgroundColor: '#ff7525',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        width: '86%',
+        height: Dimensions.getHeight(53),
+        marginTop: 20,
+    },
+    originPriceTap: {
+        fontSize: 14,
+        color: '#fff',
+        textDecorationLine: 'line-through'
+    },
+    originPrice: {
+        fontSize: 14,
+        color: '#a8674d',
+        textDecorationLine: 'line-through'
+    },
+    priceTap: {
+        fontSize: 20,
+        color: '#fff',
+    },
+    price: {
+        fontSize: 20,
+        color: '#a8674d',
+    },
+    timeLengthTap: {
+        fontSize: 18,
+        color: '#fff',
+    },
+    timeLength: {
+        fontSize: 18,
+        color: '#a8674d',
+    },
+    payment: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: Dimensions.width,
+        height: 60,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderColor: '#f3f2f7',
+        borderTopWidth: 6,
+        borderBottomWidth: 6,
+        paddingHorizontal: 33
+    },
+    left: {
+        fontSize: 16
+    },
+    right: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    method: {
+        color: '#a8674d',
+        fontSize: 16,
+        marginRight: 7
+    },
+    bottom: {
+        width: Dimensions.width,
+        height: 60,
+        flexDirection: 'row',
+        position: 'absolute',
+        bottom: 0,
+    },
+    bottomLeft: {
+        width: '58%',
+        textAlign: 'center',
+        lineHeight: 60,
+        color: '#a8674d',
+        fontSize: 20
+    },
+    bottomRight: {
+        width: '42%',
+        fontSize: 16,
+        color: '#fff',
+        backgroundColor: '#f5880d',
+        alignItems: 'center'
+    },
+    bottomRightText: {
+        fontSize: 20,
+        color: '#fff',
+        textAlign: 'center',
+        lineHeight: 60,
+    },
+    dialog: {
+        width: Dimensions.width,
+        height: Dimensions.height,
+        position: 'absolute',
+        backgroundColor: '#000',
+        opacity: 0.4
+
+    },
+    payMethod: {
+        width: Dimensions.width,
+        height: 150,
+        position: 'absolute',
+        // bottom: 0,
+        backgroundColor: '#fff'
+    }
+})

pages/components/CourseTitle.js

@@ -31,7 +31,8 @@ export default class CourseTitle extends Component<Props> {
           flex: 1,
           width: this.props.width,
           height: this.props.height,
-          flexDirection: "column"
+          flexDirection: "column",
+          // backgroundColor: this.props.backgroundColor ?  this.props.backgroundColor : '#fff'
         }}
       >
         <View
@@ -42,7 +43,8 @@ export default class CourseTitle extends Component<Props> {
         <View
           style={{
             flex: 1,
-            flexDirection: "row"
+            flexDirection: "row",
+            alignItems: 'center'
           }}
         >
           <View
@@ -83,7 +85,7 @@ export default class CourseTitle extends Component<Props> {
             }}
           >
             <TouchableOpacity activeOpacity={1} onPress={this.props.rightPress}>
-              {this.selectRightIcon()}
+              {this.props.righttype ? this.selectRightIcon() : null}
             </TouchableOpacity>
           </View>
         </View>
@@ -130,6 +132,7 @@ export default class CourseTitle extends Component<Props> {
         break;
       case 2:
         //个人中心，右侧是设置
+        right = require("../images/common/setting.png");
         break;
     }
     return (

pages/components/MainPage.js

@@ -95,7 +95,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }} >
+        <ScrollView style={{ height: Dimensions.height }}  onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -111,15 +111,15 @@ export default class MainPage extends BasePage {
                 ...styles.callUpGrade,
                 opacity: this.state.fadeAnim
               }}>
-              <View style={styles.gradeItem}>
+              <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>小学</Text>
-              </View>
-              <View style={styles.gradeItemMid}>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.gradeItemMid}>
                 <Text style={styles.gradeText}>学前</Text>
-              </View>
-              <View style={styles.gradeItem}>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>中学</Text>
-              </View>
+              </TouchableOpacity>
             </Animated.View>
           ) : (
               null

pages/components/SchedulePage.js

@@ -27,6 +27,7 @@ import Orientation from "react-native-orientation";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
+import SharedDialog from "./SharedDialog";
 import ScheduleFlatItem from "./ScheduleFlatItem";
 import CusVideo from "./CusVideo";
 const instructions = Platform.select({
@@ -98,7 +99,7 @@ export default class SchedulePage extends BasePage {
               textcolor={"#231F20"}
               backPress={() => this.goBack()}
               // backPress={() => alert("左侧按钮")}
-              rightPress={() => alert("右侧按钮")}
+              rightPress={this.showSharedDialog.bind(this)}
             />
           </View>
           <View
@@ -234,6 +235,7 @@ export default class SchedulePage extends BasePage {
           show={this.state.video_show}
           uri={this.state.video_uri}
           ref={view => (this.video = view)}
+          needback={false}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
           onError={this.onError.bind(this)}
           onEnd={this.onEnd.bind(this)}
@@ -246,6 +248,7 @@ export default class SchedulePage extends BasePage {
             position: "absolute"
           }}
         />
+        <SharedDialog ref={view => (this.shareddialog = view)} />
       </View>
     );
   }
@@ -272,6 +275,9 @@ export default class SchedulePage extends BasePage {
       this.onBackAndroid.bind(this)
     );
   }
+  showSharedDialog() {
+    this.shareddialog.setModalVisible(true);
+  }
   onBackAndroid() {
     if (this.state.isFull) {
       return true;

pages/components/SharedDialog.js

@@ -0,0 +1,243 @@
+/**
+ * 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,
+  TextInput,
+  Button,
+  StatusBar,
+  Modal,
+  TouchableHighlight,
+  DeviceEventEmitter
+} from "react-native";
+
+type Props = {};
+export default class SharedDialog extends Component<Props> {
+  state = {
+    modalVisible: false
+  };
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+
+  render() {
+    return (
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            flexDirection: "column"
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 3.5,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              width: "100%"
+            }}
+            activeOpacity={1}
+            onPress={() => this.setState({ modalVisible: false })}
+          >
+            <View
+              style={{
+                flex: 3.5,
+                width: "100%"
+              }}
+            />
+          </TouchableOpacity>
+          <View
+            style={{
+              flex: 1,
+              width: "100%"
+            }}
+          >
+            <View
+              style={{
+                flex: 1.5,
+                width: "100%",
+                flexDirection: "row",
+                backgroundColor: "white"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <View
+                  style={{
+                    height: 2,
+                    left: 40,
+                    backgroundColor: "#979797",
+                    width: "60%"
+                  }}
+                />
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: 18,
+                    color: "black"
+                  }}
+                >
+                  分享
+                </Text>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%"
+                }}
+              >
+                <View
+                  style={{
+                    height: 2,
+                    right: 40,
+                    backgroundColor: "#979797",
+                    width: "60%"
+                  }}
+                />
+              </View>
+            </View>
+            <View
+              style={{
+                flex: 2,
+                backgroundColor: "white",
+                flexDirection: "row",
+                width: "100%"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center"
+                }}
+              >
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={this.wechat.bind(this)}
+                >
+                  <View
+                    style={{
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      left: 40
+                    }}
+                  >
+                    <Image
+                      style={{
+                        height: 43,
+                        width: 43
+                      }}
+                      source={require("../images/share/wechat.png")}
+                    />
+                    <Text
+                      style={{
+                        fontSize: 18,
+                        color: "black"
+                      }}
+                    >
+                      发给到群/好友
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={this.circle.bind(this)}
+                >
+                  <View
+                    style={{
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      right: 40
+                    }}
+                  >
+                    <Image
+                      style={{
+                        height: 43,
+                        width: 43
+                      }}
+                      source={require("../images/share/circle.png")}
+                    />
+                    <Text
+                      style={{
+                        fontSize: 18,
+                        color: "black"
+                      }}
+                    >
+                      发朋友圈
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  wechat() {
+    alert("wechat");
+  }
+  circle() {
+    alert("circle");
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+}
+
+/***
+    使用方法
+   <SharedDialog ref={view => (this.shareddialog = view)} />
+
+  this.shareddialog.setModalVisible(true);//true显示，false消失
+
+
+ */

pages/components/ShopBox.js

@@ -83,26 +83,30 @@ export default class ShopBox extends Component {
                 source={item.background}
                 style={styles.item}
                 key={index}
+
             >
-                <Text
-                    style={styles.title}
-                >{item.title}</Text>
-                <View
-                    style={styles.line2}
-                >
-                    <Text style={styles.price}>￥{item.price}</Text>
-                    <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
-                </View>
-                <View
-                    style={styles.line3}
-                >
-                    <Text style={styles.buy}>立即购买</Text>
-                    <Image
-                        source={require('../images/shopBox/arrow.png')}
-                        style={styles.arrow}
-                    />
+                <TouchableOpacity onPress={() => this.props.nav('Buy')}>
+                    <Text
+                        style={styles.title}
+                    >{item.title}</Text>
+                    <View
+                        style={styles.line2}
+                    >
+                        <Text style={styles.price}>￥{item.price}</Text>
+                        <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
+                    </View>
+                    <View
+                        style={styles.line3}
+                    >
+                        <Text style={styles.buy}>立即购买</Text>
+                        <Image
+                            source={require('../images/shopBox/arrow.png')}
+                            style={styles.arrow}
+                        />
+
+                    </View>
+                </TouchableOpacity>
 
-                </View>
             </ImageBackground>
         )
     }

pages/searchResult.js

@@ -0,0 +1,74 @@
+/* 
+ * 搜索结果页面
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ImageBackground,
+    Button,
+    StatusBar,
+    Modal,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    FlatList,
+    TextInput
+} from "react-native";
+import BasePage from "./BasePage";
+import Dimensions from './utils/dimensions';
+import ShopBox from "./components/ShopBox";
+import TopicTitle from './components/TopicTitle';
+import ScrollRow from './components/ScrollRow';
+
+export default class SearchResult extends BasePage {
+    state = {
+        text: '123123123123'
+    };
+    searchBox = () => {
+        return (
+            <View style={styles.searchBox}>
+                <TextInput
+                    style={styles.searchInput}
+                    onChangeText={(text) => this.setState({ text })}
+                    value={this.state.text}
+                    renderItem={item => this.renderItem(item)}
+                />
+            </View>
+        )
+    }
+    renderItem = (item) =>{
+        return (
+            <View>
+                
+            </View>
+        )
+    } 
+    render() {
+        return (
+            <FlatList
+                ListHeaderComponent={() => this.searchBox()}
+            />
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    searchBox: {
+        width: Dimensions.width,
+        height: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f6f7f8'
+    },
+    searchInput: {
+        width: '88.5%',
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#fff'
+    }
+})

pages/userCenter.js

@@ -22,6 +22,7 @@ import Dimensions from './utils/dimensions';
 import ShopBox from "./components/ShopBox";
 import TopicTitle from './components/TopicTitle';
 import ScrollRow from './components/ScrollRow';
+import CourseTitle from "./components/CourseTitle";
 
 export default class userCenter extends BasePage {
     state = {
@@ -81,6 +82,10 @@ export default class userCenter extends BasePage {
             </TouchableOpacity>
         )
     }
+    goBack() {
+        //返回上一页
+        this.props.navigation.goBack();
+    }
     render() {
         return (
 
@@ -92,6 +97,31 @@ export default class userCenter extends BasePage {
                         }
                         style={{ width: '100%', height: 203 }}
                     >
+                        <StatusBar
+                            backgroundColor={"transparent"}
+                            barStyle={"dark-content"}
+                            // backgroundColor={"white"}
+                            translucent={true}
+                            hidden={false}
+                        />
+                        <View
+                            style={{
+                                height: 30,
+                                // backgroundColor: "white"
+                                marginTop: 20
+                            }}
+                        >
+                            <CourseTitle
+                                width={this.getWindowWidth()}
+                                title="个人中心"
+                                lefttype={2}
+                                righttype={2}
+                                textcolor={"#fff"}
+                                backPress={() => this.goBack()}
+                            // backgroundColor={"transparent"}
+                            // rightPress={this.showSharedDialog.bind(this)}
+                            />
+                        </View>
                         <View style={styles.userInfo}>
                             <TouchableOpacity onPress={() => this.goTo(`PersonalInfo`)}>
                                 <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
@@ -117,7 +147,7 @@ export default class userCenter extends BasePage {
 
                 </View>
                 <View style={styles.discountSection}>
-                    <ShopBox data={this.state.shopData} discount={this.state.discount} />
+                    <ShopBox data={this.state.shopData} discount={this.state.discount} nav={this.props.navigation.navigate} />
                 </View>
                 <View style={styles.recordSection}>
                     <TopicTitle title={'观看记录'} ifTubeShow={true} />