Dingdong_app/components/Email.js

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

const styles = StyleSheet.create({
    main: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "transparent",
    },
    avatar: {
        width: 33,
        height: 33,
        backgroundColor: "#eee",
    },
    center: {
        flex: 1,
        marginLeft: 14,
        backgroundColor: "transparent",
    },
    top: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "transparent",
        justifyContent: "space-between",
    },
    time: {
        color: "#787878",
    },
    btn: {
        maxWidth: 10,
        width: 10,
        height: 10,
        borderRadius: 10,
        marginRight: 10,
        paddingHorizontal: 0,
    },
});


export default function Email(props) {
    // const {  } = useModel("wordsModel");
    const { info, pressEvent } = props;
    const { avatar, name, sendTime,  content } = info || {};
    return (
      <Card appearance='walletCard' onPress={pressEvent}>
        <Layout style={styles.main}>
          <Button size='tiny' style={styles.btn} status='primary' />
          {/* <Button size='tiny' style={styles.btn} status='info' /> */}
          <Avatar
            style={styles.avatar}
            shape='rounded'
            source={{
                        uri: avatar,
                    }}
          />
          <Layout style={styles.center}>
            <Layout style={styles.top}>
              <Text category='c1'>{name || "系统提醒"}</Text>
              <Text category='h1' style={styles.time}>
                {sendTime || "12月26日"}
              </Text>
            </Layout>
            <Text
              category='h1'
              status='info'
              numberOfLines={1}
              ellipsizeMode='tail'
            >
              {content ||
                            "您的订单已经被取消收款方老司机的发链接SDK溜老司机的您的订单已经被取消收款方老司机的发链接SDK溜老司机的"}
            </Text>
          </Layout>
        </Layout>
      </Card>
    );
}