【react native】 tab导航栏吸顶 能保持每个tab的滑动状态高度 上下滑动页面不用断触

如图(此图是方案5实现的)：

1565166418944.gif

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

tab不要用这个插件，这个兼容性不好，可以用路由的那个tab，性能各方面都比这个好

踩坑记：

• 方案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：gif图就是此方案此方案解决了我前面方案2遇到的抖动问题，链接shuiRong说的方法，差不多已经没问题，都可以解决，只不过上下滑动上部分会有0.几秒的延迟。

• 方案6：rn要实现这种功能其实是有难度的，可以看看这篇文章，源码地址react-native-head-tab-view
  封装的很好；

2 5 6方法大致都是scrollview的滚动监听绑定动画+定位来实现的

我开始想到的方案2有抖动，然后方案五可以解决抖动，方案6也是这种实现的方法，6是封装好了的，直接可用

推荐使用 方案6 封装得很好