Dingdong_app/components/GoodsCardVertical.js

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

const width = Dimensions.get("window").width;
export default function GoodsCard(props) {
    const { add, remove } = useModel("wordsModel");
    const { info } = props;
    const { id, img, name, introduction, totalSales, discountAmount, amount } =
        info || {};
    return (
        <Card
            style={styles.card}
            disabled={true}
            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='label'
                                status='info'
                                style={{ textDecorationLine: "line-through" }}
                            >
                                ¥{amount}
                            </Text>
                        </Text>
                    </Layout>

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

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,
    },
});