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

pages/components/CourseTitle.js

@@ -66,7 +66,7 @@ export default class CourseTitle extends Component<Props> {
             <Text
               style={{
                 width: "100%",
-                fontSize: 18,
+                fontSize: 20,
                 fontWeight: "bold",
                 color: this.props.textcolor,
                 textAlign: "center"
@@ -98,32 +98,27 @@ export default class CourseTitle extends Component<Props> {
 
   selectleftIcon() {
     let type = this.props.lefttype;
+    let back = "";
     switch (type) {
       case 1:
         //左侧返回图片1
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "blue"
-            }}
-          />
-        );
+        back = require("../../imgs/back_white.png");
         break;
       case 2:
         //左侧返回图片2
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "red"
-            }}
-          />
-        );
+        back = require("../../imgs/back_white.png");
         break;
     }
+    return (
+      <Image
+        source={back}
+        style={{
+          width: 20,
+          height: 20,
+          resizeMode: "contain"
+        }}
+      />
+    );
   }
   selectRightIcon() {
     let type = this.props.righttype;

pages/components/PersonalInfo.js

@@ -17,26 +17,41 @@ import {
   ImageBackground,
   Button,
   StatusBar,
+  Modal,
+  TouchableHighlight,
   DeviceEventEmitter
 } from "react-native";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
 import Header from "./Header";
+import PersonalInfoDialog from "./PersonalInfoDialog";
 
 type Props = {};
 export default class PersonalInfo extends BasePage {
+  state = {
+    modalVisible: false
+  };
+
+  setModalVisible(visible) {
+    this.setState({ modalVisible: visible });
+  }
   render() {
     return (
       <View style={{ flex: 1 }}>
+        <PersonalInfoDialog ref={view => (this.dialog = view)} />
         <StatusBar
-          // backgroundColor={"transparent"}
+          backgroundColor={"transparent"}
           barStyle={"dark-content"}
           backgroundColor={"white"}
           translucent={false}
         />
 
-        <ImageBackground style={{ flex: 1, backgroundColor: "blue" }}>
+        <ImageBackground
+          source={require("../../imgs/topbg.png")}
+          style={{ flex: 1 }}
+          imageStyle={{ resizeMode: "contain" }}
+        >
           <View
             style={{
               flex: 1,
@@ -46,7 +61,7 @@ export default class PersonalInfo extends BasePage {
             <View
               style={{
                 width: "100%",
-                flex: 1
+                flex: 2
               }}
             >
               <CourseTitle
@@ -54,10 +69,8 @@ export default class PersonalInfo extends BasePage {
                 title="个人信息"
                 backPress={() => this.goBack()}
                 lefttype={2}
-                righttype={2}
                 textcolor={"white"}
                 backPress={() => alert("点击左侧")}
-                rightPress={() => alert("点击分享")}
               />
             </View>
 
@@ -88,10 +101,11 @@ export default class PersonalInfo extends BasePage {
                 />
               </View>
             </View>
+            <View style={{ flex: 0.1 }} />
             <View
               style={{
                 width: "100%",
-                flex: 4,
+                flex: 4.1,
                 alignItems: "center",
                 justifyContent: "center"
               }}
@@ -110,12 +124,13 @@ export default class PersonalInfo extends BasePage {
                 {this.userInfo123()}
               </View>
             </View>
+            <View style={{ flex: 0.1 }} />
             <View
               style={{
                 width: "100%",
                 alignItems: "center",
                 justifyContent: "center",
-                flex: 4
+                flex: 4.1
               }}
             >
               <View
@@ -134,42 +149,57 @@ export default class PersonalInfo extends BasePage {
               style={{
                 width: "100%",
                 flex: 4,
-                alignItems: "center",
-                justifyContent: "center"
+                flexDirection: "column"
               }}
             >
-              <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"
-                  }}
+              <View style={{ flex: 0.5 }} />
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View style={{ flex: 1 }} />
+                <View
                   style={{
-                    flex: 1,
-                    alignItems: "center",
-                    borderRadius: 40,
-                    justifyContent: "center",
+                    flex: 7,
                     width: "100%",
                     height: "100%"
                   }}
-                  imageStyle={{ borderRadius: 40 }}
                 >
-                  <Text
+                  <TouchableOpacity
+                    activeOpacity={1}
                     style={{
-                      fontSize: 30,
-                      color: "white",
+                      flex: 1,
                       width: "100%",
-                      textAlign: "center"
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: "100%"
                     }}
+                    onPress={() => this.logout()}
                   >
-                    退出登录
-                  </Text>
-                </ImageBackground>
+                    <ImageBackground
+                      source={require("../../imgs/logoutbg1.png")}
+                      style={{
+                        flex: 1,
+                        width: "100%",
+                        resizeMode: "repeat",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%"
+                      }}
+                      imageStyle={{ resizeMode: "contain" }}
+                    >
+                      <Text
+                        style={{
+                          fontSize: 30,
+                          color: "white",
+                          width: "100%",
+                          textAlign: "center"
+                        }}
+                      >
+                        退出登录
+                      </Text>
+                    </ImageBackground>
+                  </TouchableOpacity>
+                  <View style={{ flex: 1 }} />
+                </View>
+                <View style={{ flex: 1 }} />
               </View>
             </View>
           </View>
@@ -196,13 +226,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(0)}
           </View>
 
           <Text style={styles.item_text}>头像</Text>
@@ -213,13 +237,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(0)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -231,13 +249,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(1)}
           </View>
 
           <Text style={styles.item_text}>昵称</Text>
@@ -248,13 +260,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(1)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -267,13 +273,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(2)}
           </View>
 
           <Text style={styles.item_text}>生日</Text>
@@ -284,18 +284,13 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(2)}
           </View>
         </View>
       </View>
     );
   }
+
   userInfo456() {
     return (
       <View
@@ -314,13 +309,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(3)}
           </View>
 
           <Text style={styles.item_text}>所在地区</Text>
@@ -331,13 +320,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(3)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -349,16 +332,10 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(4)}
           </View>
 
-          <Text style={styles.item_text}>我的学习</Text>
+          <Text style={styles.item_text}>我的学校</Text>
           <View
             style={{
               flex: 2,
@@ -366,13 +343,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(4)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -384,13 +355,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(5)}
           </View>
 
           <Text style={styles.item_text}>我的年级</Text>
@@ -401,19 +366,102 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(5)}
           </View>
         </View>
       </View>
     );
   }
+  getArraowImg(type) {
+    return (
+      <TouchableOpacity
+        style={{
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+        onPress={() => this.arrowpress(type)}
+      >
+        <Image
+          source={require("../../imgs/arrow.png")}
+          style={{
+            width: "20%",
+            height: "30%"
+          }}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  choseheadericon(type) {
+    let headerpath;
+    switch (type) {
+      case 0:
+        headerpath = require("../../imgs/headportrait.png");
+
+        break;
+      case 1:
+        headerpath = require("../../imgs/nickname.png");
+        break;
+      case 2:
+        headerpath = require("../../imgs/birthday.png");
+        break;
+      case 3:
+        headerpath = require("../../imgs/location.png");
+        break;
+      case 4:
+        headerpath = require("../../imgs/school.png");
+        break;
+      case 5:
+        headerpath = require("../../imgs/grade.png");
+        break;
+    }
+    // alert(headerpath);
+    return (
+      <Image
+        source={headerpath}
+        style={{
+          width: "60%",
+          height: "60%",
+          resizeMode: "contain"
+        }}
+      />
+    );
+  }
+
+  arrowpress(type) {
+    switch (type) {
+      case 0:
+        alert("点击头像");
+        break;
+      case 1:
+        this.modalDialog();
+        break;
+      case 2:
+        alert("生日");
+        break;
+      case 3:
+        alert("所在地区");
+        break;
+      case 4:
+        alert("我的学校");
+        break;
+      case 5:
+        alert("我的年级");
+        break;
+    }
+  }
+
+  logout() {
+    alert("点击退出了");
+  }
+
+  modalDialog() {
+    this.dialog.setModalVisible(true);
+  }
 }
+
 const styles = StyleSheet.create({
   item: {
     flex: 1,
@@ -423,6 +471,7 @@ const styles = StyleSheet.create({
   },
   item_text: {
     flex: 10,
+    marginLeft: 10,
     textAlignVertical: "center",
     color: "black",
     fontSize: 20

pages/components/PersonalInfoDialog.js

@@ -0,0 +1,110 @@
+/**
+ * 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 PersonalInfoDialog extends Component<Props> {
+  state = {
+    modalVisible: false
+  };
+
+  setModalVisible(visible) {
+    this.setState({ modalVisible: visible });
+  }
+  render() {
+    return (
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            width: "100%",
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            flexDirection: "row"
+          }}
+        >
+          <View
+            style={{
+              flex: 111,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "white"
+            }}
+          >
+            <View
+              style={{
+                height: 150,
+                width: "100%",
+
+                backgroundColor: "white"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <Text style={{ flex: 1, textAlignVertical: "center" }}>
+                  修改昵称
+                </Text>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <TextInput
+                  placeholder="昵称"
+                  editable={true} //是否可编辑
+                  style={{
+                    width: "90%",
+                    height: "90%",
+                    borderColor: "black",
+                    borderWidth: 0,
+                    marginLeft: 5
+                  }}
+                  //    onChangeText={this._onChangeText} //输入框改变触发的函数
+                />
+              </View>
+              <View style={{ flex: 1, backgroundColor: "blue" }} />
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}