如图：
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
网友评论