efunbox-mobile-8/pages/CourseDetails.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  FlatList
} 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'
import courseDetails from './services/courseDetails'

export default class CourseDetails extends Component {
  componentDidMount() {
    const { courseId } = this.props.navigation.state.params;
    console.log('id',courseId)
    courseDetails.getCourseDetails(courseId).then(res => {
      console.log('列表',res.data)
      const courseList = res.data.course;
      const wareList = res.data.wareList;
      this.setState({
        courseList,
        wareList,
        uri: wareList[0].playUrl
      })
    }).catch(err => {
      console.log(err)
    });
  }
  state = {
    fullStyle: {},
    lefts: 0,
    courseList: {},
    wareList: [],
    uri: 'http://chimee.org/vod/1.mp4'
  }
  render() {
    return (
      <View style={{backgroundColor: '#F0F1F5', width: '100%', height: '100%', position: 'relative'}}>
        <ScrollView keyboardShouldPersistTaps="handled">
          <View>
            <VideoExplain 
            full={this.full.bind(this)}
            uri={ this.state.uri }
            dataList={ this.state.courseList }
            ref={view => (this.video = view)} //设置ID
            videoback={this.back.bind(this) } 
            />
          </View>
          <View style={ this.state.fullStyle }>
            <CourseListRow title={'课件'} wareList={ this.state.wareList} changeUri={ this.changeUri.bind(this) }></CourseListRow>
            {/* <CourseListLine title={'课件'} wareList={ this.state.wareList}></CourseListLine> */}
            <Comment title={ '全部评论' } courseId= { this.state.courseList.id }></Comment>
          </View> 
        </ScrollView>
        {/* <Order left={ this.state.lefts }></Order> */}
      </View>
    );
  }
  back(){
    this.props.navigation.goBack()
  }
  full(isFull){
    if(isFull) {
      // 全屏时隐藏多余的view
      this.setState({
        fullStyle: {},
        lefts: 0
      })
    }else {
      // 全屏时隐藏多余的view
      this.setState({
        fullStyle: {
          display: 'none'
        },
        lefts: '-100%'
      })
    }

  }
  changeUri(uri) {
    console.log(uri)
    this.setState({
      uri
    })
    // 开始播放
    this.video.start();
  }
}

const styles = StyleSheet.create({
  
});