关于React Native如何实现Android CoordinatorLayout效果

最近用RN重构一个较为复杂的原生页面，里面就用到了类似这种设计，如下图所示

example

对比一下能google得到的方案

首先分析一下github和各大内外网能google得到的blog里的方案，大部分跟我要的需求不一致，一部分用NativeComponent实现的，这就脱离了跨平台的初衷，一部分动画做的很差，Android端非常卡，目前为止看到最接近这种效果的是这位的博文
https://medium.com/@andi.gu.ca/a-collapsing-navbar-with-tabs-in-react-native-e80790588830

image.png

看源码可以知道是用的ScrollView嵌套TableView的方案，Demo里确实效果很完美，但是这个方案有两个致命的问题，

• 一个是滑动偏移量，这种方案里，所有子tab的FlatList偏移量都随着父ScrollView变化而变化，当你在tab1滑动到商品10，然后你去到到tab2，加载出来的tab2仍然是停留在商品10的坐标，如果tab1与tab2数据长度不一致，但是这种方案里ScrollView整体高度却是一致的，就会导致数据少的tab，滑到商品底部后还能继续滑动，这种体验是绝对不能接受的
• 一个是内存泄漏，在我的实际项目中FlatList的单个Item还是较为复杂的，会有图片，动画等等，因为FlatList被ScrollView包裹，它的内存回收机制会变得比较弱，在我的Android项目中滑动到70~80个item时，整个列表会突然变得异常卡顿，这个应该是RN的bug，不是单纯性能导致的，而且内存占用居高不下，测试几部Android旗舰机，中低端机，都有这个问题，但iOS没有这个突变卡顿的问题，内存问题一样存在

踩坑到这一步，时间已经过去了一周左右，本以为完美的方案，却还是有这么多致命的问题，但是基本得出结论，不能使用ScrollView嵌套FlatList的方案，然后切换回单层FlatList，顶部Header跟随FlatList偏移量做动画的方案

分解本项目现阶段实现的方案

未完待续...

先贴一下最终实现的源码：https://github.com/zjkhiyori/react-native-coordinatorlayout-example