提取课程列表组件

pages/CourseDetails.js

@@ -17,26 +17,46 @@ import {
 } from "react-native";
 
 import VideoExplain from './components/VideoExplain';
-import ScrollRow from "./components/ScrollRow";
+import CourseListRow from './components/CourseListRow';
 
-class CourseList extends Component {
-  render() {
-    return (
-      <View style={styles.courseList}>
-        <View style={[styles.padding, styles.title]}>
-          <Text style={styles.font}>课件</Text>
-          <Text style={styles.color}>共28课</Text>
-        </View>
-        <View style={{
-            flex: 1,
-            height: 200,
-          }}>
-            <ScrollRow itemWidth={106} itemHeight={150} />
-          </View>
-      </View>
-    );
-  }
-}
+// 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>
+//     );
+//   }
+// }
+
+
+// class CourseListLine 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>
+//     );
+//   }
+// }
 
 export default class CourseDetails extends Component {
   render() {
@@ -47,37 +67,12 @@ export default class CourseDetails extends Component {
         details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
         uri={'http://chimee.org/vod/1.mp4'}
         />
-        <CourseList></CourseList>
+        <CourseListRow title={'课件'}></CourseListRow>
       </ScrollView>
     );
   }
 }
 
 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/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',
+  },
+});