From cec61f7ce00ab5cc8fefe86559018522bc9f18df Mon Sep 17 00:00:00 2001 From: Mac Date: Tue, 6 May 2025 16:08:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=8E=86=E5=8F=B2=E5=92=8C?= =?UTF-8?q?=E6=94=B6=E8=97=8F=E7=9A=84ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.tsx | 38 +- app/components/TiktokIcon.tsx | 13 + app/screens/CategoryScreen.tsx | 189 ++- app/screens/CountrySelect.tsx | 1 + app/screens/HomeScreen.tsx | 2 +- app/screens/MyAccount/myAccount.tsx | 2 +- app/screens/ProfileScreen.tsx | 36 +- .../InquiryScreen.tsx | 0 .../{ => banner}/ShippingDetailsSection.tsx | 20 +- app/screens/banner/TikTokScreen.tsx | 290 +++++ app/screens/function/BrowseHistoryScreen.tsx | 199 ++++ app/screens/function/Collection.tsx | 207 ++++ app/screens/pay/PaySuccess.tsx | 2 +- app/screens/setting/MyAddress.tsx | 122 +- assets/img/Mask group (1).png | Bin 0 -> 123347 bytes assets/img/Mask group.png | Bin 0 -> 117993 bytes package-lock.json | 4 +- package.json | 1 + yarn.lock | 1052 ++++++----------- 19 files changed, 1369 insertions(+), 809 deletions(-) create mode 100644 app/components/TiktokIcon.tsx rename app/screens/{InquiryScreen => banner}/InquiryScreen.tsx (100%) rename app/screens/{ => banner}/ShippingDetailsSection.tsx (95%) create mode 100644 app/screens/banner/TikTokScreen.tsx create mode 100644 app/screens/function/BrowseHistoryScreen.tsx create mode 100644 app/screens/function/Collection.tsx create mode 100644 assets/img/Mask group (1).png create mode 100644 assets/img/Mask group.png diff --git a/App.tsx b/App.tsx index b32414c..8dc359f 100644 --- a/App.tsx +++ b/App.tsx @@ -15,9 +15,9 @@ import { SearchScreen } from "./app/screens/SearchScreen"; import { SearchResultScreen } from "./app/screens/SearchResultScreen"; import { ProductDetailScreen } from "./app/screens/ProductDetailScreen"; import { BalanceScreen } from "./app/screens/BalanceScreen"; -import { ShippingDetailsSection } from "./app/screens/ShippingDetailsSection"; +import { ShippingDetailsSection } from "./app/screens/banner/ShippingDetailsSection"; import { GestureHandlerRootView } from "react-native-gesture-handler"; -import { InquiryScreen } from "./app/screens/InquiryScreen/InquiryScreen"; +import { InquiryScreen } from "./app/screens/banner/InquiryScreen"; import { Recipient } from "./app/screens/Recipient/Recipient"; import { AddRess } from "./app/screens/Recipient/Address"; import { SettingList } from "./app/screens/setting/SettingList"; @@ -31,7 +31,9 @@ import { ConfirmOrder } from "./app/screens/Recipient/ConfirmOrder"; import { Pay } from "./app/screens/pay/Pay"; import { Status } from "./app/screens/productStatus/Status"; import { OrderDetails } from "./app/screens/productStatus/OrderDatails"; - +import { TikTokScreen } from "./app/screens/banner/TikTokScreen"; +import { BrowseHistoryScreen } from "./app/screens/function/BrowseHistoryScreen"; +import { Collection } from "./app/screens/function/Collection"; export type RootStackParamList = { CountrySelect: undefined; MainApp: undefined; @@ -57,6 +59,9 @@ export type RootStackParamList = { Pay: undefined; Status: undefined; OrderDetails: undefined; + TikTokScreen: undefined; + BrowseHistoryScreen: undefined; + Collection: undefined; }; const Stack = createNativeStackNavigator(); @@ -274,6 +279,33 @@ export default function App() { gestureDirection: "horizontal", }} /> + + + diff --git a/app/components/TiktokIcon.tsx b/app/components/TiktokIcon.tsx new file mode 100644 index 0000000..a851007 --- /dev/null +++ b/app/components/TiktokIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; + +const TiktokIcon = ({color,size}:{color:string,size:number}) => ( + + + +); + +export default TiktokIcon; \ No newline at end of file diff --git a/app/screens/CategoryScreen.tsx b/app/screens/CategoryScreen.tsx index 1f59894..be8ec86 100644 --- a/app/screens/CategoryScreen.tsx +++ b/app/screens/CategoryScreen.tsx @@ -1,71 +1,162 @@ import React, { useState } from 'react'; -import { View, Text, StyleSheet, Button, Modal, TouchableOpacity, Dimensions } from 'react-native'; +import { + View, + Text, + FlatList, + TouchableOpacity, + StyleSheet, + Image, + Dimensions, + ListRenderItem, +} from 'react-native'; +import fontSize from '../utils/fontsizeUtils'; +import widthUtils from '../utils/widthUtils'; -export const CategoryScreen = () => { - const [isModalVisible, setIsModalVisible] = useState(false); +type Category = { + id: string; + name: string; +}; + +type Product = { + name: string; + img: string; +}; + +const categories: Category[] = [ + { id: 'fruit', name: '水果' }, + { id: 'snacks', name: '零食' }, + { id: 'clothes', name: '服饰' }, + { id: 'home', name: '家居' }, +]; + +const productsData: Record = { + fruit: [ + { name: '苹果', img: 'https://via.placeholder.com/100?text=苹果' }, + { name: '香蕉', img: 'https://via.placeholder.com/100?text=香蕉' }, + { name: '西瓜', img: 'https://via.placeholder.com/100?text=西瓜' }, + ], + snacks: [ + { name: '薯片', img: 'https://via.placeholder.com/100?text=薯片' }, + { name: '饼干', img: 'https://via.placeholder.com/100?text=饼干' }, + { name: '巧克力', img: 'https://via.placeholder.com/100?text=巧克力' }, + ], + clothes: [ + { name: 'T恤', img: 'https://via.placeholder.com/100?text=T恤' }, + { name: '牛仔裤', img: 'https://via.placeholder.com/100?text=牛仔裤' }, + { name: '外套', img: 'https://via.placeholder.com/100?text=外套' }, + ], + home: [ + { name: '毛巾fdfd一定要人盯人一天的玉兔捣药', img: 'https://via.placeholder.com/100?text=毛巾' }, + { name: '椅子', img: 'https://via.placeholder.com/100?text=椅子' }, + { name: '灯具', img: 'https://via.placeholder.com/100?text=灯具' }, + ], +}; - const toggleModal = () => { - setIsModalVisible(!isModalVisible); - }; +export function CategoryScreen() { + const [activeCategory, setActiveCategory] = useState('fruit'); + + const renderCategoryItem: ListRenderItem = ({ item }) => ( + setActiveCategory(item.id)} + > + + {item.name} + + + ); + + const renderProductItem: ListRenderItem = ({ item }) => ( + + + {item.name} + + ); return ( -