如何为 ReactNative SectionList 项目可见性添加偏移量

Question

我有一个带有SectionList 的ReactNative 应用程序。列表上有一个绝对定位的标题，其中包含各部分的名称。 滚动此列表时，我需要更新当前滚动的部分。

这是我的代码：

const handleChangeSelectedIndexWithScroll = ({ viewableItems }) => {
  if (!viewableItems || viewableItems.length === 0) {
    return;
  }

  // Get which section is visible on the screen
  const visibleSectionsId = viewableItems.map(
    (viewableItem) => viewableItem.section.index
  );

  // Say that the currently scrolled section is the first one that has any visible item.
  // By doing this, if the first section has any single visible item, it will be the one selected
  setCurrentSectionScrolled(Math.min(...visibleSectionsId));
};

<SectionList
        ref={recipeDetailsRef}
        sections={data}
        onViewableItemsChanged={handleChangeSelectedIndexWithScroll}
/>

问题： 使用绝对标题，滚动效果不能很好地反映，因为 RN 认为该部分的项目在屏幕上可见，而实际上，它们可以隐藏在标题后面。

截图 在此图像上，您可以看到当前选定的部分是“成分”，而实际上，我们已经在“材料”上，因为在绝对标题后面，仍然有一个对 RN 可见的成分

考虑的解决方案：

• 我知道 viewabilityConfig 但它不起作用，因为该部分的每个项目可以很小，并且两个或三个项目可以隐藏在标题后面。这意味着即使我说 90% 的项目应该是可见的才算可见，但这并不能解决问题。
• 更改

  handleChangeSelectedIndexWithScroll

  函数以表示多个项目应该可见，该部分才被视为可见。它不起作用，因为一个部分可以有一个项目，也可以有多个高项目。

这就是为什么我想知道是否有一个解决方案可以对 RN 说：“请考虑此列表有 50px 的偏移量”，这样他们就不会考虑位于此偏移量中的可见项目

谢谢

Answer 1

如果您想更改活动项目，可以使用以下方法。

const handleChangeSelectedIndexWithScroll = ({ changed , viewableItems }) => {
  if (!viewableItems || viewableItems.length === 0) {
    return;
  }
  
  const sectionIndex = viewableItems.length - changed.length

  setCurrentSectionScrolled(sectionIndex);
};

Answer 2

如果遇到此问题，请尝试在contentStyle中设置transform: [{translateY: HEADER_HEIGHT}]并在同一contentStyle中设置paddingBottom: HEADER_HEIGHT来补偿此偏移。这对我来说在一个带有倒置平面列表和绝对模糊标题的示例聊天应用程序中有用，我在其中使用了 paddingBottom paddingTop 和负变换