如何仅修复两个 React Native 平面列表中的一个标头

Question

我正在使用 React Native 并使用 FlatList 组件。

我们要解决的问题是： FlatList中有一个表头，表头由两个元素界定。 （顶部区域，类别选择栏）

在这里，向下滚动时，我只想将 CategorySelectBar 粘贴到屏幕顶部，但 StickyHeaderIndices 使这两个元素都粘贴。有办法解决这个问题吗？

改变HTML结构是可以的。 谢谢你

在此输入图片描述

<StyleHome>
      <Header
        pageName={route.name}
        setIsLanguageSheetOpen={setIsLanguageSheetOpen}
        isShouldChangeHeaderColor={isShouldChangeHeaderColor}
      />

      <FlatList
        onScroll={scrollHandler}
        data={storeInfo.menu_info}
        stickyHeaderIndices={[0]}
        showsVerticalScrollIndicator={false}
        bounces={false}
        ListHeaderComponent={() => (
          <>
            <StyleTopArea>
              <StyleStoreName>{storeInfo?.store_info.name}</StyleStoreName>
            </StyleTopArea>
            <CategorySelectBar
              storeInfo={storeInfo}
              currentCategory={currentCategory}
              setCurrentCaetegory={setCurrentCaetegory}
            />
          </>
        )}
        renderItem={({item: menuInfo, index}) => (
          <StyleMenuList key={menuInfo._id.$oid}>
            {index !== 0 && (
              <StyleText
                fontSize={16}
                style={{fontWeight: 'bold', marginBottom: 20, marginTop: 20}}>
                {menuInfo.Name}
              </StyleText>
            )}
            {menuInfo.MenuInfo.map((menu, i) => (
              <MenuListItem
                navigation={navigation}
                key={menu._id.$oid}
                menu={menu}
                index={i}
              />
            ))}
          </StyleMenuList>
        )}
      />

      {isLanguageSheetOpen && (
        <LanguageChangeBottomSheet
          setIsLanguageSheetOpen={setIsLanguageSheetOpen}
        />
      )}
    </StyleHome>

我刚刚开始使用 React Native，所以我对这些概念可能有点陌生，但我会很感激任何帮助。

Answer 1

<StyleHome>
  <Header
    pageName={route.name}
    setIsLanguageSheetOpen={setIsLanguageSheetOpen}
    isShouldChangeHeaderColor={isShouldChangeHeaderColor}
  />

  <StyleTopArea>
    <StyleStoreName>{storeInfo?.store_info.name}</StyleStoreName>
  </StyleTopArea>

  <CategorySelectBar
    storeInfo={storeInfo}
    currentCategory={currentCategory}
    setCurrentCategory={setCurrentCategory}
    style={{position: 'sticky', top: 0, zIndex: 1}}
  />

  <FlatList
    onScroll={scrollHandler}
    data={storeInfo.menu_info}
    showsVerticalScrollIndicator={false}
    bounces={false}
    ListHeaderComponent={() => <></>} // Empty component since the header is rendered above
    renderItem={({ item: menuInfo, index }) => (
      <StyleMenuList key={menuInfo._id.$oid}>
        {index !== 0 && (
          <StyleText
            fontSize={16}
            style={{ fontWeight: 'bold', marginBottom: 20, marginTop: 20 }}>
            {menuInfo.Name}
          </StyleText>
        )}
        {menuInfo.MenuInfo.map((menu, i) => (
          <MenuListItem
            navigation={navigation}
            key={menu._id.$oid}
            menu={menu}
            index={i}
          />
        ))}
      </StyleMenuList>
    )}
  />

  {isLanguageSheetOpen && (
    <LanguageChangeBottomSheet
      setIsLanguageSheetOpen={setIsLanguageSheetOpen}
    />
  )}
</StyleHome>

试试这个