飞猪效果图
首先贴图看是不是你要找的效果:
描述:效果大概就是 layout滚动时会覆盖固定的一部分layout，且固定的layout可交互可操作可点击
首先，站在reactnative的角度来讲，懂rn的小伙伴第一时间肯定觉得这个排版很简单，没错，如果固定的那一部分不需要交互点击的话，确实超级简单，只需要吧固定的弄在scrollView外面，而scrollview铺满屏幕，这样的话scroll View 就会盖住 固定的View，这时候会存在一个层级的问题,导致固定的那块无法点击，而通常 那块都会需要很多交互，不能点击的话不太合适，那我们应该怎么实现这种效果呢，这也是我困扰很久很久的视觉差效果，始终无法得解，索性在最近公司的一个项目中，找到了答案,下面先分析思路
1.本人已经试过，采用 以下方式是不可行的，可支持背景图，不需要交互的可用
<> <View />//固定layout 不可点击 <ScrollView> //滚动layout <View></View> </ScrollView> </>2.试了很多scrollView覆盖view的方式，调试过很多次层级，下面的view始终无法触发点击，这可能是桥接导致的瓶颈
那我肯定就会想 覆盖既然怎么都触发不了，那如果我把固定的也放在scrollView里，是否还会又问题呢 如下图 如果这样排版的话，我们考虑把内容区域也就是flatList绘制与固定View的下方后，效果如下 我们现在已经给flatList部分用marginTop空闲出绘制固定view的位置，这时候如果滚动的话固定的部分现在也是随着scrollView在滚动，那我们是不是只需要滚动的时候固定view的位置就可以了呢,我们都知道，rn里是没有固定定位的，只有absolute，现在在scrollview里放置，所以我们可以肯定的说它是随scrollview容器的最顶端滚动的，那我们只需要计算出scrollview滚动的距离，让固定view距离scrollcview的最顶端始终保持滚动的距离，这样的话，是不是就动态固定了这个view，且能够实现可交互效果。如下图
这里不可以使用setNativeProps 或者 setState的方式，切记一定使用动画处理，rn和原生不一样，rn想要丝滑的效果必须尽量可能的去使用动画处理布局移动，不然会出现抖动的问题，可以选择react-native-reanimated去处理，这个动画库超级好用，且比rn官方的性能提升很多。
最终实现效果图 最后贴一下主要实现代码 实现这种效果其实一点都不难，难的是，乍一眼看到后觉得很简单，但是觉得很简单的那个思路却是错误的，一只还不放下那个思路，不停的错下去，最后很心累，其实换个思维，这个效果rn实现起来还是很简单的
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
