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} /> */