crazycharge-app/component/accountPages/walletPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    Image,
    Pressable,
    ImageBackground
} from 'react-native';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path } from 'react-native-svg';
const CrossLogoSvg = () => (
    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <Path
            d="M2.33333 23.3333L0 21L9.33333 11.6667L0 2.33333L2.33333 0L11.6667 9.33333L21 0L23.3333 2.33333L14 11.6667L23.3333 21L21 23.3333L11.6667 14L2.33333 23.3333Z"
            fill="#222222"
        />
    </Svg>
);

const WalletPageComponent = () => {
    const image = { uri: 'https://legacy.reactjs.org/logo-og.png' };

    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView className="flex-1 ">
                <View className="flex-1 mx-[5%]">
                    <View style={{ marginTop: 25 }}>
                        <CrossLogoSvg />
                        <Text style={{ fontSize: 45, marginVertical: 25 }}>
                            錢包
                        </Text>
                    </View>
                    <View>
                        <ImageBackground
                            className="flex-col-reverse shadow-lg"
                            style={{ height: 200 }}
                            source={require('../../assets/walletCard1.png')}
                            resizeMode="contain"
                        >
                            <View className="mx-[5%] pb-6">
                                <Text className="text-white text-xl">
                                    餘額 (HKD)
                                </Text>
                                <View className="flex-row  items-center justify-between ">
                                    <Text
                                        style={{ fontSize: 52 }}
                                        className=" text-white font-bold"
                                    >
                                        $2711.8
                                    </Text>
                                    <Pressable
                                        className="rounded-2xl items-center justify-center p-3 pr-4 "
                                        style={{
                                            backgroundColor:
                                                'rgba(231, 242, 248, 0.2)'
                                        }}
                                        onPress={() => console.log('增值')}
                                    >
                                        <Text className="text-white font-bold">
                                            ＋ 增值
                                        </Text>
                                    </Pressable>
                                </View>
                            </View>
                        </ImageBackground>
                    </View>
                    <View className="flex-row-reverse mt-2 mb-6">
                        <Text className="text-[#02677D] text-lg underline">
                            更多錢包資訊
                        </Text>
                    </View>
                </View>
                <View className="w-full h-1 bg-[#DBE4E8]" />
                <View className="flex-row justify-between mx-[5%] mt-6 mb-2">
                    <Text className="text-xl">優惠券</Text>
                    <Pressable onPress={() => console.log('顯示所有')}>
                        <Text className="text-xl text-[#888888]">顯示所有</Text>
                    </Pressable>
                </View>
                <View className="bg-[#e7f2f8] h-[124px] mx-[5%] rounded-xl">
                    <View className="h-9 w-9"></View>
 
                    <View></View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default WalletPageComponent;