Dingdong_app/components/Email.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 Email(props) {
    const { getWordsStr } = useModel("wordsModel");
    const { info, pressEvent } = props;
    const { id, avatar, name, sendTime, type, 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>
    );
}
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,
    },
});