'合并代码串联点击'

pages/BasePage.js

@@ -22,13 +22,6 @@ import {
 import AndroidUtil from "../util/AndroidUtil";
 
 
-const instructions = Platform.select({
-  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
-  android:
-    "Double tap R on your keyboard to reload,\n" +
-    "Shake or press menu button for dev menu"
-});
-
 type Props = {};
 var width = Dimensions.get("window").width;
 var height = Dimensions.get("window").height;
@@ -52,9 +45,11 @@ export default class BasePage extends Component<Props> {
     return width;
   }
 
-  toNextPage(params) {
+  toNextPage= (params) => {
     //跳转之前移除当前界面的监听
     this.removeListener();
+    console.log('跳转参数',params)
+    console.log(this.props)
     this.props.navigation.navigate(params);
   }
   Toast(params) {

pages/components/CusVideo.js

@@ -7,10 +7,12 @@ import {
   Button,
   Image,
   TouchableOpacity,
+  PanResponder,
   StyleSheet
 } from "react-native";
 import { createStackNavigator, createAppContainer } from "react-navigation";
 import Video from "react-native-video";
+import SeekBar from "../components/SeekBar";
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:
@@ -20,7 +22,20 @@ const instructions = Platform.select({
 
 type Props = {};
 export default class CusVideo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.pressStatus = false;
+    this.progress = 0;
+  }
+  config = {
+    changeX: 0,
+    changeY: 0,
+    xDiff: 0,
+    yDiff: 0
+  };
+
   state = {
+    player_status_icon: require("../images/video/start.png"),
     rate: 1,
     volume: 1,
     muted: false,
@@ -28,13 +43,21 @@ export default class CusVideo extends React.Component {
     duration: 0.0,
     currentTime: 0.0,
     paused: false,
-    wheel: false
+    wheel: false,
+    isFull: false,
+    needback: this.props.needback,
+    show_controller: true,
+    show_loading: true
   };
 
   render() {
+    if (!this.props.show) {
+      return null;
+    }
     return (
-      <View style={this.props.style}>
+      <View style={[this.props.style, { overflow: "hidden" }]}>
         <Video
+          {...this.videotouch.panHandlers}
           style={{ flex: 1 }}
           source={{
             uri: this.props.uri
@@ -43,8 +66,9 @@ export default class CusVideo extends React.Component {
             this.player = ref;
           }}
           // poster={this.props.poster}
-          resizeMode={this.state.resizeMode}
+          resizeMode={[this.state.resizeMode]}
           // posterResizeMode={this.state.resizeMode}
+          onBuffer={this.onBuffer.bind(this)}
           rate={this.state.rate} //播放速率
           paused={this.state.paused} //暂停
           volume={this.state.volume} //调节音量
@@ -61,84 +85,110 @@ export default class CusVideo extends React.Component {
           playInBackground={false} // 当app转到后台运行的时候，播放是否暂停
           playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
-        <View style={[styles.player_controller]}>
-          <View
-            style={{
-              flex: 1,
-              alignItems: "center"
-            }}
-          >
-            {/* 暂停播放按钮 */}
-            <TouchableOpacity
-              //点击事件放在这个组件里才管用
-              style={{
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
-              }}
-              onPress={() => this.play()}
-            >
-              <Image
-                style={[styles.player_pause_icon]}
-                //source={require("../imgs/player_image_state_pause.png")}
-              />
-            </TouchableOpacity>
-          </View>
-          <View style={{ flex: 3 }}>
-            {/* //左侧当前播放时长 */}
-            <Text style={[styles.player_time]}>
-              {formatTime(this.state.currentTime)}
-            </Text>
-          </View>
-          <View
-            style={{
-              flex: 7,
-              backgroundColor: "yellow"
-            }}
-          >
-            {/* //中间进度条 */}
-            {/* <SeekBar
-                style={{
-                  flex: 1,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%"
-                }}
-                max={this.state.duration}
-                progress={this.state.currentTime}
-              /> */}
-          </View>
-          <View style={{ flex: 3 }}>
-            {/* //右侧总时长 */}
-            <Text style={[styles.player_time]}>
-              {formatTime(this.state.duration)}
-            </Text>
-          </View>
-          <TouchableOpacity
-            style={{ flex: 1 }}
-            onPress={() => this.presentFullscreenPlayer()}
-          >
-            <View style={{ flex: 1 }}>
-              {/* //放大按钮 */}
-              <Image style={[styles.player_pause_icon]} />
-            </View>
-          </TouchableOpacity>
+        <View
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <Loading show={this.state.show_loading} />
         </View>
+        <TopController
+          ref={view => (this.topcontroller = view)}
+          needback={this.state.needback}
+          videoback={this.videoBackClick.bind(this)}
+        />
+        <BottomController
+          ref={view => (this.bottomcontroller = view)}
+          show={this.state.show_controller}
+          touch_up_callback={this.touch_up_callback.bind(this)}
+          full_click={this.presentFullscreenPlayer.bind(this)}
+          play_click={this.play.bind(this)}
+          duration={this.state.duration}
+          currentTime={this.state.currentTime}
+          player_status_icon={this.state.player_status_icon}
+        />
       </View>
     );
   }
 
+  componentWillMount() {
+    this.videotouch = PanResponder.create({
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        this.pressStatus = true;
+        this.config.changeY = evt.nativeEvent.pageY;
+        this.config.changeX = evt.nativeEvent.pageX;
+        if (this.state.show_controller) {
+          this.hideController();
+        } else {
+          this.showController();
+        }
+        console.log("onPanResponderGrant");
+      },
+      onPanResponderStart: (evt, gestureState) => {
+        this.pressStatus = true;
+        console.log("onPanResponderStart");
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        this.config.yDiff = evt.nativeEvent.pageY - this.config.changeY;
+        this.config.xDiff = evt.nativeEvent.pageX - this.config.changeX;
+        this.config.changeY = evt.nativeEvent.pageY;
+        this.config.changeX = evt.nativeEvent.pageX;
+      },
+      onPanResponderEnd: (evt, gestureState) => {
+        this.pressStatus = true;
+        console.log("onPanResponderEnd");
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        if (this.pressStatus) {
+          this.props.onPress && this.props.onPress();
+        }
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
+        // 默认返回true。目前暂时只支持android。
+        //基于业务交互场景，如果这里使用js事件处理，会导致容器不能左右滑动。所以设置成false.
+        return false;
+      }
+    });
+  }
+
   loadStart() {
     // alert("loadStart");
   }
+
+  onBuffer({ isBuffering }: { isBuffering: boolean }) {
+    //true为正在加载，false为没有加载，此处给loading提示
+    this.setState({
+      show_loading: isBuffering
+    });
+    console.log("isBuffering:" + isBuffering);
+  }
   onLoad = data => {
     //获取的是秒数
     this.setState({ duration: data.duration });
+    this.bottomcontroller.setMax(data.duration);
   };
   onProgress = data => {
     this.setState({
       currentTime: data.currentTime
     });
+    if (this.state.show_controller) {
+      this.bottomcontroller.setProgress(this.state.currentTime);
+      this.bottomcontroller.setMax(this.state.duration);
+    }
   };
 
   onError() {
@@ -148,6 +198,7 @@ export default class CusVideo extends React.Component {
     alert("播放结束");
   }
   play() {
+    //controller的play点击无法换图...
     if (this.state.paused) {
       this.start();
     } else {
@@ -155,21 +206,45 @@ export default class CusVideo extends React.Component {
     }
   }
   pause() {
-    this.setState({ paused: true });
+    this.setState({
+      paused: true,
+      player_status_icon: require("../images/video/start.png")
+    });
     this.player_icon_index = 1;
   }
   start() {
-    this.setState({ paused: false });
+    this.setState({
+      paused: false,
+      player_status_icon: require("../images/video/pause.png")
+    });
     this.player_icon_index = 0;
   }
-  showToast(params) {
-    // ToastExample.message(params);
-    ToastExample.show(params, ToastExample.SHORT);
+
+  seekTo(progress) {
+    this.player.seek(progress);
   }
   presentFullscreenPlayer() {
-    // alert("点击调用全屏");
+    if (this.state.isFull) {
+      this.setState({
+        isFull: false,
+        needback: this.props.needback
+      });
+    } else {
+      this.setState({
+        isFull: true,
+        needback: true
+      });
+    }
+
     this.props.videofullScreenPlayer();
-    // this.player.presentFullscreenPlayer();
+    this.bottomcontroller.setProgress(this.state.currentTime);
+  }
+  touch_up_callback(progress) {
+    //抬起之后，获取算出来的progress
+    this.setState({
+      currentTime: progress
+    });
+    this.seekTo(progress);
   }
 
   refreshVideo() {
@@ -178,8 +253,254 @@ export default class CusVideo extends React.Component {
       currentTime: 0
     });
   }
+
+  videoBackClick() {
+    // if (this.props.needback != undefined && this.props.needback) {
+    // }
+    if (this.state.isFull) {
+      //全屏状态下，变小屏
+      this.presentFullscreenPlayer();
+    } else {
+      this.props.videoback();
+    }
+  }
+  showController() {
+    this.setState({
+      show_controller: true
+      // needback: this.props.needback
+    });
+    this.bottomcontroller.setBottom(0);
+    this.topcontroller.setTop(0);
+  }
+  hideController() {
+    this.setState({
+      show_controller: false
+      // needback: false
+    });
+    this.bottomcontroller.setBottom(-50);
+    this.topcontroller.setTop(-50);
+  }
 }
 
+/**
+ * 将秒转换为 分:秒
+ * s int 秒数
+ */
+function formatTime(s) {
+  //计算分钟
+  //算法：将秒数除以60，然后下舍入，既得到分钟数
+  var h;
+  h = Math.floor(s / 60);
+  //计算秒
+  //算法：取得秒%60的余数，既得到秒数
+  s = Math.round(s % 60);
+  //将变量转换为字符串
+  h += "";
+  s += "";
+  //如果只有一位数，前面增加一个0
+  h = h.length == 1 ? "0" + h : h;
+  s = s.length == 1 ? "0" + s : s;
+  return h + ":" + s;
+}
+class TopController extends Component {
+  state = {
+    controller_top: 0
+  };
+  render() {
+    if (this.props.needback == false) {
+      return null;
+    }
+    return (
+      <View
+        style={[styles.player_controller, { top: this.state.controller_top }]}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: "center"
+          }}
+        >
+          <TouchableOpacity
+            //点击事件放在这个组件里才管用
+            style={{
+              justifyContent: "center",
+              width: "100%",
+              height: "100%"
+            }}
+            onPress={() => this.props.videoback()}
+          >
+            <Image
+              style={[styles.player_pause_icon]}
+              source={require("../images/video/back.png")}
+            />
+          </TouchableOpacity>
+        </View>
+        <View style={{ flex: 2 }} />
+        <View
+          style={{
+            flex: 9,
+            overflow: "hidden"
+          }}
+        />
+        <View style={{ flex: 2 }} />
+        <View
+          style={{
+            flex: 1,
+            alignItems: "center"
+          }}
+        />
+      </View>
+    );
+  }
+
+  setTop(top) {
+    this.setState({
+      controller_top: top
+    });
+  }
+}
+
+class Loading extends Component {
+  state = {
+    image_arr: [
+      require("../images/video/loading1.png"),
+      require("../images/video/loading2.png"),
+      require("../images/video/loading3.png"),
+      require("../images/video/loading3.png"),
+      require("../images/video/loading4.png"),
+      require("../images/video/loading5.png"),
+      require("../images/video/loading6.png"),
+      require("../images/video/loading7.png"),
+      require("../images/video/loading8.png"),
+      require("../images/video/loading9.png"),
+      require("../images/video/loading10.png"),
+      require("../images/video/loading11.png"),
+      require("../images/video/loading12.png"),
+      require("../images/video/loading13.png"),
+      require("../images/video/loading14.png"),
+      require("../images/video/loading15.png"),
+      require("../images/video/loading16.png"),
+      require("../images/video/loading17.png"),
+      require("../images/video/loading18.png"),
+      require("../images/video/loading19.png"),
+      require("../images/video/loading20.png")
+    ],
+    loading_index: 0
+  };
+  render() {
+    if (this.props.show) {
+      return (
+        <Image
+          source={this.state.image_arr[this.state.loading_index]}
+          style={{ width: "20%", height: "10%", backgroundColor: "blue" }}
+        />
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+class BottomController extends Component {
+  state = {
+    controller_bottom: 0
+  };
+
+  render() {
+    return (
+      <View
+        style={[
+          styles.player_controller,
+          { bottom: this.state.controller_bottom }
+        ]}
+      >
+        <View
+          style={{
+            flex: 1,
+            alignItems: "center"
+          }}
+        >
+          {/* 暂停播放按钮 */}
+          <TouchableOpacity
+            //点击事件放在这个组件里才管用
+            style={{
+              justifyContent: "center",
+              width: "100%",
+              height: "100%"
+            }}
+            onPress={() => this.props.play_click()}
+          >
+            <Image
+              style={[styles.player_pause_icon]}
+              source={this.props.player_status_icon}
+            />
+          </TouchableOpacity>
+        </View>
+        <View style={{ flex: 2 }}>
+          {/* //左侧当前播放时长 */}
+          <Text style={[styles.player_time]}>
+            {formatTime(this.props.currentTime)}
+          </Text>
+        </View>
+        <View
+          style={{
+            flex: 9,
+            overflow: "hidden"
+          }}
+        >
+          {/* //中间进度条 */}
+          <SeekBar
+            style={{ flex: 1 }}
+            ref={view => (this.seekbar = view)}
+            //必须带此方法，作为滑动之后抬起的回调
+            touchUpCallBack={this.props.touch_up_callback}
+          />
+        </View>
+        <View style={{ flex: 2 }}>
+          {/* //右侧总时长 */}
+          <Text style={[styles.player_time]}>
+            {formatTime(this.props.duration)}
+          </Text>
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: "center"
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              justifyContent: "center",
+              width: "100%",
+              height: "100%"
+            }}
+            onPress={() => this.props.full_click()}
+          >
+            {/* //放大按钮 */}
+            <Image
+              style={[styles.fullscreen_icon]}
+              source={require("../images/video/fullscreen.png")}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+  setMax(duration) {
+    this.seekbar.setMax(duration);
+  }
+  getMax() {
+    return this.seekbar.getMax();
+  }
+  setBottom(bottom) {
+    this.setState({
+      controller_bottom: bottom
+    });
+  }
+  setProgress(currentTime) {
+    this.seekbar.setProgress(currentTime);
+  }
+}
 const styles = StyleSheet.create({
   player_controller: {
     flexDirection: "row",
@@ -187,15 +508,22 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 50,
     alignItems: "center",
-    bottom: 0
+    justifyContent: "center"
   },
   player_pause_icon: {
-    width: "100%",
+    width: "80%",
     resizeMode: "center",
-    height: "80%",
+    height: "40%",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "blue"
+    left: 5
+  },
+  fullscreen_icon: {
+    width: "80%",
+    resizeMode: "center",
+    height: "30%",
+    justifyContent: "center",
+    alignItems: "center"
   },
   player_time: {
     fontSize: 18,
@@ -208,22 +536,19 @@ const styles = StyleSheet.create({
 });
 
 /**
- * 将秒转换为 分:秒
- * s int 秒数
+  使用方法
+  <CusVideo
+      uri={this.state.video_uri}
+       ref={view => (this.video = view)}
+       needback={true} //(是否需要小窗口的返回按钮)
+       videoback={this.clickVideoBack.bind(this)}//(小窗口返回按钮的事件)
+       videofullScreenPlayer={this.fullScreenPlayer.bind(this)}//(点击全屏按钮的事件)
+       style={{
+       flex: this.state.video_flex,
+         width: this.state.video_width,
+         height: this.state.video_height
+         }}
+   />
+
+
  */
-function formatTime(s) {
-  //计算分钟
-  //算法：将秒数除以60，然后下舍入，既得到分钟数
-  var h;
-  h = Math.floor(s / 60);
-  //计算秒
-  //算法：取得秒%60的余数，既得到秒数
-  s = Math.round(s % 60);
-  //将变量转换为字符串
-  h += "";
-  s += "";
-  //如果只有一位数，前面增加一个0
-  h = h.length == 1 ? "0" + h : h;
-  s = s.length == 1 ? "0" + s : s;
-  return h + ":" + s;
-}

pages/components/MainPage.js

@@ -206,9 +206,7 @@ export default class MainPage extends BasePage {
       return (
         <TouchableOpacity
           style={{ width: 172, height: 86, marginRight: 12 }}
-          onPress={() => {
-            alert(Dimensions.width.toString());
-          }}
+          onPress={()=>this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
         >

pages/components/PersonalInfo.js

@@ -50,24 +50,32 @@ export default class PersonalInfo extends BasePage {
           translucent={false}
         />
 
-        <ImageBackground
-          source={require("../images/userInfo/topbg.png")}
-          style={{ flex: 1 }}
-          imageStyle={{ resizeMode: "contain" }}
+        <View
+          style={{
+            flex: 1,
+            flexDirection: "column"
+          }}
         >
-          <View
+          <ImageBackground
+            source={require("../images/userInfo/top.png")}
             style={{
-              flex: 1,
-              flexDirection: "column"
+              flex: 5,
+              width: "100%",
+              backgroundColor: "#F0F1F5",
+              height: "73%"
             }}
+            imageStyle={{ resizeMode: "contain" }}
           >
             <View
               style={{
-                width: "100%",
-                flex: 2
+                flex: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column"
               }}
             >
               <CourseTitle
+                style={{ flex: 1 }}
                 width={this.getWindowWidth()}
                 title="个人信息"
                 backPress={() => this.goBack()}
@@ -75,21 +83,11 @@ export default class PersonalInfo extends BasePage {
                 textcolor={"white"}
                 backPress={() => this.goBack()}
               />
-            </View>
-
-            <View
-              style={{
-                width: "100%",
-                flex: 3,
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
               <View
                 style={{
+                  flex: 1.5,
                   backgroundColor: "white",
                   width: "90%",
-                  height: "90%",
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 20,
@@ -104,109 +102,113 @@ export default class PersonalInfo extends BasePage {
                 />
               </View>
             </View>
-            <View style={{ flex: 0.1 }} />
+          </ImageBackground>
+
+          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
+          <View
+            style={{
+              width: "100%",
+              flex: 4.1,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#F0F1F5"
+            }}
+          >
             <View
               style={{
-                width: "100%",
-                flex: 4.1,
+                backgroundColor: "#F3F3F3",
+                width: "90%",
                 alignItems: "center",
-                justifyContent: "center"
+                justifyContent: "center",
+                height: "90%",
+                overflow: "hidden",
+                borderRadius: 20
               }}
             >
-              <View
-                style={{
-                  backgroundColor: "#F3F3F3",
-                  width: "90%",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  height: "90%",
-                  overflow: "hidden",
-                  borderRadius: 20
-                }}
-              >
-                {this.userInfo123()}
-              </View>
+              {this.userInfo123()}
             </View>
-            <View style={{ flex: 0.1 }} />
+          </View>
+          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
+          <View
+            style={{
+              width: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: 4.1,
+              backgroundColor: "#F0F1F5"
+            }}
+          >
             <View
               style={{
-                width: "100%",
-                alignItems: "center",
-                justifyContent: "center",
-                flex: 4.1
+                backgroundColor: "#F3F3F3",
+                width: "90%",
+                height: "90%",
+                overflow: "hidden",
+                borderRadius: 20
               }}
             >
+              {this.userInfo456()}
+            </View>
+          </View>
+          <View
+            style={{
+              width: "100%",
+              flex: 4,
+              backgroundColor: "#F0F1F5",
+              flexDirection: "column"
+            }}
+          >
+            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              <View style={{ flex: 1 }} />
               <View
                 style={{
-                  backgroundColor: "#F3F3F3",
-                  width: "90%",
-                  height: "90%",
-                  overflow: "hidden",
-                  borderRadius: 20
+                  flex: 7,
+                  width: "100%",
+                  height: "100%"
                 }}
               >
-                {this.userInfo456()}
-              </View>
-            </View>
-            <View
-              style={{
-                width: "100%",
-                flex: 4,
-                flexDirection: "column"
-              }}
-            >
-              <View style={{ flex: 0.5 }} />
-              <View style={{ flex: 1, flexDirection: "row" }}>
-                <View style={{ flex: 1 }} />
-                <View
+                <TouchableOpacity
+                  activeOpacity={1}
                   style={{
-                    flex: 7,
+                    flex: 1,
                     width: "100%",
+                    alignItems: "center",
+                    justifyContent: "center",
                     height: "100%"
                   }}
+                  onPress={() => this.logout()}
                 >
-                  <TouchableOpacity
-                    activeOpacity={1}
+                  <ImageBackground
+                    source={require("../images/userInfo/logoutbg1.png")}
                     style={{
                       flex: 1,
                       width: "100%",
+                      resizeMode: "repeat",
                       alignItems: "center",
                       justifyContent: "center",
                       height: "100%"
                     }}
-                    onPress={() => this.logout()}
+                    imageStyle={{ resizeMode: "contain" }}
                   >
-                    <ImageBackground
-                      source={require("../images/userInfo/logoutbg1.png")}
+                    <Text
                       style={{
-                        flex: 1,
+                        fontSize: 30,
+                        color: "white",
                         width: "100%",
-                        resizeMode: "repeat",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        height: "100%"
+                        textAlign: "center"
                       }}
-                      imageStyle={{ resizeMode: "contain" }}
                     >
-                      <Text
-                        style={{
-                          fontSize: 30,
-                          color: "white",
-                          width: "100%",
-                          textAlign: "center"
-                        }}
-                      >
-                        退出登录
-                      </Text>
-                    </ImageBackground>
-                  </TouchableOpacity>
-                  <View style={{ flex: 1 }} />
-                </View>
+                      退出登录
+                    </Text>
+                  </ImageBackground>
+                </TouchableOpacity>
                 <View style={{ flex: 1 }} />
               </View>
+              <View style={{ flex: 1 }} />
             </View>
           </View>
-        </ImageBackground>
+        </View>
       </View>
     );
   }

pages/components/PersonalInfoDialog.js

@@ -38,7 +38,11 @@ export default class PersonalInfoDialog extends Component<Props> {
   };
 
   setModalVisible(visible, type) {
-    this.setState({ modalVisible: visible, updateType: type });
+    this.setState({
+      modalVisible: visible,
+      updateType: type,
+      input_text: ""
+    });
   }
   setInfo(mytitle, holder) {
     this.setState({

pages/components/SchedulePage.js

@@ -16,6 +16,8 @@ import {
   TouchableOpacity,
   ImageBackground,
   FlatList,
+  findNodeHandle,
+  UIManager,
   StatusBar,
   Button,
   DeviceEventEmitter
@@ -39,12 +41,14 @@ export default class SchedulePage extends BasePage {
     super(props);
     this.state = {
       statusbar_hidden: false,
+      video_show: false,
+      x: 0.0,
+      y: 0.0,
       videoImg_flex: 1,
-      videoImg_width: "100%",
-      videoImg_height: "100%",
-      video_flex: 0,
-      video_width: "0%",
-      video_height: "0%",
+      videoImage_width: 0,
+      videoImage_height: 0,
+      videoImage_x: 0.0,
+      videoImage_y: 0.0,
       video_uri:
         "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8",
       title_height: "6%",
@@ -107,19 +111,11 @@ export default class SchedulePage extends BasePage {
                   "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"
               }}
               style={{
-                flex: this.state.videoImg_flex,
-                width: this.state.videoImg_width,
-                height: this.state.videoImg_height
+                width: "100%",
+                height: "100%"
               }}
-            />
-            <CusVideo
-              uri={this.state.video_uri}
-              ref={view => (this.video = view)}
-              videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
-              style={{
-                flex: this.state.video_flex,
-                width: this.state.video_width,
-                height: this.state.video_height
+              ref={c => {
+                this.video_image = c;
               }}
             />
           </View>
@@ -229,6 +225,22 @@ export default class SchedulePage extends BasePage {
             />
           </View>
         </View>
+        <CusVideo
+          show={this.state.video_show}
+          uri={this.state.video_uri}
+          ref={view => (this.video = view)}
+          needback={false}
+          videoback={() => alert("videoback")}
+          videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          style={{
+            left: this.state.x,
+            top: this.state.y,
+            width: this.state.video_width,
+            height: this.state.video_height,
+            overflow: "hidden",
+            position: "absolute"
+          }}
+        />
       </View>
     );
   }
@@ -246,20 +258,28 @@ export default class SchedulePage extends BasePage {
     if (!this.state.isFull) {
       Orientation.lockToLandscape();
       this.setState({
-        title_height: "0%",
+        // title_height: "0%",
         video_frame_height: "100%",
-        seat_height: "0%",
-        flatlist_height: "0%",
+        // seat_height: "0%",
+        // flatlist_height: "0%",
         statusbar_hidden: true,
-        isFull: true
+        isFull: true,
+        x: 0,
+        y: 0,
+        video_width: "100%",
+        video_height: "100%"
       });
     } else {
       Orientation.lockToPortrait();
       this.setState({
-        title_height: "6%",
+        // title_height: "6%",
         video_frame_height: "32%",
-        seat_height: "2%",
-        flatlist_height: "60%",
+        // seat_height: "2%",
+        // flatlist_height: "60%",
+        x: this.state.videoImage_x,
+        y: this.state.videoImage_y,
+        video_width: this.state.videoImage_width,
+        video_height: this.state.videoImage_height,
         statusbar_hidden: false,
         isFull: false
       });
@@ -268,15 +288,25 @@ export default class SchedulePage extends BasePage {
   changeUrl(url) {
     //切换视频并且播放
     // alert(url);
-    this.setState({
-      videoImg_flex: 0,
-      videoImg_width: "0%",
-      videoImg_height: "0%",
-      video_flex: 1,
-      video_width: "100%",
-      video_height: "100%",
-      video_uri: url
-    });
+    const handle = findNodeHandle(this.video_image);
+    setTimeout(() => {
+      UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
+        console.warn(x, y, width, height, pageX, pageY);
+        this.setState({
+          x: pageX,
+          y: pageY,
+          video_width: width,
+          video_height: height,
+          videoImage_width: width,
+          videoImage_height: height,
+          videoImage_x: pageX,
+          videoImage_y: pageY,
+          video_show: true,
+          video_uri: url
+        });
+      });
+    }, 0);
+
     this.video.refreshVideo();
     this.video.start();
   }

pages/components/ScrollRow.js

@@ -14,9 +14,10 @@ import {
     TouchableOpacity,
     Image
 } from "react-native";
+import BasePage from '../BasePage'
 import Dimensions from '../utils/dimensions'
 
-export default class ScrollRow extends Component {
+export default class ScrollRow extends BasePage {
 
 
     render() {
@@ -31,6 +32,7 @@ export default class ScrollRow extends Component {
     }
 
     renderItem(item, separators) {
+        console.log(this.toNextPage)
         return (
             <TouchableOpacity
                 style={{
@@ -41,9 +43,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => {
-                    alert(item.title);
-                }}
+                onPress={() => this.toNextPage('SchedulePage')}
                 activeOpacity={1}
             >
                 <View style={{

pages/components/SeekBar.js

@@ -0,0 +1,262 @@
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  Button,
+  PanResponder,
+  ImageBackground,
+  findNodeHandle,
+  UIManager,
+  DeviceEventEmitter
+} from "react-native";
+import BasePage from "../BasePage";
+const instructions = Platform.select({
+  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+  android:
+    "Double tap R on your keyboard to reload,\n" +
+    "Shake or press menu button for dev menu"
+});
+
+type Props = {};
+export default class SeekBar extends BasePage {
+  constructor(props) {
+    super(props);
+    this.pressStatus = false;
+    this.progress = 0;
+  }
+
+  config = {
+    changeX: 0,
+    changeY: 0,
+    xDiff: 0,
+    yDiff: 0
+  };
+  state = {
+    max: 1,
+    view_width: 0,
+    icon_transform: [{ scale: 1 }],
+    left: 0,
+    top: 0,
+    touch_down: false
+  };
+  render() {
+    return (
+      <View
+        style={{
+          height: 80,
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <View
+          style={{
+            height: 20,
+            width: "98%"
+          }}
+          ref={c => {
+            this.progressBar = c;
+          }}
+          onLayout={() => {
+            const handle = findNodeHandle(this.progressBar);
+            setTimeout(() => {
+              UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
+                // console.warn(x, y, width, height, pageX, pageY);
+                this.setState({
+                  view_width: width
+                });
+                this.setProgress(this.progress);
+              });
+            }, 0);
+          }}
+        >
+          <ImageBackground
+            style={{
+              height: 2,
+              width: "100%",
+              backgroundColor: "#DBDBDB",
+              overflow: "hidden",
+              borderRadius: 10,
+              top: 10
+            }}
+          >
+            <View
+              style={{
+                height: 2,
+                width: this.state.left + 3,
+                backgroundColor: "#FFA91C",
+                overflow: "hidden",
+                borderRadius: 10
+              }}
+            />
+          </ImageBackground>
+
+          <Image
+            {...this._panResponder.panHandlers}
+            style={{
+              height: 14,
+              width: 14,
+              borderRadius: 10,
+              backgroundColor: "#FFA91C",
+              transform: this.state.icon_transform,
+              left: this.state.left,
+              top: 2
+            }}
+          />
+        </View>
+      </View>
+    );
+  }
+  componentWillMount() {
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        this.pressStatus = true;
+        this.config.changeY = evt.nativeEvent.pageY;
+        this.config.changeX = evt.nativeEvent.pageX;
+      },
+      onPanResponderStart: (evt, gestureState) => {
+        this.pressStatus = true;
+        console.log("onPanResponderStart");
+        this.setState({
+          icon_transform: [{ scale: 1.5 }],
+          touch_down: true
+        });
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        this.config.yDiff = evt.nativeEvent.pageY - this.config.changeY;
+        this.config.xDiff = evt.nativeEvent.pageX - this.config.changeX;
+        this.state.left = this.state.left + this.config.xDiff;
+        this.state.top = this.state.top + this.config.yDiff;
+        this.config.changeY = evt.nativeEvent.pageY;
+        this.config.changeX = evt.nativeEvent.pageX;
+        if (
+          this.state.left < 0 ||
+          this.state.left > this.state.view_width - 14
+        ) {
+          if (this.state.left < 0) {
+            this.state.left = 0;
+          } else if (this.state.left > this.state.view_width - 14) {
+            this.state.left = this.state.view_width - 14;
+          }
+          this.setState({
+            left: this.state.left,
+            top: this.state.top
+          });
+        } else {
+          this.setState({
+            left: this.state.left,
+            top: this.state.top
+          });
+          console.log("onPanResponderMove:" + this.state.left);
+        }
+      },
+      onPanResponderEnd: (evt, gestureState) => {
+        this.pressStatus = true;
+        console.log("onPanResponderEnd");
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        if (this.pressStatus) {
+          this.props.onPress && this.props.onPress();
+          this.setState({
+            icon_transform: [{ scale: 1 }],
+            touch_down: false
+          });
+        }
+        this.pressStatus = false;
+        var sss = this.state.left / (this.state.view_width - 14);
+        // alert(sss + "%");
+        this.props.touchUpCallBack(this.state.max * sss);
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
+        // 默认返回true。目前暂时只支持android。
+        //基于业务交互场景，如果这里使用js事件处理，会导致容器不能左右滑动。所以设置成false.
+        return false;
+      }
+    });
+  }
+
+  getTouchDown() {
+    return this.state.touch_down;
+  }
+  setMax(setmax) {
+    this.setState({
+      max: setmax
+    });
+  }
+  getMax() {
+    return this.state.max;
+  }
+  setProgress(progress) {
+    if (this.state.view_width > 0) {
+      this.progress = progress;
+      if (this.state.touch_down) {
+      } else {
+        var left_percentage;
+        if (this.state.max == 0) {
+          left_percentage = progress / 1;
+        } else {
+          left_percentage = progress / this.state.max;
+        }
+        this.setState({
+          left: (this.state.view_width - 14) * left_percentage,
+          icon_transform: [{ scale: 1 }]
+        });
+      }
+    }
+  }
+}
+
+const styles = StyleSheet.create({});
+
+/**
+         <SeekBar
+            ref={view => (this.seekbar = view)}
+            max={100}
+            //必须带此方法，作为滑动之后抬起的回调
+            touchUpCallBack={this.touch_up_callback.bind(this)}
+            progress={this.state.curprogress}
+          />
+
+  state = {
+    curprogress: 0,
+    max: 100
+  };
+ touch_up_callback(progress) {
+    //抬起之后，获取算出来的progress
+    this.setState({
+      curprogress: progress
+    });
+  }
+
+  setProgressIcon() {
+    //轮询设置值，超过max则停止
+    setTimeout(() => {
+      if (!this.seekbar.getTouchDown()) {
+        this.setState({
+          curprogress: this.state.curprogress + 1
+        });
+      }
+
+      if (this.state.curprogress >= this.state.max) {
+        alert("100了");
+      } else {
+        this.setProgressIcon();
+      }
+      this.seekbar.setProgress(this.state.curprogress);
+    }, 1000);
+  }
+
+ */

pages/userCenter.js

@@ -33,9 +33,9 @@ export default class userCenter extends BasePage {
         ifDiscount: true,
         isVIP: false,
         btnArr: [
-            { title: '订单', icon: require('./images/userCenter/order.png'),goTo: 'Order' },
-            { title: '抵用券', icon: require('./images/userCenter/discount.png'),goTo: 'Ticket' },
-            { title: '客服', icon: require('./images/userCenter/service.png'),goTo: 'Order' },
+            { title: '订单', icon: require('./images/userCenter/order.png'), goTo: 'Order' },
+            { title: '抵用券', icon: require('./images/userCenter/discount.png'), goTo: 'Ticket' },
+            { title: '客服', icon: require('./images/userCenter/service.png'), goTo: 'Order' },
         ],
         shopData: [
             { title: '1个月', originPrice: '199', price: '49', background: require('./images/shopBox/left.png') },
@@ -93,7 +93,10 @@ export default class userCenter extends BasePage {
                         style={{ width: '100%', height: 203 }}
                     >
                         <View style={styles.userInfo}>
-                            <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
+                            <TouchableOpacity onPress={() => this.goTo(`PersonalInfo`)}>
+                                <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
+                            </TouchableOpacity>
+
                             <View style={styles.userRight}>
                                 <View style={styles.userName}>
                                     <Text style={styles.userNameText}>{this.state.user.nickName}</Text>
@@ -127,7 +130,7 @@ export default class userCenter extends BasePage {
             </ScrollView>
         )
     }
-    goTo(index){
+    goTo(index) {
         this.toNextPage(index)
     }
 }