FlatList组件的问题

Question

老师我的一个页面分别由两个组件构成，他们的结构是：

<View>
	<Slider/>          //轮播图组件
	<RecommendList/>   //可内容垂直滚动组件，使用了FlatList
</View>

我的问题是，

1. FlatList构建可滑动区域的原理是什么，他是怎么确定页面上哪一个区域内的内容可以是滚动的，
2. 此外他是否有一些默认的样式？
3. 什么情况下，FlatList中的组件才是可以滚动的
4. 我想实现的效果是：Slider组件下面接着就是RecommendList组件，请问我应该如何实现？
   问这些问题，是因为出现了以下的bugger：
   
   如图：当可滚动的内容比较少的时候，我的Slider组件还可以显示，但是FlatList中的内容居然无法显示，这里我渲染了30条数据，明显图中小于30条数据，应该可以滚动的才对，但是无法滚动，具体是为什么无法滚动？

如果我渲染的数据为35条的时候：会出现以下的结果:

会发现当FlatList中的数据变多的时候，会将Slider组件给覆盖一部分，如果再多其实就会将整个Slider给覆盖，同时也可以看出FlatList会在头部有留白部分，具体这是为什么？

您之前说的在最外层View组件中添加flex=1的样式，以及给Slider设置高度，我试过了，但是依旧无法解决Recommend组件中的FlatList组件将Slider覆盖的结果

Answer 1

CrazyCodeBoy 2022-06-29 22:26:20

那应该是你用的Slider插件和Flatlist的兼容问题了，你用的是哪个Slider插件看下它的官方issues是否有网友遇到类似问题的呢，另外也可看下https://github.com/KPS250/React-Native-FlatList-Slider 插件是否可以满足你的需求

• 提问者 慕丝1117639 #1

  请问你的意思是：
  如果正常情况下，FlatList组件是不会有顶部留白的情况对吧，那么请问FlatList是如何知道当前这个组件内的内容是否可以被滑动的呢？

• 提问者 慕丝1117639 #2

  用了一下您推荐的额FlatListSlider这个组件，有个bugger，就是当轮播到最后一张图片之后，再次返回到第一张图片会出现bugger，不是很好用，谢谢推荐