1.修改seekbar组件，横屏时为止校准

2.修改CusVideo组件，为其添加SeekBar组件

pages/components/CusVideo.js

@@ -11,6 +11,7 @@ import {
 } 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:
@@ -45,6 +46,7 @@ export default class CusVideo extends React.Component {
           // poster={this.props.poster}
           resizeMode={this.state.resizeMode}
           // posterResizeMode={this.state.resizeMode}
+          onBuffer={this.onBuffer}
           rate={this.state.rate} //播放速率
           paused={this.state.paused} //暂停
           volume={this.state.volume} //调节音量
@@ -93,20 +95,16 @@ export default class CusVideo extends React.Component {
           <View
             style={{
               flex: 7,
-              backgroundColor: "yellow"
+              overflow: "hidden"
             }}
           >
             {/* //中间进度条 */}
-            {/* <SeekBar
-                style={{
-                  flex: 1,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%"
-                }}
-                max={this.state.duration}
-                progress={this.state.currentTime}
-              /> */}
+            <SeekBar
+              style={{ flex: 1 }}
+              ref={view => (this.seekbar = view)}
+              //必须带此方法，作为滑动之后抬起的回调
+              touchUpCallBack={this.touch_up_callback.bind(this)}
+            />
           </View>
           <View style={{ flex: 3 }}>
             {/* //右侧总时长 */}
@@ -131,14 +129,20 @@ export default class CusVideo extends React.Component {
   loadStart() {
     // alert("loadStart");
   }
+  onBuffer({ isBuffering }: { isBuffering: boolean }) {
+    //true为正在加载，false为没有加载，此处给loading提示
+    console.log("isBuffering:" + isBuffering);
+  }
   onLoad = data => {
     //获取的是秒数
     this.setState({ duration: data.duration });
+    this.seekbar.setMax(data.duration);
   };
   onProgress = data => {
     this.setState({
       currentTime: data.currentTime
     });
+    this.seekbar.setProgress(this.state.currentTime);
   };
 
   onError() {
@@ -166,10 +170,23 @@ export default class CusVideo extends React.Component {
     // ToastExample.message(params);
     ToastExample.show(params, ToastExample.SHORT);
   }
+  seekTo(progress) {
+    this.player.seek(progress);
+  }
   presentFullscreenPlayer() {
     // alert("点击调用全屏");
     this.props.videofullScreenPlayer();
-    // this.player.presentFullscreenPlayer();
+    console.log("currentTime:" + this.state.currentTime);
+    setTimeout(() => {
+      this.seekbar.setProgress(this.state.currentTime);
+    }, 10);
+  }
+  touch_up_callback(progress) {
+    //抬起之后，获取算出来的progress
+    this.setState({
+      currentTime: progress
+    });
+    this.seekTo(progress);
   }
 
   refreshVideo() {

pages/components/SeekBar.js

@@ -24,6 +24,7 @@ export default class SeekBar extends BasePage {
   constructor(props) {
     super(props);
     this.pressStatus = false;
+    this.progress = 0;
   }
 
   config = {
@@ -33,7 +34,7 @@ export default class SeekBar extends BasePage {
     yDiff: 0
   };
   state = {
-    max: this.props.max,
+    max: 1,
     view_width: 0,
     icon_transform: [{ scale: 1 }],
     left: 0,
@@ -46,7 +47,6 @@ export default class SeekBar extends BasePage {
         style={{
           height: 80,
           width: "100%",
-          backgroundColor: "black",
           alignItems: "center",
           justifyContent: "center"
         }}
@@ -69,8 +69,9 @@ export default class SeekBar extends BasePage {
                 this.setState({
                   view_width: width
                 });
+                this.setProgress(this.progress);
               });
-            }, 1000);
+            }, 0);
           }}
         >
           <Image
@@ -79,7 +80,7 @@ export default class SeekBar extends BasePage {
               height: 20,
               width: 20,
               borderRadius: 10,
-              backgroundColor: "yellow",
+              backgroundColor: "blue",
               transform: this.state.icon_transform,
               left: this.state.left,
               top: -8
@@ -170,26 +171,27 @@ export default class SeekBar extends BasePage {
   getTouchDown() {
     return this.state.touch_down;
   }
+  setMax(setmax) {
+    this.setState({
+      max: setmax
+    });
+  }
   setProgress(progress) {
-    if (this.state.touch_down) {
-    } else {
-      var aa = progress / this.state.max;
-      console.warn(
-        "progress:" +
-          progress +
-          "--max:" +
-          this.state.max +
-          " progress/max:" +
-          aa +
-          " moveLeft:" +
-          (this.state.view_width - 20) * aa
-      );
-
-      var aaa = (this.state.view_width - 20) * aa;
-      this.setState({
-        left: (this.state.view_width - 20) * aa,
-        icon_transform: [{ scale: 1 }]
-      });
+    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 - 20) * left_percentage,
+          icon_transform: [{ scale: 1 }]
+        });
+      }
     }
   }
 }