1.修改播放器，增加loading

pages/components/CusVideo.js

@@ -47,7 +47,29 @@ export default class CusVideo extends React.Component {
     isFull: false,
     needback: this.props.needback,
     show_controller: true,
-    show_loading: true
+    show_loading: true,
+    loading_arr: [
+      require("../images/video/loading1.png"),
+      require("../images/video/loading2.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")
+    ]
   };
 
   render() {
@@ -94,7 +116,10 @@ export default class CusVideo extends React.Component {
             justifyContent: "center"
           }}
         >
-          <Loading show={this.state.show_loading} />
+          <Loading
+            loading_arr={this.state.loading_arr}
+            show={this.state.show_loading}
+          />
         </View>
         <TopController
           ref={view => (this.topcontroller = view)}
@@ -361,44 +386,42 @@ class TopController extends Component {
 }
 
 class Loading extends Component {
+  constructor(props) {
+    super(props);
+    this.loading_index = 0;
+  }
   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
+    loading_img: this.props.loading_arr[0]
   };
   render() {
     if (this.props.show) {
       return (
         <Image
-          source={this.state.image_arr[this.state.loading_index]}
-          style={{ width: "20%", height: "10%", backgroundColor: "blue" }}
+          source={this.state.loading_img}
+          style={{ width: "20%", height: "10%" }}
         />
       );
     } else {
       return null;
     }
   }
+  componentWillMount() {
+    this.changeIndex();
+  }
+
+  changeIndex() {
+    setTimeout(() => {
+      if (this.loading_index > this.props.loading_arr.length - 1) {
+        this.loading_index = 1;
+      } else {
+        this.loading_index = this.loading_index + 1;
+      }
+      this.setState({
+        loading_img: this.props.loading_arr[this.loading_index]
+      });
+      this.changeIndex();
+    }, 500);
+  }
 }
 
 class BottomController extends Component {