Browse Source

1.修改CourseTitle如果不传type测不返回组件
2.增加选择头像组件(无功能)
3.修改个人信息界面

zhangmengjie 5 years ago
parent
commit
9376c8f293

+ 200 - 0
pages/components/ChosePhoto.js

@@ -0,0 +1,200 @@
+/**
+ * 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 ChosePhoto 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: 2.5,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              width: "100%"
+            }}
+            activeOpacity={1}
+            onPress={() => this.setState({ modalVisible: false })}
+          >
+            <View
+              style={{
+                flex: 2,
+                width: "100%"
+              }}
+            />
+          </TouchableOpacity>
+          <View
+            style={{
+              flex: 1,
+              width: "100%",
+              flexDirection: "column",
+              alignItems: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              justifyContent: "center"
+            }}
+          >
+            <View
+              style={{
+                flex: 2,
+                width: "90%",
+                backgroundColor: "white",
+                borderRadius: 20,
+                flexDirection: "column"
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  flex: 5,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+                activeOpacity={1}
+                onPress={this.photograph.bind(this)}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
+                  >
+                    拍照
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              <View
+                style={{
+                  flex: 0.1,
+                  backgroundColor: "rgba(246, 247, 248, 1)"
+                }}
+              />
+              <TouchableOpacity
+                style={{
+                  flex: 5,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+                activeOpacity={1}
+                onPress={this.album_selection.bind(this)}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
+                  >
+                    从相册选择
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View
+              style={{
+                flex: 0.1,
+                width: "100%"
+              }}
+            />
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                width: "90%",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: 20,
+                backgroundColor: "white"
+              }}
+              activeOpacity={1}
+              onPress={() => {
+                this.setState({ modalVisible: false });
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 20,
+                  backgroundColor: "white"
+                }}
+              >
+                <Text
+                  style={{
+                    //   fontWeight: "bold",
+                    fontSize: 22,
+                    color: "rgba(88, 168, 250, 1)"
+                  }}
+                >
+                  取消
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <View
+              style={{
+                flex: 0.1,
+                width: "100%"
+              }}
+            />
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+  photograph() {
+    alert("拍照");
+  }
+
+  album_selection() {
+    alert("相册选择");
+  }
+}

+ 2 - 0
pages/components/CourseTitle.js

@@ -131,6 +131,8 @@ export default class CourseTitle extends Component<Props> {
       case 2:
         //个人中心,右侧是设置
         break;
+      default:
+        return true;
     }
     return (
       <Image

+ 296 - 154
pages/components/PersonalInfo.js

@@ -24,6 +24,7 @@ import {
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
+import ChosePhoto from "./ChosePhoto";
 import Header from "./Header";
 import PersonalInfoDialog from "./PersonalInfoDialog";
 
@@ -43,6 +44,7 @@ export default class PersonalInfo extends BasePage {
           ref={view => (this.dialog = view)}
           updateParentState={this.updateState.bind(this)}
         />
+        <ChosePhoto ref={view => (this.chosephoto = view)} />
         <StatusBar
           backgroundColor={"transparent"}
           barStyle={"dark-content"}
@@ -80,12 +82,13 @@ export default class PersonalInfo extends BasePage {
                 title="个人信息"
                 backPress={() => this.goBack()}
                 lefttype={2}
+                righttype={0}
                 textcolor={"white"}
                 backPress={() => this.goBack()}
               />
-              <View
+              <TouchableOpacity
                 style={{
-                  flex: 1.5,
+                  flex: 1,
                   backgroundColor: "white",
                   width: "90%",
                   alignItems: "center",
@@ -93,22 +96,75 @@ export default class PersonalInfo extends BasePage {
                   borderRadius: 20,
                   overflow: "hidden"
                 }}
+                activeOpacity={1}
+                onPress={() => this.arrowpress(0)}
               >
-                <Header
-                  uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
-                  username="卡通笨笨熊"
-                  flowerNumber="123234"
-                  onPress={() => this.toNextPage("MainActivity")}
-                />
-              </View>
+                <View
+                  style={{
+                    flex: 1,
+                    borderRadius: 20,
+                    overflow: "hidden",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexDirection: "row"
+                  }}
+                >
+                  <View style={{ flex: 0.5 }} />
+
+                  <View
+                    style={{
+                      flex: 3,
+                      height: "100%",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    <Image
+                      style={{
+                        borderRadius: 50,
+                        width: "100%",
+                        height: "78%",
+                        borderWidth: 3,
+                        borderColor: "red"
+                      }}
+                      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>
+                  <View
+                    style={{
+                      flex: 9,
+                      backgroundColor: "white",
+                      height: "100%",
+
+                      justifyContent: "center"
+                    }}
+                  >
+                    <Text style={{ left: 10, color: "black", fontSize: 20 }}>
+                      修改头像
+                    </Text>
+                  </View>
+                  <View
+                    style={{
+                      flex: 1.5,
+                      alignItems: "center",
+                      height: "56%",
+                      justifyContent: "center"
+                    }}
+                  >
+                    {this.getArraowImg(0)}
+                  </View>
+                </View>
+              </TouchableOpacity>
             </View>
           </ImageBackground>
 
-          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
           <View
             style={{
               width: "100%",
-              flex: 4.1,
+              flex: 8,
               alignItems: "center",
               justifyContent: "center",
               backgroundColor: "#F0F1F5"
@@ -116,7 +172,7 @@ export default class PersonalInfo extends BasePage {
           >
             <View
               style={{
-                backgroundColor: "#F3F3F3",
+                backgroundColor: "rgba(242, 242, 242, 1)",
                 width: "90%",
                 alignItems: "center",
                 justifyContent: "center",
@@ -128,8 +184,7 @@ export default class PersonalInfo extends BasePage {
               {this.userInfo123()}
             </View>
           </View>
-          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
-          <View
+          {/* <View
             style={{
               width: "100%",
               alignItems: "center",
@@ -149,7 +204,10 @@ export default class PersonalInfo extends BasePage {
             >
               {this.userInfo456()}
             </View>
-          </View>
+          </View> */}
+          <View
+            style={{ flex: 0.5, backgroundColor: "rgba(242, 242, 242, 1)" }}
+          />
           <View
             style={{
               width: "100%",
@@ -223,160 +281,236 @@ export default class PersonalInfo extends BasePage {
           height: "100%"
         }}
       >
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(0)}
-          </View>
+        <TouchableOpacity
+          style={styles.item}
+          activeOpacity={1}
+          onPress={() => this.arrowpress(1)}
+        >
+          <View style={styles.item}>
+            <View
+              style={{
+                flex: 2,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.choseheadericon(1)}
+            </View>
 
-          <Text style={styles.item_text}>头像</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(0)}
-          </View>
-        </View>
-        <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(1)}
-          </View>
+            <Text style={styles.item_text}>昵称</Text>
+            <View
+              style={{
+                flex: 5,
+                alignItems: "flex-end"
+              }}
+            >
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 16,
+                  textAlignVertical: "center"
+                }}
+              >
+                {this.state.nickName}
+              </Text>
+            </View>
 
