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

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

对比一下能google获得的方案

首先分析一下github和各大内外网能google获得的blog里的方案，大部分跟我要的需求不一致，一部分用NativeComponent实现的，这就脱离了跨平台的初衷，一部分动画作的不好，Android端很是卡，目前为止看到最接近这种效果的是这位的博文 medium.com/@andi.gu.ca…

看源码能够知道是用的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偏移量作动画的方案

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

如上图所示，整个界面是一个FlatList，顶部须要作动画的地方经过设置contentContainerStyle的paddingTop来设置一个偏移量，这样咱们就只用处理一个列表的滑动事件，其他元素跟随这个滑动手势作动画，这样既保证了flatList的内存回收机制，也避免了手势冲突的问题。

接下来要解决的就是一个scrollableTableView下的多个FlatList偏移量保持同步的问题（不保持同步会形成头部与FlatList之间偏移量异常的问题），这个问题比较简单，经过用一个数组，保存每一个FlatList的Ref属性，而后在当前屏幕里的FlatList滑动手势结束时，同时设置其余FlatList的偏移量保持同步，但这样作的一个缺点是，没法记录每一个页面的偏移量（应该能够实现，只是demo中未实现），而后要解决的是每个FlatList初始化时，设置头部元素偏移量的问题，这个须要等到该FlatLis组件DidMount的时候设置，否则不会生效，大致实现思路就是这些，若有疑问欢迎指出讨论。

贴一下最终实现的源码：github.com/zjkhiyori/r…