我的平面列表中有一个标题组件，如何使第一个项目与标题的底部重叠

Question

在我公司当前的用户故事中，我需要构建一个位于列表顶部的组件，该组件是 FlatList 的标题。我需要使第一项(而不是标题(保持在标题的顶部，但标题上有文本，以便文本也应该可见。

我在ScrollView中使用FlatList制作了它：- 滚动视图 - 标题组件 - 平面列表

效果很好，问题是雇用我的公司不喜欢这样。

当使用ScrollView时，我也使用绝对位置并使marginTop -80。

我正在使用 FlatList 属性：ListHeaderComponent/ListHeaderComponentStyle

    const concierge = <Concierge type="article" />;
    return (
      <FlatList
        style={styles.container}
        data={data}
        keyExtractor={(card, i) => `${card.id}_${i}`}
        renderItem={this.renderQuickViews}
        extraData={cardsContent}
        ListHeaderComponent={concierge}
        ListHeaderComponentStyle={styles.concierge}
      />
    );

我需要将 Concierge 组件显示在列表的第一个元素下，但仍然可以看到，第一个元素只能与标题重叠一半。

Answer 1

我找到了解决方案，经过一段时间的休息，因为如果我做一个 marginBottom： 80，下面的项目会下降 80px，这是在 CSS 中合乎逻辑的事情，那么如果我做 marginBottom： -80，它应该上升吗？是的，确实如此。

使平面列表中的第一个元素与平面列表标题重叠的解决方案很简单：边距底部：-80

这个数字是

相对的，在我的情况下-80是数字，在其他人的情况下可能是另一个数字。