-          <Text style={styles.item_text}>{this.state.nickName}</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(1)}
+            <View
+              style={{
+                flex: 1.1,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.getArraowImg(1)}
+            </View>
           </View>
-        </View>
+        </TouchableOpacity>
         <View style={{ flex: 0.05 }} />
 
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(2)}
-          </View>
-
-          <Text style={styles.item_text}>生日</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(2)}
-          </View>
-        </View>
-      </View>
-    );
-  }
+        <TouchableOpacity
+          style={styles.item}
+          activeOpacity={1}
+          onPress={() => this.arrowpress(2)}
+        >
+          <View style={styles.item}>
+            <View
+              style={{
+                flex: 2,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.choseheadericon(2)}
+            </View>
 
-  userInfo456() {
-    return (
-      <View
-        style={{
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%"
-        }}
-      >
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(3)}
+            <Text style={styles.item_text}>生日</Text>
+            <View
+              style={{
+                flex: 5,
+                alignItems: "flex-end"
+              }}
+            >
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 16,
+                  textAlignVertical: "center"
+                }}
+              >
+                生日。。。。
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 1.1,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.getArraowImg(2)}
+            </View>
           </View>
+        </TouchableOpacity>
+        <View style={{ flex: 0.05 }} />
+        <TouchableOpacity
+          style={styles.item}
+          activeOpacity={1}
+          onPress={() => this.arrowpress(3)}
+        >
+          <View style={styles.item}>
+            <View
+              style={{
+                flex: 2,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.choseheadericon(3)}
+            </View>
 
-          <Text style={styles.item_text}>所在地区</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(3)}
+            <Text style={styles.item_text}>所在地区</Text>
+            <View
+              style={{
+                flex: 5,
+                alignItems: "flex-end"
+              }}
+            >
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 16,
+                  textAlignVertical: "center"
+                }}
+              >
+                所在地区。。。。
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 1.1,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.getArraowImg(3)}
+            </View>
           </View>
