Dingdong_app/components/Comment.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Avatar,
    Icon,
} from "@ui-kitten/components";
import Badge from "../components/Badge";
import { useModel } from "flooks";
export default function CommentCard(props) {
    const { storeBackInfo } = useModel("wordsModel");
    return (
        <Card appearance='CommentCard' disabled={true}>
            <Layout style={styles.user}>
                <Avatar
                    style={styles.userIcon}
                    shape='rounded'
                    source={{
                        uri:
                            "https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg",
                    }}
                />

                <Layout style={styles.main}>
                    <Layout style={styles.layout}>
                        <Text
                            category='s1'
                            ellipsizeMode='tail'
                            numberOfLines={1}
                            style={styles.flex1}
                        >
                            用户名
                        </Text>
                        <Text category='h1' status='info'>
                            2019-11-27
                        </Text>
                    </Layout>

                    <Button
                        appearance='ghost'
                        accessoryLeft={StarIcon}
                        style={styles.button}
                    >
                        9999+
                    </Button>

                    <Text category='h1'>
                        金额后认为害人害己而和我入口即化吾儿可教很温和人和网入口即,
                        化我耳机sdfsdfsd考试的分开理就是老款的加菲，是大富科技谁看
                        得见后方可了三等奖
                    </Text>

                    <Layout style={styles.badgeList}>
                        <Badge
                            style={styles.badge}
                            appearance='ghost'
                            status='primary'
                        >
                            麦辣鸡堡
                        </Badge>
                    </Layout>

                    <Layout style={styles.backInfo}>
                        <Text category='h1'>
                            {storeBackInfo}:
                            <Text category='h1' style={styles.backColor}>
                                水电费记录删掉科技风科雷嘉是的溜缝胶SDK垃圾分
                                类圣诞节疯狂老司机的风口浪尖当时考虑放假了圣诞节放克鲁赛
                                德荆防颗粒的就是风口浪尖类似的减肥了可视v
                            </Text>
                        </Text>
                    </Layout>
                </Layout>
            </Layout>
        </Card>
    );
}
const StarIcon = (props) => (
    <Avatar source={require("../assets/images/zan.png")} {...props} />
);

const styles = StyleSheet.create({
    user: {
        flexDirection: "row",
        borderBottomWidth: 1,
        borderColor: "#EEEEEE",
        paddingVertical: 10,
    },
    userIcon: {
        width: 33,
        height: 33,
        marginRight: 3,
    },
    avatar: {
        width: 80,
        height: 80,
        marginRight: 10,
    },
    commentImg: {
        width: 167,
        height: 167,
        marginTop: 10,
        borderRadius: 0,
    },
    layout: {
        flexDirection: "row",
    },
    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,
    },
    button: {
        alignSelf: "flex-start",
        marginTop: 5,
        marginBottom: 0,
    },
    badgeList: {
        flexDirection: "row",
    },
    badge: {
        marginRight: 5,
        marginTop: 4,
    },
    backInfo: {
        backgroundColor: "rgba(248,236,214,1)",
        padding: 7,
        marginTop: 10,
    },
    backColor: {
        color: "#6BCDFF",
    },
});