如何在本机反应中实现多个可滚动的粘性标题

【问题标题】：how to implement multiple scrollable sticky headers in react native如何在本机反应中实现多个可滚动的粘性标题
【发布时间】：2021-07-14 08:31:52
【问题描述】：

请参阅下面的video，了解我想要实现的目标，我有一个带有多个平面列表的屏幕，其中包含数据和其他项目，我希望每个标题在用户滚动浏览不同部分时都保持不变。我曾尝试使用 React Native flatlist 附带的 stickyheaders 道具，但它只适用于一个 flatlist，我正在寻找一种解决多个sticky headers 的解决方案。

谢谢

【问题讨论】：

标签： javascript reactjs react-native mobile

【解决方案1】：

您必须在屏幕中使用单个平面列表才能实现这一点， flatlist中有ListHeaderComponent和ListFooterComponent，可以试试在header中添加item

ScrollView/Flatlist 有一个属性stickyHeaderIndices，您可以给出例如 stickyHeaderIndices={[0,3,5]}

的值

在这个例子中滚动，第一个项目将停止，然后是第三个，然后是第五个，

【讨论】：

谢谢！这行得通，但我不得不使用 scrollview stickyHeaderIndices 因为将页面上的所有项目转换为 Flatlist 数据有点困难
它只粘贴单个项目@Nikhil bhatia
您必须将每个元素包装在单独的中，因此它将第一个视图标识为 0