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

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  Button,
  Dimensions,
  DeviceEventEmitter
} from "react-native";

/** 因没有图，所以Image先用颜色代替，有图可替换 */
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;
export default class ScheduleFlatItem extends Component<Props> {
  render() {
    return (
      <View
        style={{
          backgroundColor: "white",
          width: this.props.width,
          height: this.props.height,
          alignItems: "center",
          justifyContent: "center",
          borderRadius: 30
        }}
      >
        <View
          style={{
            width: "95%",
            height: "80%",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <View
            style={{
              flex: 2.5,
              backgroundColor: this.props.data.typecolor,
              width: "95%",
              height: "70%",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: 20
            }}
          >
            <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
          </View>
          <View style={{ flex: 0.5 }} />
          <View
            style={{
              flex: 10,
              width: "100%",
              justifyContent: "center",
              height: "100%"
            }}
          >
            <Text style={{ textAlign: "left" }}>
              {this.props.data.videoname}
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              width: "100%",
              height: "80%",
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "blue"
            }}
          >
            <Image style={{ width: 20, height: 20, backgroundColor: "blue" }} />
          </View>
          <View style={{ flex: 0.1 }} />
        </View>
      </View>
    );
  }
}
/**

      使用方法
    <CourseTitle
          width={150}
          height={50}
          title="学前"
          backPress={() => this.goBack()}
          sharedpress={() => alert("点击分享")}
        />

 */