使用 FlatList 响应本机独立视图组件可滚​​动？

Question

有没有办法用 FlatList 滚动单独的组件？

<View>
  <View>
    <Text>Some component outside of FlatList</Text>
    <Text>Porfile Information Above FlatList</Text>
    <Text>How to scroll with flatlist</Text>
  </View>

  <FlatList
    data={DATA}
    renderItem={({item}) => (
      <View>
        <Text>a bunch of list that will scroll</Text>
      </View>
    )}
  />
<View>

因此，如果您渲染整个组件，FlatList 上方会有一个部分，它会停留在那里，而只有 FlatList 是可滚动的。

如何使顶部可以随 FlatList 滚动？

Answer 1

您可以将组件放入 FlatList 提供的 ListHeaderComponent 属性中，例如：

<FlatList
    data={DATA}
    renderItem={({ item }) => (
        <View>
            <Text>a bunch of list that will scroll</Text>
        </View>
    )}
    ListHeaderComponent={
       <View>
          <Text>Some component outside of FlatList</Text>
          <Text>Porfile Information Above FlatList</Text>
          <Text>How to scroll with flatlist</Text>
       </View>
    }/>

或者把所有东西都放在 ScrollView 里面，记得在 FlatList 周围放一个 View 否则 FlatList 滚动可能不起作用：

<ScrollView>
    <View>
      <Text>Some component outside of FlatList</Text>
      <Text>Porfile Information Above FlatList</Text>
      <Text>How to scroll with flatlist</Text>
   </View>
   <View>
        <FlatList
            data={DATA}
            renderItem={({item}) => (
                <View>
                    <Text>a bunch of list that will scroll</Text>
                </View>
         )}/>
   </View>
</ScrollView>