Android 上的 React Native FlatList 标头 zIndex

Question

我在 Android FlatList 上遇到问题。如果标头中有一个向下延伸的元素（在我的例子中，标头底部有一个下拉菜单），它总是在 Android 上的 flatList 项目下呈现。我可以将 contentContainerStyle zIndex 设置为 99 之类的值，这解决了 iOS 上的问题，但 Android 仍然在列表项下呈现标题。

如果在渲染 flatList 后更改 zIndex，则该问题会以某种方式得到解决，但这会引入另一个问题。当我向下滚动列表时，应用程序严重崩溃。这是展示这个问题的世博会小吃。

最初，zIndex 设置为某个大值，按下 Change ZINDEX 按钮只需将其增加 1。这修复了 zIndex 问题，但一旦您开始滚动列表，应用程序就会崩溃。

https://snack.expo.dev/GalYuThms?platform=android

知道如何解决这个问题吗？

谢谢。

Answer 1

确实有助于解决此问题的一件事是使用stickyHeaderIndices，如下所示：

<FlatList
    ListHeaderComponent={() => {
      return (
        <View style={styles.header}>
          <View style={styles.headerInnerComp}/>
        </View>
      );
    }}
    ListHeaderComponentStyle={{zIndex: 99}}              
    data={[1,2,3,4,5,6]}
    stickyHeaderIndices={[0]} //Here
    renderItem={() => <View style={{width: '80%', height: 100, backgroundColor: 'red', margin: 8}}/>}
    contentContainerStyle={{zIndex: 1}}  
/>

这会产生以下输出：

但，它带来了您可能不想要的副作用，即标题始终位于滚动视图的顶部。

如果您不希望它被粘住，我将尝试搜索另一个解决方案并更新此答案。

[编辑]

尝试在你的 Flatlist 上使用removeClippedSubviews={false}，这个评论说它可以防止 Android 设备上的崩溃，而且看起来它解决了你的问题。