react-native滑动吸顶效果的实现过程-创新互联

前言

最近公司开发方向偏向移动端，于是就被调去做RN（react-native），体验还不错，当前有个需求是首页中间吸顶的效果，虽然已经很久没写样式了，不过这种常见样式应该是so-easy，没成想翻车了，网上搜索换了几个方案都不行，最后去github上复制封装好的库来实现，现在把翻车过程记录下来。

需求效果

翻车过程

第一种方案 失败

一开始的思路是这样的，大众思路，我们需要监听页面的滚动状态，当页面滚动到要吸顶元素所处的位置的时候，我们设置它为固定定位，不过很遗憾，RN对于position属性只提供了两种布局方式：absolute和relative，既没有fixed也没有仍处于试验的api：sticky。尴尬了😅

第二种方案 失败

不过也不慌，看网上有第二种方案，把图上第二 三块地方作为ScrollView，然后ScrollView滑动监听距离，把第一块的marginTop设为负值，但是这样第一部分不能滑动，不符合需求，pass

第三种方案 完全失败

从网上找到第三种方案，就是一二三部分作为ScrollView，

第一部分position设为absolute，剩下的不设置，默认是relative

第二部分（吸顶部分）marginTop设置（setState）为第一部分高度的state，

添加滑动onScroll事件=》滑动距离y等于第二部分marginTop的state，但是当滑动超过第一部分高度的时候把第二部分（吸顶部分）position设为absolute，并把其marginTop设为0，看起来不错，实际用ios模拟器一跑就无语了😅，效果很奇葩，手指滑动时不吸顶直接划上去隐藏掉大半，一松突然吸顶了。。。

见下图

ios的系统，手指在屏幕上滚动时，onScroll一直在触发，如果里面有setState方法，也会不停执行并计算state，但是改变react的state是异步的，只要手指不离开屏幕，改变的state就无法生效（触发界面渲染）

实现方案

我最终意识到由于ios的机制，react的state机制不能满足需求，RN里面肯定有借助原生渲染的方式，于是github找了现成的代码实现之后，反过来进行研究，大家有RN丰富经验的也可以直接看最下面代码👇

RN的Animator

RN的Animator动画库旨在解决动画问题，由于js桥接过程，动画通常不能很好展现，最好是把动画的 数据 和 变化方法 一次性发给原生，由原生进行处理，这就是Animator库的核心作用。

记得原来RN的动画一直被吐槽，不过现在效果还挺不错的，可能与近年来手机硬件提升也越来越大也有关系吧。

简单用法

由于Animator内部封装了这四个组件，所以默认可以导出,,,

在这几个组件里面想做一些动画处理，数据方面也是react的state，但是赋值要给Animated.Value，如下👇

this.state = {
  scrollY: new Animated.Value(0)
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。