Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

App.js

@@ -47,7 +47,7 @@ const RootNavigator = createStackNavigator(
     SearchResult: { screen: SearchResult },
   },
   {
-    initialRouteName: "MainPage",
+    initialRouteName: "CourseDetails",
     headerMode: "null"
   }
 );

pages/CourseDetails.js

@@ -17,46 +17,58 @@ import {
 } from "react-native";
 
 import VideoExplain from './components/VideoExplain'
+import CourseListRow from './components/CourseListRow'
+import CourseListLine from './components/CourseListLine'
+import Comment from './components/Comment'
+import Order from './components/Order'
 
-class CourseList extends Component {
+export default class CourseDetails extends Component {
+  state = {
+    fullStyle: {},
+    lefts: 0
+  }
   render() {
     return (
-      <View style={styles.courseList}>
-        <View style={[styles.padding, styles.title]}>
-
-        </View>
+      <View style={{backgroundColor: '#F0F1F5', width: '100%', height: '100%', position: 'relative'}}>
+        <ScrollView>
+          <View>
+            <VideoExplain 
+            full={this.full.bind(this)}
+            title={'同步辅导语文一年级下册'}
+            details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
+            uri={'http://chimee.org/vod/1.mp4'}
+            />
+          </View>
+          <View style={ this.state.fullStyle }>
+            <CourseListRow title={'课件'}></CourseListRow>
+            <CourseListLine title={'课件'}></CourseListLine>
+            <Comment title={ '全部评论' }></Comment>
+          </View> 
+        </ScrollView>
+        <Order left={ this.state.lefts }></Order>
       </View>
     );
   }
-}
+  full(isFull){
+    if(isFull) {
+      // 全屏时隐藏多余的view
+      this.setState({
+        fullStyle: {},
+        lefts: 0
+      })
+    }else {
+      // 全屏时隐藏多余的view
+      this.setState({
+        fullStyle: {
+          display: 'none'
+        },
+        lefts: '-100%'
+      })
+    }
 
-export default class CourseDetails extends Component {
-  render() {
-    return (
-      <ScrollView style={{backgroundColor: '#F0F1F5'}}>
-        <VideoExplain 
-        title={'同步辅导语文一年级下册'}
-        details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-        uri={'http://chimee.org/vod/1.mp4'}
-        />
-        <CourseList></CourseList>
-      </ScrollView>
-    );
   }
 }
 
 const styles = StyleSheet.create({
-  courseList: {
-    width: '100%',
-    backgroundColor: '#fff',
-    marginTop: 8,
-  },
-  padding: {
-    paddingLeft: 20,
-    paddingRight: 20,
-    
-  },
-  title: {
-
-  }
+  
 });

pages/components/Comment.js

@@ -0,0 +1,109 @@
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image
+} from "react-native";
+
+export default class Comment extends Component {
+  render() {
+    return (
+      <View style={styles.courseComment}>
+        <View style={[styles.padding, styles.title]}>
+          <Text style={styles.font}>{this.props.title}</Text>
+          <View style={[ styles.button, styles.center ]}>
+            <Image src="" style={styles.iconSize} />
+            <Text>写评论</Text>
+          </View>
+        </View>
+        <View style={[ styles.padding ]}>
+          <View style={[ styles.title ]}>
+            <View style={[ styles.center ]}>
+                <Image style={[styles.headImg ]}></Image>
+                <View>
+                  <Text style={{ fontSize: 16, color: '#373737' }}>小幸运</Text>
+                  <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
+                </View>
+            </View>
+            <View style={[ styles.center ]}>
+              <Image src="" style={styles.iconSize} />
+              <Text>回复</Text>
+            </View>
+          </View>
+          <View style={ styles.padding }>
+            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
+          </View>
+          <View style={[ styles.padding, styles.column ]}>
+            <Text style={ styles.color }>卡通小熊</Text>
+            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseComment: {
+    width: '100%',
+    backgroundColor: '#fff',
+    marginTop: 8,
+  },
+  padding: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  font: {
+    fontSize: 24,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  center: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    width: 98,
+    height: 28,
+    fontSize: 20,
+    borderRadius: 28,
+    color: 'black',
+    backgroundColor: '#F0F1F5'
+  },
+  headImg: {
+    width: 40,
+    height: 40,
+    backgroundColor: "red",
+    marginRight: 10,
+    borderRadius: 40
+  },
+  iconSize: {
+    width: 20,
+    height: 20,
+    backgroundColor: "red",
+    marginRight: 10
+  },
+  courseFont: {
+    color: '#373737',
+    fontSize: 16
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#F3F6FF'
+  },
+  color: {
+    color: '#518AD1'
+  }
+});

pages/components/CourseListLine.js

@@ -0,0 +1,77 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+export default class CourseListLine extends Component {
+  render() {
+    return (
+      <View style={styles.courseList}>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.font}>{this.props.title}</Text>
+          <Text style={styles.color}>共28课</Text>
+        </View>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseList: {
+    width: '100%',
+    backgroundColor: '#fff',
+    marginTop: 8,
+  },
+  padding: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  font: {
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  clor: {
+    fontSize: 14,
+    color: 'black',
+  },
+  courseFont: {
+    color: '#373737',
+    fontSize: 16
+  },
+  border: {
+    borderStyle: 'solid',
+    borderBottomWidth: 1,
+    borderColor: '#F0F1F5'
+  }
+});

pages/components/CourseListRow.js

@@ -0,0 +1,64 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+import ScrollRow from "./ScrollRow";
+
+export default class CourseListRow extends Component {
+  render() {
+    return (
+      <View style={styles.courseList}>
+        <View style={[styles.padding, styles.title]}>
+          <Text style={styles.font}>{this.props.title}</Text>
+          <Text style={styles.color}>共28课</Text>
+        </View>
+        <View style={{
+            flex: 1,
+            height: 200,
+          }}>
+            <ScrollRow itemWidth={106} itemHeight={150} />
+          </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseList: {
+    width: '100%',
+    backgroundColor: '#fff',
+    marginTop: 8,
+  },
+  padding: {
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  font: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  clor: {
+    fontSize: 14,
+    color: 'black',
+  },
+});

pages/components/CourseTitle.js

@@ -102,7 +102,7 @@ export default class CourseTitle extends Component<Props> {
     switch (type) {
       case 1:
         //左侧返回图片1
-        back = require("../images/userInfo/back_white.png");
+        back = require("../images/schedulePage/back_black.png");
         break;
       case 2:
         //左侧返回图片2
@@ -122,32 +122,25 @@ export default class CourseTitle extends Component<Props> {
   }
   selectRightIcon() {
     let type = this.props.righttype;
+    let right = "";
     switch (type) {
       case 1:
         //课程表标题，右侧是分享
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "blue"
-            }}
-          />
-        );
+        right = require("../images/common/share.png");
         break;
       case 2:
         //个人中心，右侧是设置
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "red"
-            }}
-          />
-        );
         break;
     }
+    return (
+      <Image
+        source={right}
+        style={{
+          width: 20,
+          height: 20
+        }}
+      />
+    );
   }
 }
 /**

pages/components/CusVideo.js

@@ -26,6 +26,7 @@ export default class CusVideo extends React.Component {
     super(props);
     this.pressStatus = false;
     this.progress = 0;
+    this.time_hideController;
   }
   config = {
     changeX: 0,
@@ -42,12 +43,35 @@ export default class CusVideo extends React.Component {
     resizeMode: "stretch",
     duration: 0.0,
     currentTime: 0.0,
-    paused: false,
+    paused: true,
+    onBuffer: true,
     wheel: false,
     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() {
@@ -77,11 +101,11 @@ export default class CusVideo extends React.Component {
           onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
           onLoad={this.onLoad} //加载媒体并准备播放时调用的回调函数。
           onProgress={this.onProgress} //视频播放过程中每个间隔进度单位调用的回调函数
-          onEnd={this.onEnd} //视频播放结束时的回调函数
           onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
           onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
           repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
-          onError={this.onError} // 当视频不能加载，或出错后的回调函数
+          onError={this.onError.bind(this)} // 当视频不能加载，或出错后的回调函数
+          onEnd={this.onEnd.bind(this)} //视频播放结束时的回调函数
           playInBackground={false} // 当app转到后台运行的时候，播放是否暂停
           playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
@@ -94,7 +118,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)}
@@ -121,7 +148,6 @@ export default class CusVideo extends React.Component {
       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
       onMoveShouldSetPanResponder: (evt, gestureState) => true,
       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-
       onPanResponderGrant: (evt, gestureState) => {
         this.pressStatus = true;
         this.config.changeY = evt.nativeEvent.pageY;
@@ -131,11 +157,9 @@ export default class CusVideo extends React.Component {
         } 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;
@@ -145,7 +169,6 @@ export default class CusVideo extends React.Component {
       },
       onPanResponderEnd: (evt, gestureState) => {
         this.pressStatus = true;
-        console.log("onPanResponderEnd");
       },
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
@@ -172,9 +195,15 @@ export default class CusVideo extends React.Component {
   onBuffer({ isBuffering }: { isBuffering: boolean }) {
     //true为正在加载，false为没有加载，此处给loading提示
     this.setState({
+      onBuffer: isBuffering,
       show_loading: isBuffering
     });
-    console.log("isBuffering:" + isBuffering);
+  }
+  isPlaying() {
+    if (this.state.onBuffer == false && this.state.paused == false) {
+      return true;
+    }
+    return false;
   }
   onLoad = data => {
     //获取的是秒数
@@ -192,10 +221,16 @@ export default class CusVideo extends React.Component {
   };
 
   onError() {
-    alert("播放器异常");
+    if (this.props.onEnd == undefined) {
+    } else {
+      this.props.onError();
+    }
   }
   onEnd() {
-    alert("播放结束");
+    if (this.props.onEnd == undefined) {
+    } else {
+      this.props.onEnd();
+    }
   }
   play() {
     //controller的play点击无法换图...
@@ -218,6 +253,16 @@ export default class CusVideo extends React.Component {
       player_status_icon: require("../images/video/pause.png")
     });
     this.player_icon_index = 0;
+    if (this.state.show_controller) {
+      this.time_hideController = setTimeout(() => {
+        this.setState({
+          show_controller: false
+          // needback: false
+        });
+        this.bottomcontroller.setBottom(-50);
+        this.topcontroller.setTop(-50);
+      }, 5000);
+    }
   }
 
   seekTo(progress) {
@@ -252,6 +297,7 @@ export default class CusVideo extends React.Component {
       duration: 0,
       currentTime: 0
     });
+    this.bottomcontroller.setProgress(0);
   }
 
   videoBackClick() {
@@ -265,12 +311,22 @@ export default class CusVideo extends React.Component {
     }
   }
   showController() {
+    clearTimeout(this.time_hideController);
     this.setState({
       show_controller: true
       // needback: this.props.needback
     });
     this.bottomcontroller.setBottom(0);
+    this.bottomcontroller.setProgress(this.state.currentTime);
     this.topcontroller.setTop(0);
+    this.time_hideController = setTimeout(() => {
+      this.setState({
+        show_controller: false
+        // needback: false
+      });
+      this.bottomcontroller.setBottom(-50);
+      this.topcontroller.setTop(-50);
+    }, 5000);
   }
   hideController() {
     this.setState({
@@ -361,44 +417,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: 100, height: 20 }}
         />
       );
     } else {
       return null;
     }
   }
+  componentWillMount() {
+    this.changeIndex();
+  }
+
+  changeIndex() {
+    setTimeout(() => {
+      if (this.loading_index > this.props.loading_arr.length - 2) {
+        this.loading_index = 0;
+      } else {
+        this.loading_index = this.loading_index + 1;
+      }
+      this.setState({
+        loading_img: this.props.loading_arr[this.loading_index]
+      });
+      this.changeIndex();
+    }, 1);
+  }
 }
 
 class BottomController extends Component {
@@ -537,18 +591,22 @@ const styles = StyleSheet.create({
 
 /**
   使用方法
-  <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
-         }}
-   />
+    <CusVideo
+          show={this.state.video_show} //是否显示
+          uri={this.state.video_uri}  //播放路径
+          ref={view => (this.video = view)} //设置ID
+          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"
+          }}
+        />
 
 
  */

