efunbox-mobile-8/pages/components/VideoExplain.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 CusVideo from './CusVideo'

export default class VideoExplain extends Component {
  // static propTypes = {
  //   uri: PropTypes.string,
  //   title: PropTypes.string,
  //   details: PropTypes.string,
  // };
  render() {
    return (
      <ScrollView style={{backgroundColor: '#F0F1F5'}}>
        <CusVideo uri={this.props.uri} style={{width: '100%', height: 210}}/>
        <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>
            </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>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  videoExplain: {
    width: '100%',
    backgroundColor: 'white',
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 13,
    paddingBottom: 13
  },
  title: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  font: {
    fontSize: 18,
    color: 'black',
    fontWeight: 'bold',
  },
  clor: {
    fontSize: 14,
    color: 'black',
  },
  icon: {
    display: 'flex',
    flexDirection: 'row',
  },
  iconSize: {
    width: 20,
    height: 20,
    backgroundColor: 'red',
    marginLeft: 10
  },
  tops: {
    marginTop: 18,
  }
});