關於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…