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'

export default class CourseDetails extends Component {
  state = {
    fullStyle: {},
    lefts: 0
  }
  render() {
    return (
      <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%'
      })
    }

  }
}

const styles = StyleSheet.create({
  
});