reactNative仿飞猪布局视差_scrollview视差效果

飞猪效果图

首先贴图看是不是你要找的效果:

描述:

效果大概就是 layout滚动时会覆盖固定的一部分layout，且固定的layout可交互可操作可点击

首先，站在reactnative的角度来讲，懂rn的小伙伴第一时间肯定觉得这个排版很简单，没错，如果固定的那一部分不需要交互点击的话，确实超级简单，只需要吧固定的弄在scrollView外面，而scrollview铺满屏幕，这样的话scroll View 就会盖住 固定的View，这时候会存在一个层级的问题,导致固定的那块无法点击，而通常 那块都会需要很多交互，不能点击的话不太合适，那我们应该怎么实现这种效果呢，这也是我困扰很久很久的视觉差效果，始终无法得解，索性在最近公司的一个项目中，找到了答案,下面先分析思路

1.本人已经试过，采用 以下方式是不可行的，可支持背景图，不需要交互的可用

	<>
		<View />//固定layout 不可点击
		<ScrollView>
			//滚动layout
			<View></View>
		</ScrollView>
	</>
1
2
3
4
5
6
7

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实现起来还是很简单的