|
@@ -0,0 +1,90 @@
|
|
|
+/**
|
|
|
+ * 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,
|
|
|
+ }
|
|
|
+});
|