1

在 react-native 中，使用 SectionList，我希望有一个带有背景颜色的粘性部分标题，但只有当元素是粘性的时。到目前为止，我所做的是将视图位置设置为绝对位置。问题是我找不到获取视图后面的项目的方法，这与嵌套在下面的图片不同：

没有应用 zIndex'es：

没有应用 zIndex'es

到目前为止，我一直尝试设置不同的 zIndex，但它似乎不起作用，因为所有内容都在视图后面，包括 SectionHeaders，尽管 zIndex 比视图高。我想，这是因为 zIndex 是相对于父级的。一张图片嵌套在下面：

应用 zIndex 时：

应用了 zIndex'es

总结一下：如何确保项目位于视图后面，以模拟背景，位于粘性部分标题上？其他获得粘性部分标题背景的解决方案也非常感谢。

我在下面插入了代码（使用 zIndex'es）。

render () { return (
    <View>
        
        {/* Header */}
        <View style={[styling.headerContainer, {zIndex: 8}]}/>

        {/* List */}
        <SectionList
            sections={DATA}
            keyExtractor={(item, index) => `${item} - ${index}`}
            stickySectionHeadersEnabled
            style={{marginTop: 44}}
            
            // Section Header
            renderSectionHeader={({section}) => 
                <View style={[styling.sectionHeaderContainer, {zIndex: 9}]}>
                    <Text style={styling.title}>{section.title}</Text>
                </View>
            }
            
            // Items
            renderItem={({item}) => 
                <Text style={[styling.text, {zIndex: 7}]}>{item}</Text>
            }
        />

    </View>
)}
4

0 回答 0