React Native 如何在同一页面上包含相互滚动的常规View和FlatList？

ukxgm1gy 于 2023-08-07 发布在 React

关注(0)|答案(1)|浏览(98)

我有一个设计，页面有一个顶部的“标题”图像和它下面的项目列表。我已经把顶部的标题放在它自己的视图中，并把列表放到一个FlatList中。我需要在这里使用FlatList，因为列表是分页的，并且我想使用onEndReached功能。
我面临的问题是，如果我不把所有东西都 Package 在一个ScrollView中，那么顶部的头就像一个粘性项。但是，如果我确实将所有内容 Package 在ScrollView中并将FlatList设置为scrollEnabled={false}，则它可以工作，但onEndReached回调不再触发。
这里有一个小例子，它说明了我不希望发生的事情，但onEndReached回调在哪里工作。
https://snack.expo.dev/@ktranel101/brave-churros
这里有一个小例子，说明了我确实希望发生的事情，但onEndReached回调不起作用。
https://snack.expo.dev/@ktranel101/thankful-ice-cream的

react-native

来源：https://stackoverflow.com/questions/76807548/how-to-include-a-regular-view-and-flatlist-on-the-same-page-that-scroll-with-eac

1条答案

按热度按时间

6l7fqoea1#

将标题移动到FlatList的ListHeaderComponent：

<FlatList
   data={imgs}
   renderItem={({item}) => {
     return (
       <View
         style={styles.thumbnail}>
         <ImageBackground resizeMode='cover' style={styles.thumbnailImg} source={{uri : item}}>
         </ImageBackground>
       </View>
     )
   }
   ListHeaderComponent={() => (
     <View
       style={styles.thumbnail}>
       <ImageBackground resizeMode='cover' style={styles.thumbnailImg} source={{uri : 'https://s3.us-east-2.amazonaws.com/treo-dev/3d4921d2-a5c2-4040-a539-c2aaafac36ac/c8f66690-2fed-11ee-b91f-3b644dc34d01.jpg'}}>
       </ImageBackground>
     </View>
   )}
/>

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

React Native 如何在同一页面上包含相互滚动的常规View和FlatList？

1条答案

相关问题

热门标签

最新问答