如图(此图是方案5实现的
):
首先我的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是封装好了的,直接可用