pages/components/Order.js

@@ -0,0 +1,57 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+export default class Order extends Component {
+  render() {
+    return (
+      <View style={[ styles.courseList, {left: this.props.left}]}>
+        <View style={[styles.btn, { backgroundColor: '#F5CA0D'}]}>
+          <Text style={{color: '#fff', fontSize: 18}}>立即购买</Text>
+        </View>  
+        <View style={[styles.btn, { backgroundColor: '#F5880D'}]}>
+          <Text style={{color: '#fff', fontSize: 18}}>一元秒杀</Text>
+        </View> 
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseList: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: 57,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: 20,
+    paddingRight: 20,
+    borderStyle: 'solid',
+    borderTopWidth: 1,
+    borderColor: '#000000'
+  },
+  btn: {
+    width: '45%',
+    height: 35,
+    borderRadius: 35,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+});

pages/components/ScheduleFlatItem.js

@@ -78,12 +78,12 @@ export default class ScheduleFlatItem extends Component<Props> {
                 width: "100%",
                 height: "80%",
                 alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: "blue"
+                justifyContent: "center"
               }}
             >
               <Image
-                style={{ width: 20, height: 20, backgroundColor: "blue" }}
+                style={{ width: 20, height: 20 }}
+                source={require("../images/schedulePage/schedule_item_right.png")}
               />
             </View>
             <View style={{ flex: 0.1 }} />

