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 ( -