react-native-flatlist 相关问题

我需要显示产品类别。每个类别都包含多个应该水平滚动的产品。

import React, {useState, useEffect, useCallback, memo} from "react"; import { View, Text, StyleSheet, SafeAreaView, Image, StatusBar, TouchableOpacity, ScrollView, } from "react-native"; import Colors from "@/constants/Colors"; import {responsiveFontSize} from "@/utils/Responsive"; import {useRouter} from "expo-router"; import BannerSlider from "@/components/home/BannerSlider"; import BannerSkeleton from "@/components/skeleton/home/bannerSkeleton"; import CategorySkeleton from "@/components/skeleton/home/categorySkeleton"; import Sidebar from "@/components/Sidebar"; import {MenuIcon} from "@/assets/icons/index"; import {useAuth} from "@/context/AuthContext"; import {fetchAllBanners, fetchCategoryList} from "@/lib/api"; interface Category { categoryId: string; name: string; image?: string; parentCategoryId: string | null; } interface Banner { id: string; image: string; } const CategoryItem: React.FC<{ item: Category; onPress: (categoryId: string) => void; }> = memo(({item, onPress}) => { return ( <TouchableOpacity activeOpacity={1} onPress={() => onPress(item.categoryId)} > <View style={{ width: responsiveFontSize(28), height: responsiveFontSize(34), }} > <View style={styles.categoryItem}> {item.image ? ( <Image source={{uri: item.image}} style={styles.categoryImage} resizeMode="contain" /> ) : ( <View style={styles.categoryImagePlaceholder} /> )} </View> <Text style={styles.categoryTitle}>{item.name}</Text> </View> </TouchableOpacity> ); }); const HomeUserScreen: React.FC = () => { const router = useRouter(); const {userRole} = useAuth(); const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false); const [allBanners, setAllBanners] = useState<Banner[]>([]); const [isFetchingBanners, setIsFetchingBanners] = useState<boolean>(false); const [isFetchingCategories, setIsFetchingCategories] = useState<boolean>(false); const [categories, setCategories] = useState<Category[]>([]); useEffect(() => { const fetchBanners = async () => { setIsFetchingBanners(true); try { const bannersResponse = await fetchAllBanners(); setAllBanners(bannersResponse.data); } catch (error) { console.error("Error fetching banners:", error); } finally { setIsFetchingBanners(false); } }; fetchBanners(); }, []); useEffect(() => { const fetchCategories = async () => { setIsFetchingCategories(true); try { const categoriesResponse = await fetchCategoryList(); setCategories(categoriesResponse.data); categoriesResponse.data.forEach((category: Category) => { if (category.image) { Image.prefetch(category.image); } }); } catch (error) { console.error("Error fetching categories:", error); } finally { setIsFetchingCategories(false); } }; fetchCategories(); }, []); const navigateToProduct = useCallback( (categoryId: string) => { router.push({pathname: "/product/[id]", params: {id: categoryId}}); }, [router] ); return ( <SafeAreaView style={styles.safeArea}> <StatusBar barStyle="light-content" backgroundColor={Colors.primary} /> <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} /> <View style={styles.header}> <TouchableOpacity onPress={() => setIsSidebarOpen(true)} style={styles.menuButton} > <MenuIcon /> </TouchableOpacity> <Text style={styles.headerTitle}>خانه</Text> </View> <> {isFetchingBanners ? ( <BannerSkeleton /> ) : ( <BannerSlider data={allBanners} /> )} {isFetchingCategories ? ( <CategorySkeleton /> ) : ( <ScrollView style={styles.pageContainer} showsVerticalScrollIndicator={false} > {categories .filter((category) => category.parentCategoryId === null) .map((category) => ( <View key={category.categoryId} style={styles.categorySection}> <Text style={styles.categorySectionTitle}> {category.name} </Text> <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={styles.horizontalScroll} showsVerticalScrollIndicator={false} > {categories .filter( (subcategory) => subcategory.parentCategoryId === category.categoryId ) .map((subcategory) => ( <CategoryItem key={subcategory.categoryId} item={subcategory} onPress={navigateToProduct} /> ))} </ScrollView> </View> ))} </ScrollView> )} </> </SafeAreaView> ); };

react-native expo scrollview react-native-flatlist react-native-scrollview

回答 0 投票 0

如何在加载早期消息时将卷轴列表保存在闪存列表中？

react-native expo react-native-flatlist flash-list

回答 1 投票 0

如何防止在用redux的嵌套闪存列表中重新渲染所有项目

react-native react-redux redux-toolkit react-native-flatlist

回答 1 投票 0

如何在嵌套列表中动态计算父的大小，而添加或删除项目

SOIM在菜单上工作，其中有类别和子类别，子类别是可折叠的，并且可折叠的动画使我的问题立即提供了固定的高度。

react-native expo react-native-flatlist react-native-reanimated

回答 1 投票 0