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";


var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;

export default class ScheduleFlatItem extends Component {
  render() {
    return (
      <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
        <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.subColor,
                width: "100%",
                height: "70%",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: 20
              }}
            >
              <Text style={{ color: "white",fontSize: 12, }}>{this.props.data.subTitle}</Text>
            </View>
            <View style={{ flex: 0.2 }} />
            <View
              style={{
                flex: 10,
                width: "100%",
                justifyContent: "center",
                height: "100%"
              }}
            >
              <Text style={{ textAlign: "left" }}>
                {this.props.data.title}
              </Text>
            </View>
            <View
              style={{
                flex: 1,
                width: "100%",
                height: "80%",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Image
                style={{ width: 20, height: 20 }}
                source={require("../images/schedulePage/schedule_item_right.png")}
              />
            </View>
            <View style={{ flex: 0.1 }} />
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}
/**

      使用方法
      <ScheduleFlatItem
        width={this.getWindowWidth() * 0.95}
        height={60}
        data={data}
      />

 */