Dingdong_app/components/BankCard.js

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

export default function BankCard(props) {
    const { getWordsStr } = useModel("wordsModel");
    const { info, disabled, pressEvent, type, selectId } = props;
    const { id, avatar, bankName, cardNo } = info || {};
    const checked = React.useMemo(() => {
        return selectId === id;
    }, [selectId]);
    return (
        <Card appearance='walletCard' disabled={disabled} onPress={pressEvent}>
            <Layout style={styles.main}>
                <Avatar
                    style={styles.avatar}
                    source={{
                        uri: avatar,
                    }}
                />
                <Layout style={styles.center}>
                    <Text category='s1'>{bankName}</Text>
                    <Text category='h1' style={styles.text2}>
                        {cardNo}
                    </Text>
                </Layout>
                {type == "choose" && <Radio checked={checked} />}
                {type == "edit" && !disabled && (
                    <Icon
                        name='arrow-ios-forward'
                        fill='#C9C9C9'
                        style={styles.icon}
                    />
                )}
            </Layout>
        </Card>
    );
}

const ForwardIcon = props => (
    <Icon
        {...props}
        name='arrow-ios-forward'
        fill='#B4B4B4'
        style={{ width: 15, height: 15, fontWeight: 500 }}
    />
);

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",
    },
    text2: {
        paddingTop: 5,
    },
    code: {
        alignSelf: "flex-start",
    },
    icon: {
        width: 20,
        position: "absolute",
        right: 0,
        top: "50%",
        marginTop: -10,
    },
});