Browse Source

1.提交分享框
2.给课程表界面增加分享框
3.增加分享框图片

zhangmengjie 5 years ago
parent
commit
8e8464c480

+ 7 - 1
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;

+ 234 - 0
pages/components/SharedDialog.js

@@ -0,0 +1,234 @@
+/**
+ * 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
+    });
+  }
+}

BIN
pages/images/share/circle.png


BIN
pages/images/share/circle@2x.png


BIN
pages/images/share/circle@3x.png


BIN
pages/images/share/wechat.png


BIN
pages/images/share/wechat@2x.png


BIN
pages/images/share/wechat@3x.png