water-sys/app/screens/function/Collection.tsx

import React from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  Platform,
} from "react-native";
import widthUtils from "../../utils/widthUtils";
import fontSize from "../../utils/fontsizeUtils";
import BackIcon from "../../components/BackIcon";
import { useNavigation } from "@react-navigation/native";

const FavoriteItem = ({
  image,
  title,
  price,
}: {
  image: string;
  title: string;
  price: number;
}) => {
  return (
    <View style={styles.item}>
      <Image source={{ uri: image }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.title} numberOfLines={2}>
          {title}
        </Text>
        <Text style={styles.price}>￥{price}</Text>
        <View style={styles.actions}>
          <TouchableOpacity style={[styles.btn, styles.cart]}>
            <Text style={styles.cartText}>加入购物车</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.btn, styles.delete]}>
            <Text style={styles.deleteText}>删除</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export const Collection = () => {
  const navigation = useNavigation();
  const data = [
    {
      id: "1",
      image: "https://img.alicdn.com/imgextra/i1/1234567890/O1CN01Item1.jpg",
      title: "韩版宽松休闲卫衣女春秋款薄款学生ins潮",
      price: 89.0,
    },
    {
      id: "2",
      image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
      title: "小米无线蓝牙耳机半入耳式 轻巧便携",
      price: 129.0,
    },
    {
      id: "3",
      image: "https://img.alicdn.com/imgextra/i3/3234567890/O1CN01Item3.jpg",
      title: "华为MateBook X Pro 2020款 13.9英寸全面屏笔记本电脑",
      price: 10999.0,
    },
    {
        id: "4",
        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
        price: 129.0,
      },
      {
        id: "5",
        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
        price: 129.0,
      },
      {
        id: "6",
        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
        price: 129.0,
      },
      {
        id: "7",
        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
        price: 129.0,
      },
      {
        id: "82",
        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
        price: 129.0,
      },
    // 可以继续添加更多商品
  ];

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.header}>
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={styles.backButton}
          >
            <BackIcon size={fontSize(22)} />
          </TouchableOpacity>
          <Text style={styles.titles}>我的收藏</Text>
          <View style={styles.placeholder} />
        </View>
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
          {data.map((item) => (
            <FavoriteItem key={item.id} {...item} />
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: 0,
    backgroundColor: "#f5f5f5",
  },
  containerBox: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  header: {
    paddingInline: 19,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "white",
    width: "100%",
    paddingVertical: 15,
  },
  titles: {
    fontSize: fontSize(20),
    fontWeight: "600",
    flex: 1,
    textAlign: "center",
  },
  backButton: {
    width: widthUtils(24, 24).width,
  },
  placeholder: {
    width: widthUtils(24, 24).width,
  },
  container: {
    backgroundColor: "#f5f5f5",
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 20,
    marginTop: 20,
    flex: 1,
  },
  item: {
    flexDirection: "row",
    padding: 12,
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
  },
  image: {
    width: widthUtils(100, 100).width,
    height: widthUtils(100, 100).height,
    borderRadius: 4,
    marginRight: 12,
  },
  info: {
    flex: 1,
    justifyContent: "space-between",
  },
  title: {
    fontSize: fontSize(15),
    color: "#333",
    lineHeight: 20,
    marginBottom: 6,
  },
  price: {
    color: "#f40",
    fontSize: fontSize(16),
    marginBottom: 10,
  },
  actions: {
    flexDirection: "row",
    gap: 8,
  },
  btn: {
    paddingVertical: 4,
    paddingHorizontal: 10,
    borderRadius: 3,
    borderWidth: 1,
  },
  cart: {
    borderColor: "#ff5000",
  },
  delete: {
    borderColor: "#ccc",
  },
  cartText: {
    fontSize: fontSize(12),
    color: "#ff5000",
  },
  deleteText: {
    fontSize: fontSize(12),
    color: "#999",
  },
});