Dingdong_app/components/Coupon.js

import React from "react";
import { StyleSheet, View } from "react-native";
import { Card, Text } from "@ui-kitten/components";
import { SwipeAction } from "@ant-design/react-native";

const styles = StyleSheet.create({
  main: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "transparent",
  },
  left: {
    width: 80,
    flexShrink: 0,
    alignItems: "center",
  },
  center: {
    flex: 1,
    marginLeft: 14,
    backgroundColor: "transparent",
  },
  text2: {
    paddingTop: 6,
  },
  code: {
    alignSelf: "flex-start",
  },
  icon: {
    width: 20,
    position: "absolute",
    right: 0,
    top: "50%",
    marginTop: -10,
  },
});

export default function Coupon(props) {
  const { info, delEvent, onPress } = props;
  const { amount, fullAmount, name, endDate, startDate } = info || {};

  const right = [
    {
      text: "删除",
      onPress: delEvent,
      style: { backgroundColor: "red", color: "white" },
    },
  ];

  return (
    <SwipeAction
      autoClose
      style={{ backgroundColor: "transparent" }}
      right={right}
    >
      <Card appearance="walletCard" onPress={onPress}>
        <View style={styles.main}>
          <View style={styles.left}>
            <Text category="h6" status="danger">
              <Text category="h1" status="danger">
                ¥
              </Text>
              {amount}
            </Text>
            <Text category="h1" status="info">
              {fullAmount ? `满 ${fullAmount} 元可用` : "无金额门槛"}
            </Text>
          </View>
          <View style={styles.center}>
            <Text category="h6">{name}</Text>
            <Text category="h1" status="info" style={styles.text2}>
              {startDate}
              {endDate}
            </Text>
          </View>
        </View>
      </Card>
    </SwipeAction>
  );
}