React Native：SectionList Section Headers 覆盖 List Footer答案

【问题标题】：ReactNative: SectionList SectionHeaders overwriting ListFooterReact Native：SectionList Section Headers 覆盖 List Footer
【发布时间】：2020-04-16 10:50:19
【问题描述】：

我有一个包含核心组件 SectionList 的 React Native 页面。 SectionList 具有粘性节标题 (stickySectionHeadersEnabled) 和列表页脚 (ListFooterComponent)。当用户滚动过去最后一节时，最后一节页眉仍然停留在页面顶部，覆盖页脚。但是，我更希望将粘性标题包含在部分列表区域的正文中，而不是在最后一部分结束后保留在屏幕上。

是否可以使用 SectionList 来实现这一点，还是我应该采取其他方法？

Expo 小吃展示了这种行为（仅限 iOS 和 Android）

https://snack.expo.io/@unstableair/rn-sectionlist-footer-overlay-example

    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}
      renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}
      stickySectionHeadersEnabled={true}
      ListFooterComponent={<View style={styles.footer}><Text>ListFooterComponent </Text></View>}
    />

【问题讨论】：

标签： react-native react-native-sectionlist

【解决方案1】：

为了解决这个问题，我在 SectionList 数据的底部添加了一个空白部分。最后一个 SectionHeader 仍然会覆盖 ListFooter 但因为它是一个高度为 0 的 View，所以你看不到它。

【讨论】：