在 React Native 中没有粘性标题的 Flatlist Horizontal？答案

【问题标题】：Flatlist Horizontal without sticky header in React Native?在 React Native 中没有粘性标题的 Flatlist Horizontal？
【发布时间】：2020-11-07 15:57:14
【问题描述】：

我正在使用 flatlist 来呈现从 firestore 收集的一些项目，但 ListHeaderComponent 道具有问题。标题放在左边，我需要把它放在第一项的顶部（见下面的第二张图片），当移动它时，它必须用列表的第一项作为图片来固定。

目前

Horizontal flatlist with ListHeaderComponent on the left

我需要在向左滚动时实现这一点：

Horizontal flatlist with ListHeaderComponent on the top of 1st item

【问题讨论】：

标签： react-native react-native-flatlist react-native-sectionlist

【解决方案1】：

您可以将标题文本与FlatList 分开。显然使用Text 来显示标题。

编辑

如果您想滚动带有列表的文本，您可以在ScrollView 中使用FlatList。在这种情况下，您可以禁用 FlatList 的滚动。详情请查看下方。

<ScrollView horizontal>
    <Text>Header Text</Text>
    <FlatList scrollEnabled={false} />
</ScrollView>

【讨论】：

但是Text应该和FlatList同时滚动，可以吗？
在这种情况下，您可以使用ScrollView。让我编辑我的答案。

【解决方案2】：

好的，解决了！代码如下：

 <ScrollView horizontal={true}
   <View>
      <Text>Header Text</Text>
      <FlatList horizontal={true}
        scrollEnabled={false} />
      </FlatList>
   </View>
  </ScrollView>

谢谢@baymax :)

【讨论】：