React-Native Scrollview嵌套标签页

新篇传送:React-Native实现头部滑动,TabBar吸附的TabView

一个很常见的UI,不过在RN上好像没有成熟的解决方案,只好自己动手实现。

尝试了很多方案,动画、手势...都有瑕疵,在这里只介绍我认为可用性最高的解决方案。

思路是这样的:scrollview嵌套scrolltabview,通过控制scrollEnabled,来切换滚动权限,实现视差效果。

第一步:基本结构、变量

第二步:监听scroll事件,记录scrolltabview的contentOffsetY以及控制scroll权限

第三部(关键):切换tab页,调整scrollview的contentOffset

防止切换tab,scroll事件不触发,控制当前scrollRef移动内容。

大功告成,其实就这么几部,一开始就想到了这个实现方案,只是遗漏了第二步关键点,所以多走了很多弯路。

流畅性马马虎虎,不过勉强能用。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,190评论 4 61
  • Maven+Nexus 私服的搭建 Maven中release和snapshot,release是上传新的版本,...
    不偏不倚就是你阅读 1,274评论 0 0
  • 今天读了第十六章资本主义教条,前面一章讲到,科学的助推力是资本,从无知变成流行,慢慢有了资本主义,从先前...
    亮cp3阅读 3,947评论 0 0
  • 云南的风景到处如画,话不多说直接上图。 第一站:石林 第二站:弥勒镇 名族风情浓厚的可邑小镇! 温泉之乡的弥勒镇 ...
    思念的诗阅读 1,287评论 0 0