efunbox-mobile-8/pages/components/CourseListLine.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";

export default class CourseListLine extends Component {
  render() {
    return (
      <View style={styles.courseList}>
        <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>
    );
  }
}

const styles = StyleSheet.create({
  courseList: {
    width: '100%',
    backgroundColor: '#fff',
    marginTop: 8,
  },
  padding: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 10,
    paddingBottom: 10,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  font: {
    fontSize: 18,
    color: 'black',
    fontWeight: 'bold',
  },
  clor: {
    fontSize: 14,
    color: 'black',
  },
  courseFont: {
    color: '#373737',
    fontSize: 16
  },
  border: {
    borderStyle: 'solid',
    borderBottomWidth: 1,
    borderColor: '#F0F1F5'
  }
});