CourseList.js 1.93 KB
import React, {Component} from "react";
import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";

import {height, width} from "../../utils/getSize";
import {toPage} from "./IndexBanner";
import {NoDoublePress} from "../../utils/utils";
import PropTypes from 'prop-types';

export default class CourseList extends Component {
  // static contextTypes = {
  //   navigator: PropTypes.object,
  // };

  constructor(props) {
    super(props);

  }

  render() {
    return(
      <View style={styles.classSub}>
        <View style={styles.titleBarNext}>
          <Text style={[styles.font6]}>相关课程</Text>
        </View>
        <ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal={true}

        >
          <View style={{flexDirection: 'row'}}>
            {
              this.props.data && this.props.data.map((v, i) =>
                <TouchableOpacity key={i} onPress={() =>NoDoublePress.onPress(() => toPage(this.props.nav, "COURSE", v.id)) }>
                <View style={styles.imgView}>
                  <Image
                    source={{uri:v.pictureUrl}}
                    style={styles.img}
                    resizeMode="cover"
                  />
                  <Text style={styles.font8}>{v.name}</Text>
                </View>
                </TouchableOpacity>
              )
            }
          </View>
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  classSub: {
    marginTop: 10,
    width,
    backgroundColor: 'white',
    paddingLeft: 15
  },
  titleBarNext: {
    height: 50,
    alignItems: 'center',
    flexDirection: 'row'
  },
  font6: {
    fontSize: 16,
    color: "#333"
  },
  imgView: {
    width: 115,
    marginRight: 15
  },
  img: {
    width: 115,
    height: 65,
    borderRadius: 5
  },
  font8: {
    fontSize: 14,
    fontWeight: 'bold',
    color: "#333",
    marginTop: 10,
    marginBottom: 15
  },
});