增加详情页另一种列表

App.js

@@ -41,7 +41,7 @@ const RootNavigator = createStackNavigator(
     Ticket: { screen: Ticket },
   },
   {
-    initialRouteName: "MainPage",
+    initialRouteName: "CourseDetails",
     headerMode: "null"
   }
 );

pages/CourseDetails.js

@@ -18,13 +18,11 @@ import {
 
 import VideoExplain from './components/VideoExplain'
 import CourseListRow from './components/CourseListRow'
-// import CourseListLine from './components/CourseListLine'
+import CourseListLine from './components/CourseListLine'
 
 export default class CourseDetails extends Component {
-  state () {
-    return {
-      fullStyle: {}
-    }
+  state = {
+    fullStyle: {}
   }
   render() {
     return (
@@ -39,8 +37,7 @@ export default class CourseDetails extends Component {
         </View>
         <View style={ this.state.fullStyle }>
           <CourseListRow title={'课件'}></CourseListRow>
-          <CourseListRow title={'课件'}></CourseListRow>
-          <CourseListRow title={'课件'}></CourseListRow>
+          <CourseListLine title={'课件'}></CourseListLine>
         </View> 
       </ScrollView>
     );

pages/components/CourseListLine.js

@@ -17,11 +17,22 @@ export default class CourseListLine extends Component {
   render() {
     return (
       <View style={styles.courseList}>
-        <View style={[styles.padding, styles.title]}>
+        <View style={[styles.padding, styles.title, styles.border]}>
           <Text style={styles.font}>{this.props.title}</Text>
           <Text style={styles.color}>共28课</Text>
         </View>
-
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
+        <View style={[styles.padding, styles.title, styles.border]}>
+          <Text style={styles.courseFont}>{this.props.title}</Text>
+          <Text style={styles.courseFont}>></Text>
+        </View>
       </View>
     );
   }
@@ -36,6 +47,8 @@ const styles = StyleSheet.create({
   padding: {
     paddingLeft: 20,
     paddingRight: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
   },
   title: {
     display: 'flex',
@@ -44,8 +57,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   font: {
-    paddingTop: 10,
-    paddingBottom: 10,
     fontSize: 18,
     color: 'black',
     fontWeight: 'bold',
@@ -54,4 +65,13 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: 'black',
   },
+  courseFont: {
+    color: '#373737',
+    fontSize: 16
+  },
+  border: {
+    borderStyle: 'solid',
+    borderBottomWidth: 1,
+    borderColor: '#F0F1F5'
+  }
 });