使用 FlatList 可滚动的本机独立视图组件？

【问题标题】：React Native Separate View Component Scrollable with FlatList?使用 FlatList 可滚动的本机独立视图组件？
【发布时间】：2020-02-21 14:53:52
【问题描述】：

有没有办法使用 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 滚动？

【问题讨论】：

标签： ios react-native react-native-ios react-native-flatlist

【解决方案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 周围放置一个视图，否则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>

【讨论】：