时间戳

首页 > 解决方案 > 使用 FlatList 可滚动的本机独立视图组件？

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

问题描述

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

标签： iosreact-nativereact-native-iosreact-native-flatlist

解决方案

您可以将组件放在ListHeaderComponentFlatList 提供的道具中，例如：

<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>
    }/>

或者把所有东西都放在 aScrollView中，记得在周围放一个 ViewFlatList否则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>

推荐阅读