diff --git a/app/screens/HomeScreen.tsx b/app/screens/HomeScreen.tsx
index 1cb19ea..6dd87b2 100644
--- a/app/screens/HomeScreen.tsx
+++ b/app/screens/HomeScreen.tsx
@@ -781,6 +781,11 @@ export const HomeScreen = () => {
Alert.alert("已重置", "现在您可以使用相机功能了");
}, []);
+ // 优化轮播图切换回调
+ const handleCarouselSnap = useCallback((index: number) => {
+ setActiveIndex(index);
+ }, []);
+
const renderItem = ({ item, index }: { item: Product; index: number }) => {
if (index >= products.length && index < products.length + loadingPlaceholders) {
return ;
@@ -788,10 +793,11 @@ export const HomeScreen = () => {
return renderProductItem({ item });
};
- const renderHeader = () => (
+ const renderHeader = useCallback(() => (
<>
{
parallaxScrollingScale: 0,
parallaxScrollingOffset: 0,
}}
+ onSnapToItem={handleCarouselSnap}
renderItem={({ item }) => (
navigation.navigate(item.add)}
@@ -822,6 +829,17 @@ export const HomeScreen = () => {
)}
/>
+
+ {data.map((_, index) => (
+
+ ))}
+
{
) : null}
- );
+ ), [activeIndex, selectedHorizontalCategory]);
return (
@@ -956,30 +974,8 @@ export const HomeScreen = () => {
{renderSkeletonGrid()}
) : (
-
- (item?.offer_id ? `${item.offer_id}-${currentPage}-${index}` : `placeholder-${currentPage}-${index}`)
- }
- contentContainerStyle={{
- paddingBottom: 15,
- backgroundColor: "transparent",
- }}
- ListHeaderComponent={renderHeader}
- onEndReached={handleLoadMore}
- onEndReachedThreshold={3}
- ListFooterComponent={() => (
- !hasMore && !loadingPlaceholders ? (
-
- 没有更多数据了
-
- ) : null
- )}
refreshControl={
{
progressBackgroundColor="transparent"
/>
}
- />
+ onScroll={({ nativeEvent }) => {
+ const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+ const paddingToBottom = 20;
+ if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
+ handleLoadMore();
+ }
+ }}
+ scrollEventThrottle={400}
+ >
+ {/* 轮播图区域 */}
+
+ (
+ navigation.navigate(item.add)}
+ activeOpacity={1}
+ key={item.imgUrl}
+ style={{
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#f2f2f2",
+ borderRadius: 0,
+ overflow: "hidden",
+ }}
+ >
+
+
+ )}
+ />
+
+ {data.map((_, index) => (
+
+ ))}
+
+
+
+
+ {t("homePage.searchPlaceholder")}
+ setShowImagePickerModal(true)}
+ >
+
+
+
+
+
+
+ {/* Banner区域 */}
+
+
+
+
+
+ navigation.navigate("TikTokScreen")}
+ >
+
+
+
+
+
+
+
+
+ {/* 分类区域 */}
+
+
+
+ {categories.map((category, index) => (
+ setSelectedHorizontalCategory(category)}
+ >
+
+ {t(`homePage.${category.toLowerCase()}`)}
+
+
+ ))}
+
+
+
+
+ setShowCategoryModal(true)}>
+
+
+
+
+
+ {/* 子分类区域 */}
+ {selectedHorizontalCategory &&
+ categoryContent[selectedHorizontalCategory] &&
+ categoryContent[selectedHorizontalCategory].length > 0 ? (
+
+
+ {categoryContent[selectedHorizontalCategory].map((item) => (
+ {
+ // Handle subcategory selection
+ }}
+ >
+
+
+
+ {item.title}
+
+ ))}
+
+
+ ) : null}
+
+ {/* 产品网格 */}
+
+
+ {(() => {
+ const allItems = [...products, ...Array(loadingPlaceholders).fill(null)];
+ const rows = [];
+
+ for (let i = 0; i < allItems.length; i += 2) {
+ const leftItem = allItems[i];
+ const rightItem = allItems[i + 1];
+
+ rows.push(
+
+ {/* 左侧商品 */}
+ {leftItem ? (
+ i >= products.length ? (
+
+ ) : (
+ renderProductItem({ item: leftItem })
+ )
+ ) : null}
+
+ {/* 右侧商品 */}
+ {rightItem ? (
+ i + 1 >= products.length ? (
+
+ ) : (
+ renderProductItem({ item: rightItem })
+ )
+ ) : (
+
+ )}
+
+ );
+ }
+
+ return rows;
+ })()}
+
+
+ {/* 底部提示 */}
+ {!hasMore && !loadingPlaceholders && (
+
+ 没有更多数据了
+
+ )}
+
+
)}
({
paddingTop: 0,
},
productCardGroup: {
+ flexDirection: "row",
justifyContent: "space-between",
marginBottom: 15,
paddingHorizontal: 15,