-        </View>
+        </TouchableOpacity>
         <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(4)}
-          </View>
+        <TouchableOpacity
+          style={styles.item}
+          activeOpacity={1}
+          onPress={() => this.arrowpress(4)}
+        >
+          <View style={styles.item}>
+            <View
+              style={{
+                flex: 2,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.choseheadericon(4)}
+            </View>
 
-          <Text style={styles.item_text}>{this.state.schoolName}</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(4)}
+            <Text style={styles.item_text}>我的学校</Text>
+            <View
+              style={{
+                flex: 5,
+                alignItems: "flex-end"
+              }}
+            >
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 16,
+                  textAlignVertical: "center"
+                }}
+              >
+                {this.state.schoolName}
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 1.1,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.getArraowImg(4)}
+            </View>
           </View>
-        </View>
+        </TouchableOpacity>
         <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(5)}
-          </View>
+        <TouchableOpacity
+          style={styles.item}
+          activeOpacity={1}
+          onPress={() => this.arrowpress(5)}
+        >
+          <View style={styles.item}>
+            <View
+              style={{
+                flex: 2,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.choseheadericon(5)}
+            </View>
 
-          <Text style={styles.item_text}>我的年级</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(5)}
+            <Text style={styles.item_text}>我的年级</Text>
+            <View
+              style={{
+                flex: 5,
+                alignItems: "flex-end"
+              }}
+            >
+              <Text
+                style={{
+                  flex: 1.1,
+                  fontSize: 16,
+                  textAlignVertical: "center"
+                }}
+              >
+                年级。。。
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 1.1,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              {this.getArraowImg(5)}
+            </View>
           </View>
-        </View>
+        </TouchableOpacity>
       </View>
     );
   }
+
   getArraowImg(type) {
     return (
       <TouchableOpacity
@@ -438,7 +572,7 @@ export default class PersonalInfo extends BasePage {
   arrowpress(type) {
     switch (type) {
       case 0:
-        alert("点击头像");
+        this.chosephoto.setModalVisible(true);
         break;
       case 1:
         this.dialog.setInfo("修改昵称", "昵称");
@@ -464,6 +598,15 @@ export default class PersonalInfo extends BasePage {
     alert("点击退出了");
   }
 }
+export class item extends Component<Props> {
+  render() {
+    return (
+      <View>
+        <View style={{}} />
+      </View>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   item: {
@@ -473,8 +616,7 @@ const styles = StyleSheet.create({
     backgroundColor: "white"
   },
   item_text: {
-    flex: 10,
-    marginLeft: 10,
+    flex: 2,
     textAlignVertical: "center",
     color: "black",
     fontSize: 20

+ 5 - 1
pages/components/SchedulePage.js

@@ -53,7 +53,7 @@ export default class SchedulePage extends BasePage {
       videoImage_y: 0.0,
       video_uri:
         "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4",
-      title_height: "6%",
+      title_height: "9%",
       video_frame_height: "32%",
       seat_height: "2%",
       flatlist_height: "60%",
@@ -276,6 +276,7 @@ export default class SchedulePage extends BasePage {
     );
   }
   showSharedDialog() {
+    this.video.pause();
     this.shareddialog.setModalVisible(true);
   }
   onBackAndroid() {
@@ -292,6 +293,9 @@ export default class SchedulePage extends BasePage {
   }
   onEnd() {
     alert("播放结束");
+    this.setState({
+      video_show: false
+    });
     this.video.refreshVideo();
   }
   fullScreenPlayer() {