1.替换播放器UI

2.修改seekbar

pages/components/CusVideo.js

@@ -29,7 +29,8 @@ export default class CusVideo extends React.Component {
     duration: 0.0,
     currentTime: 0.0,
     paused: false,
-    wheel: false
+    wheel: false,
+    player_status_icon: require("../images/video/start.png")
   };
 
   render() {
@@ -82,11 +83,11 @@ export default class CusVideo extends React.Component {
             >
               <Image
                 style={[styles.player_pause_icon]}
-                //source={require("../imgs/player_image_state_pause.png")}
+                source={this.state.player_status_icon}
               />
             </TouchableOpacity>
           </View>
-          <View style={{ flex: 3 }}>
+          <View style={{ flex: 2 }}>
             {/* //左侧当前播放时长 */}
             <Text style={[styles.player_time]}>
               {formatTime(this.state.currentTime)}
@@ -94,7 +95,7 @@ export default class CusVideo extends React.Component {
           </View>
           <View
             style={{
-              flex: 7,
+              flex: 9,
               overflow: "hidden"
             }}
           >
@@ -106,21 +107,33 @@ export default class CusVideo extends React.Component {
               touchUpCallBack={this.touch_up_callback.bind(this)}
             />
           </View>
-          <View style={{ flex: 3 }}>
+          <View style={{ flex: 2 }}>
             {/* //右侧总时长 */}
             <Text style={[styles.player_time]}>
               {formatTime(this.state.duration)}
             </Text>
           </View>
-          <TouchableOpacity
-            style={{ flex: 1 }}
-            onPress={() => this.presentFullscreenPlayer()}
+          <View
+            style={{
+              flex: 1,
+              alignItems: "center"
+            }}
           >
-            <View style={{ flex: 1 }}>
+            <TouchableOpacity
+              style={{
+                justifyContent: "center",
+                width: "100%",
+                height: "100%"
+              }}
+              onPress={() => this.presentFullscreenPlayer()}
+            >
               {/* //放大按钮 */}
-              <Image style={[styles.player_pause_icon]} />
-            </View>
-          </TouchableOpacity>
+              <Image
+                style={[styles.fullscreen_icon]}
+                source={require("../images/video/fullscreen.png")}
+              />
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
     );
@@ -159,11 +172,17 @@ 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) {
@@ -204,15 +223,23 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 50,
     alignItems: "center",
+    justifyContent: "center",
     bottom: 0
   },
   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,

pages/components/SeekBar.js

@@ -55,7 +55,7 @@ export default class SeekBar extends BasePage {
         <View
           style={{
             height: 20,
-            width: "90%"
+            width: "98%"
           }}
           ref={c => {
             this.progressBar = c;
@@ -73,25 +73,37 @@ export default class SeekBar extends BasePage {
             }, 0);
           }}
         >
-          <View
+          <ImageBackground
             style={{
-              height: 5,
+              height: 2,
               width: "100%",
-              backgroundColor: "red",
+              backgroundColor: "#DBDBDB",
               overflow: "hidden",
-              top: 8
+              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: 20,
-              width: 20,
+              height: 14,
+              width: 14,
               borderRadius: 10,
-              backgroundColor: "blue",
+              backgroundColor: "#FFA91C",
               transform: this.state.icon_transform,
               left: this.state.left,
-              top: -4
+              top: 2
             }}
           />
         </View>
@@ -127,12 +139,12 @@ export default class SeekBar extends BasePage {
         this.config.changeX = evt.nativeEvent.pageX;
         if (
           this.state.left < 0 ||
-          this.state.left > this.state.view_width - 20
+          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 - 20) {
-            this.state.left = this.state.view_width - 20;
+          } else if (this.state.left > this.state.view_width - 14) {
+            this.state.left = this.state.view_width - 14;
           }
           this.setState({
             left: this.state.left,
@@ -160,7 +172,7 @@ export default class SeekBar extends BasePage {
           });
         }
         this.pressStatus = false;
-        var sss = this.state.left / (this.state.view_width - 20);
+        var sss = this.state.left / (this.state.view_width - 14);
         // alert(sss + "%");
         this.props.touchUpCallBack(this.state.max * sss);
       },
@@ -196,7 +208,7 @@ export default class SeekBar extends BasePage {
           left_percentage = progress / this.state.max;
         }
         this.setState({
-          left: (this.state.view_width - 20) * left_percentage,
+          left: (this.state.view_width - 14) * left_percentage,
           icon_transform: [{ scale: 1 }]
         });
       }