pages/components/SchedulePage.js

@@ -19,6 +19,7 @@ import {
   findNodeHandle,
   UIManager,
   StatusBar,
+  BackHandler,
   Button,
   DeviceEventEmitter
 } from "react-native";
@@ -26,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({
@@ -50,12 +52,13 @@ export default class SchedulePage extends BasePage {
       videoImage_x: 0.0,
       videoImage_y: 0.0,
       video_uri:
-        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8",
+        "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4",
       title_height: "6%",
       video_frame_height: "32%",
       seat_height: "2%",
       flatlist_height: "60%",
-      isFull: false
+      isFull: false,
+      playing_key: 0
     };
   }
 
@@ -93,10 +96,10 @@ export default class SchedulePage extends BasePage {
               title="第12周 爱上幼儿园"
               lefttype={1}
               righttype={1}
-              textcolor={"red"}
-              // backPress={() => this.goBack()}
-              backPress={() => alert("左侧按钮")}
-              rightPress={() => alert("右侧按钮")}
+              textcolor={"#231F20"}
+              backPress={() => this.goBack()}
+              // backPress={() => alert("左侧按钮")}
+              rightPress={this.showSharedDialog.bind(this)}
             />
           </View>
           <View
@@ -119,7 +122,11 @@ export default class SchedulePage extends BasePage {
               }}
             />
           </View>
-          <View style={{ height: this.state.seat_height }} />
+          <View
+            style={{
+              height: this.state.seat_height
+            }}
+          />
           <View
             style={{
               height: this.state.flatlist_height,
@@ -218,8 +225,7 @@ export default class SchedulePage extends BasePage {
                   typecolor: "#3397F0",
                   typename: "欢乐音乐",
                   videoname: "小鸡捉虫子",
-                  videourl:
-                    "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+                  videourl: "http://chimee.org/vod/1.mp4"
                 }
               ]}
             />
@@ -230,8 +236,9 @@ export default class SchedulePage extends BasePage {
           uri={this.state.video_uri}
           ref={view => (this.video = view)}
           needback={false}
-          videoback={() => alert("videoback")}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          onError={this.onError.bind(this)}
+          onEnd={this.onEnd.bind(this)}
           style={{
             left: this.state.x,
             top: this.state.y,
@@ -241,6 +248,7 @@ export default class SchedulePage extends BasePage {
             position: "absolute"
           }}
         />
+        <SharedDialog ref={view => (this.shareddialog = view)} />
       </View>
     );
   }
@@ -250,18 +258,47 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.9}
         height={50}
         data={data}
