Dingdong_app/components/GoodsCardVertical.js

import React from "react";
import { StyleSheet, Dimensions } from "react-native";
import {
    Card,
    Text,
    Button,
    Layout,
    Avatar,
} from "@ui-kitten/components";
import { useModel } from "flooks";

const {width} = Dimensions.get("window");
const styles = StyleSheet.create({
    card: {
        width: (width - 35) / 2,
    },
    layout: {
        // flexDirection: "row",
    },
    avatar: {
        width: (width - 35) / 2,
        height: (width - 35) / 2,
    },
    main: {
        padding: 6,
    },
    butContent: {
        marginLeft: 6,
    },
    fontColor: {
        color: "#B5B5B5",
    },
    price: {
        marginTop: 5,
    },
    sub: {
        marginTop: 2,
    },
    remove: {
        minHeight: 33,
        minWidth: 33,
        position: "absolute",
        right: 11,
        bottom: 4,
    },
});

export default function GoodsCard(props) {
    const {  remove } = useModel("wordsModel");
    const { info,removeEvent } = props;
    const { id, img, name, totalSales, discountAmount, amount } =
        info || {};
    return (
      <Card
        style={styles.card}
        disabled
        appearance='goodsCard'
        direction='vertical'
      >
        {id ? (
          <Layout style={styles.layout}>
            <Avatar
              style={styles.avatar}
              shape='square'
              source={{
                            uri: img,
                        }}
            />

            <Layout style={styles.main}>
              <Text
                category='s1'
                ellipsizeMode='tail'
                numberOfLines={1}
              >
                {name}
              </Text>
              <Text category='c1' status='info' style={styles.sub}>
                月售 
                {' '}
                {totalSales}
              </Text>
              <Text category='h6' status='danger'>
                ¥
                {discountAmount}
                {" "}
                <Text
                  category='h1'
                  status='info'
                  style={{ textDecorationLine: "line-through" }}
                >
                  ¥
                  {amount}
                </Text>
              </Text>
            </Layout>

            <Button
              status='danger'
              onPress={removeEvent}
              style={styles.remove}
            >
              {remove}
            </Button>
          </Layout>
            ) : (
              <Layout style={styles.layout} />
            )}
      </Card>
    );
}