Dingdong_app/components/Comment.js

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

  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",
	  },
  });
  
const img1=require("../assets/images/zan.png")

  const StarIcon = (props) => (
    <Avatar source={img1} {...props} />
  );
  

export default function CommentCard() {
    const { storeBackInfo } = useModel("wordsModel");
    return (
      <Card appearance='CommentCard' disabled>
        <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>
    );
}