FlatList组件的问题
来源：7-4 列表实现&数据渲染【封装与复用】
慕丝1117639
2022-06-29
老师我的一个页面分别由两个组件构成，他们的结构是：
<View>
<Slider/> //轮播图组件
<RecommendList/> //可内容垂直滚动组件，使用了FlatList
</View>
我的问题是，
- FlatList构建可滑动区域的原理是什么，他是怎么确定页面上哪一个区域内的内容可以是滚动的，
- 此外他是否有一些默认的样式？
- 什么情况下，FlatList中的组件才是可以滚动的
- 我想实现的效果是：Slider组件下面接着就是RecommendList组件，请问我应该如何实现？
问这些问题，是因为出现了以下的bugger：
如图：当可滚动的内容比较少的时候，我的Slider组件还可以显示，但是FlatList中的内容居然无法显示，这里我渲染了30条数据，明显图中小于30条数据，应该可以滚动的才对，但是无法滚动，具体是为什么无法滚动？
如果我渲染的数据为35条的时候：会出现以下的结果:
会发现当FlatList中的数据变多的时候，会将Slider组件给覆盖一部分，如果再多其实就会将整个Slider给覆盖，同时也可以看出FlatList会在头部有留白部分，具体这是为什么？
您之前说的在最外层View组件中添加flex=1的样式，以及给Slider设置高度，我试过了，但是依旧无法解决Recommend组件中的FlatList组件将Slider覆盖的结果
写回答
1回答
-
CrazyCodeBoy
2022-06-29
那应该是你用的Slider插件和Flatlist的兼容问题了，你用的是哪个Slider插件看下它的官方issues是否有网友遇到类似问题的呢，另外也可看下https://github.com/KPS250/React-Native-FlatList-Slider 插件是否可以满足你的需求022022-06-30
相似问题