页签嵌套在 scrollview 中

[shiqkuangsan]

最近团队在开发中遇到这样一个需求，页面需要滚动，上面部分是动态加载的，下面是一个页签就是 tabview，上滑tab吸顶，本来以为是一个很正常的布局需求，结果做了才发现，各种不兼容啊，从 scroll-tab-view 到 tab-view 到 collapse-toolbar，到 antd、nativebase，到自定义 tab，包括外层使用 flatlist 不使用 scrollview，到子页签用自定义 scrollview 实现分页而不是 viewpager，到手势识别器滑动上面部分底下 tabview 跟随滚动，等等等等，没有一个完美的解决方案，各大博客论坛，均未找到。。。而开发友的实现，也并不完美，上面高度过高明显会有抖动现象，原生动画驱动不支持 top 属性太伤了。团队成员一直尝试未果，想和开发友聊聊，是否还有别的思路或者最近是否有新的进展。在下的联系方式为 QQ：761105568，望开发友看到消息能不吝指教

[shuiRong]

@shiqkuangsan 久不用QQ，就在这里聊吧，看到后就回。这里的信息也会被搜索引擎爬到，方便其他人。

关于抖动问题，我后来倒是还有一个想法，但没测试过是否可行：就是不用 style 的 top，毕竟它在浏览器里会引起回流重绘，有性能问题，在RN这边应该也是同理。换成用 transform 的 translate（可能还需要加上一个绝对定位）。

你试试看，再告诉下我测试结果（我这边本地没RN环境了）

需要修改的地方之一：

Gakki/src/pages/Home.js

Line 147 in aac3137

<Animated.View style={{ top: this.top }}>

[shiqkuangsan]

@shuiRong 倒不是首页, 研究的是Profile页面, 首页这种情况, 手指按在头部是不能带动整个页面滑动的, 需要外层是ScrollView包裹TabView. Profile页面的效果, 开发友是否有思路改善?

[shuiRong]

@shiqkuangsan Profile 页面同理，我想说的意思就是：动画效果中如果有用 top ，就尝试换成看看效果 translate ，如果效果不好，就也没招了......

很难搞，当初也是折腾了好久，效果都不好。记得最后找到个文章说尝试用原生技术配合来解决，具体的忘了。我不会原生，所以就没尝试。