如图：

1565166418944.gif

首先我的tab切换用的react-native-scrollable-tab-view

踩坑记：

方案1： 整个页面用ScrollView包裹，然后每个tab内容又用ScrollView来写，结果滑动冲突，为了解决这个冲突我用过state动态去改变ScrollView的scrollEnabled属性，来禁止是否可以滚动，结果滑动到吸顶处就要松手，再滑不然就停止了，不能直接转换滑动事件。

方案2：只有tab内容用ScrollView包裹，然后tab上部份的模块用绝对定位，ScrollView添加样式paddingTop:tab上部份的模块的高度,结合动画，绑定tab上部份的模块的top的值，最后以失败告终，页面抖动得厉害。

方案3：在gitHub上用这个rn-collapsing-tab-bar实现，效果基本能实现，但是左右滑动tab中，前后的tab是空白，白底，相当于重新加载了，而且不能保持每个tab的滑动高度，pass。失败

方案4：后来又找到了nativeBase这个ui库，实现后，还是一样，不能保持每个tab内容的高度，而且还有其他bug。pass。

方案5：接着我各种百度，google，找到了shuiRong说的方法，差不多已经没问题，都可以解决，只不过上下滑动上部分会有0.几秒的延迟。

接下来就是成功的方法了

通过react-native-collapsing-toolbar这个插件实现

image.png

根据gitHub上的例子，改下这里面的内容就可以了，这里面就是tab顶部的模块，记住把parallaxMultiplier改成0