Dingdong_app/components/GoodsCard.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Avatar,
    Icon,
} from "@ui-kitten/components";
import { useModel } from "flooks";
export default function GoodsCard(props) {
    const { add, remove } = useModel("wordsModel");
    return (
        <Card
            style={[!props.appearance && styles.card]}
            appearance={props.appearance || "goodsCard"}
        >
            <Layout style={styles.layout}>
                <Avatar
                    style={styles.avatar}
                    shape='rounded'
                    source='https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'
                />

                <Layout style={styles.main}>
                    <Text category='s1' ellipsizeMode='tail' numberOfLines={1}>
                        原味板烧鸡腿堡麦满分套餐原味板烧鸡腿堡麦满分套餐
                    </Text>
                    <Text
                        category='c1'
                        status='info'
                        ellipsizeMode='tail'
                        numberOfLines={1}
                    >
                        原味板烧鸡腿堡麦满分套餐
                    </Text>
                    <Text category='c1' status='info'>
                        月售 9999+
                    </Text>
                    <Layout style={styles.flex1} />
                    <Text category='h6' status='danger'>
                        ¥70
                    </Text>
                </Layout>

                {!props.appearance && (
                    <Layout style={styles.butContent}>
                        <Button status='primary' size='tiny'>
                            {add}
                        </Button>
                    </Layout>
                )}

                {props.appearance == "classification" && (
                    <Button
                        style={styles.miniButton}
                        status='danger'
                        accessoryLeft={StarIcon}
                    />
                )}
            </Layout>
        </Card>
    );
}
const StarIcon = (props) => <Icon {...props} name='minus-outline' />;

const styles = StyleSheet.create({
    card: { marginTop: 10 },
    layout: {
        flexDirection: "row",
    },
    avatar: {
        width: 80,
        height: 80,
        marginRight: 10,
    },
    main: {
        flex: 1,
    },
    flex1: {
        flex: 1,
    },
    butContent: {
        marginLeft: 6,
    },
    fontColor: {
        color: "#B5B5B5",
    },
    miniButton: {
        minWidth: 18,
        minHeight: 18,
        width: 18,
        height: 18,
        position: "absolute",
        right: 10,
        bottom: 5,
    },
});