react-native scroll-head-tab-view
效果：常見的嵌套標(biāo)簽頁睡蟋，頭部公共視圖跟隨著每個(gè)Tab的滑動(dòng)踏幻，TabBar到達(dá)一定位置吸附在頂部。
時(shí)隔一年多再次接觸到這個(gè)知識(shí)點(diǎn)??戳杀，之前的實(shí)現(xiàn)方案不太完美该面，效果不盡如人意，雖然后面不了了之信卡，但是欠的債總是要還的隔缀，于是重新面對(duì)這個(gè)技術(shù)點(diǎn)。
RN和開發(fā)者都在成長傍菇，因此這次的實(shí)現(xiàn)思路較上次改良很多猾瘸，目前沒發(fā)現(xiàn)明顯的槽點(diǎn)。
效果如下：
react-native開發(fā)者幾乎都接觸過react-native-scrollable-tab-view丢习，用來實(shí)現(xiàn)tab切換牵触，既然叫做ScrollHeadTabView，肯定是跟它脫不了干系咐低。因?yàn)槲覀冎恍柙谄渖显黾宇^部視圖滾動(dòng)揽思、TabBar吸附的效果，我個(gè)人覺得沒必要再費(fèi)力氣去做別人已經(jīng)做得很好的事情了渊鞋，因此就基于scrollable-tab-view來完成我們的ScrollHeadTabView绰更。
首先我們需要熟悉scrollable-tab-view的核心代碼瞧挤，主要是state锡宋、tab渲染這部分儡湾。我們需要添加ScrollHeader，管理每個(gè)Tab的offsetY执俩，以及實(shí)現(xiàn)TabBar吸附徐钠。
添加header：
header的高度由外部計(jì)算headerHeight，內(nèi)部再用一層View包裝役首，然后使用containerOffsetY來控制頭部上下平移尝丐。
處理containerOffsetY
修改了原來的_composeScenes（處理每個(gè)tab視圖的方法），我們給每個(gè)tab傳遞了額外的參數(shù)衡奥，最核心的是傳遞containerOffsetY和計(jì)算Tab的高度sceneHeight爹袁。
每個(gè)Tab是這樣使用這些參數(shù)的矮固，sceneHeight給那些內(nèi)容不足容器高度計(jì)算底部padding，當(dāng)前Tab滑動(dòng)時(shí)改變containerOffsetY的值档址，這里需要主要注意的就是每個(gè)Tab的onScroll事件監(jiān)聽方法是需要?jiǎng)討B(tài)改變的。
因?yàn)樯厦孢@些UI處理邏輯對(duì)于每個(gè)Tab來說都是相同的然爆，因此我們可以添加一個(gè)HOC，處理RN中的scrollable視圖尼摹。每個(gè)Tab最外層必須是經(jīng)過HOC處理過的Flatlist或ScrollView。
example