-        onPress={() => this.changeUrl(data.videourl)}
+        onPress={() => this.changeUrl(data)}
       />
     );
   }
+
+  componentWillMount() {
+    BackHandler.addEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  componentWillUnmount() {
+    BackHandler.removeEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  showSharedDialog() {
+    this.shareddialog.setModalVisible(true);
+  }
+  onBackAndroid() {
+    if (this.state.isFull) {
+      return true;
+    } else {
+    }
+  }
+  onError() {
+    alert("播放器异常");
+    this.setState({
+      video_show: false
+    });
+  }
+  onEnd() {
+    alert("播放结束");
+    this.video.refreshVideo();
+  }
   fullScreenPlayer() {
     if (!this.state.isFull) {
       Orientation.lockToLandscape();
       this.setState({
-        // title_height: "0%",
         video_frame_height: "100%",
-        // seat_height: "0%",
-        // flatlist_height: "0%",
         statusbar_hidden: true,
         isFull: true,
         x: 0,
@@ -272,10 +309,7 @@ export default class SchedulePage extends BasePage {
     } else {
       Orientation.lockToPortrait();
       this.setState({
-        // title_height: "6%",
         video_frame_height: "32%",
-        // seat_height: "2%",
-        // flatlist_height: "60%",
         x: this.state.videoImage_x,
         y: this.state.videoImage_y,
         video_width: this.state.videoImage_width,
@@ -285,13 +319,15 @@ export default class SchedulePage extends BasePage {
       });
     }
   }
-  changeUrl(url) {
+  changeUrl(data) {
     //切换视频并且播放
     // alert(url);
+    if (this.state.playing_key == data.key) {
+      return;
+    }
     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,
@@ -302,12 +338,12 @@ export default class SchedulePage extends BasePage {
           videoImage_x: pageX,
           videoImage_y: pageY,
           video_show: true,
-          video_uri: url
+          video_uri: data.videourl,
+          playing_key: data.key
         });
       });
     }, 0);
 
-    this.video.refreshVideo();
     this.video.start();
   }
 }

pages/components/SharedDialog.js

@@ -0,0 +1,243 @@
+/**
+ * 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
+    });
+  }
+}
+
+/***
+    使用方法
+   <SharedDialog ref={view => (this.shareddialog = view)} />
+
+  this.shareddialog.setModalVisible(true);//true显示，false消失
+
+
+ */

pages/components/VideoExplain.js

@@ -13,78 +13,162 @@ import {
   View,
   Image,
   ScrollView,
+  StatusBar,
+  BackHandler,
   FlatList
 } from "react-native";
-
-import CusVideo from './CusVideo'
+import Orientation from "react-native-orientation";
+import CusVideo from "./CusVideo";
+// 获取屏幕宽高
+import { Dimensions } from 'react-native'
+const { height, width } =  Dimensions.get('window');
 
 export default class VideoExplain extends Component {
-  // static propTypes = {
-  //   uri: PropTypes.string,
-  //   title: PropTypes.string,
-  //   details: PropTypes.string,
-  // };
+  static propTypes = {
+    // uri: PropTypes.string,
+    // title: PropTypes.string,
+    // details: PropTypes.string,
+  };
+  state = {
+    isFull: false,
+    video_height: 210,
+    statusbar_hidden: false,
+    videoStyle: {
+      width: "100%"
+    }
+  };
+
   render() {
     return (
-      <View>
-        <CusVideo uri={this.props.uri} style={{width: '100%', height: 210}}/>
+      <View style={this.state.videoStyle}>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+          hidden={this.state.statusbar_hidden}
+        />
+        {/* <View style={{ width: "100%", height: 210 }} /> */}
+        <CusVideo
+          show={true} //是否显示
+          uri={this.props.uri} //播放路径
+          ref={view => (this.video = view)} //设置ID
+          needback={true}
+          videoback={() => alert("videoback")}
+          videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          onError={this.onError.bind(this)}
+          onEnd={this.onEnd.bind(this)}
+          style={{
+            width: "100%",
+            height: this.state.video_height
+          }}
+        />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
             <Text style={styles.font}>{this.props.title}</Text>
             <View style={styles.icon}>
-              <Image src="" style={styles.iconSize}></Image>
-              <Image src="" style={styles.iconSize}></Image>
+              <Image src="" style={styles.iconSize} />
+              <Image src="" style={styles.iconSize} />
             </View>
           </View>
           <View style={[styles.title, styles.tops]}>
             <Text style={styles.font}>课程介绍：</Text>
             <Text style={styles.clor}>更多 ></Text>
           </View>
-          <Text style={styles.clor}>
-            {this.props.details}
-          </Text>
+          <Text style={styles.clor}>{this.props.details}</Text>
         </View>
       </View>
     );
   }
+  fullScreenPlayer() {
+    if (!this.state.isFull) {
+      Orientation.lockToLandscape();
+      this.setState({
+        statusbar_hidden: true,
+        isFull: true,
+        video_height: "100%",
+        videoStyle: {
+          width: "100%",
+          height: width
+        }
+      });
+    } else {
+      Orientation.lockToPortrait();
+      this.setState({
+        statusbar_hidden: false,
+        isFull: false,
+        video_height: 210,
+        videoStyle: {
+          width: "100%"
+        }
+      });
+    }
+    this.props.full(this.state.isFull);
+  }
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+    this.video.refreshVideo();
+  }
+  componentWillMount() {
+    BackHandler.addEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  componentWillUnmount() {
+    BackHandler.removeEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  onBackAndroid() {
+    if (this.state.isFull) {
+      return true;
+    } else {
+      alert("返回。。。");
+    }
+  }
 }
 
 const styles = StyleSheet.create({
   videoExplain: {
-    width: '100%',
-    backgroundColor: 'white',
+    width: "100%",
+    backgroundColor: "white",
     paddingLeft: 20,
     paddingRight: 20,
     paddingTop: 13,
     paddingBottom: 13
   },
   title: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   font: {
     fontSize: 18,
-    color: 'black',
-    fontWeight: 'bold',
+    color: "black",
+    fontWeight: "bold"
   },
   clor: {
     fontSize: 14,
-    color: 'black',
+    color: "black"
   },
   icon: {
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row"
   },
   iconSize: {
     width: 20,
     height: 20,
-    backgroundColor: 'red',
+    backgroundColor: "red",
     marginLeft: 10
   },
   tops: {
-    marginTop: 18,
+    marginTop: 18
   }
 });