如上圖的底部新增按鈕,要是放在web里那是相當簡單,直接是用固定定位就行,但是在RN里是沒有固定定位可言的。
方案一: 采用絕對定位,相對於最外層的定位在底部位置。(在部分安卓機上有問題,動態計算的高度,定位底部的高度有問題,導致底部按鈕定位脫離了視野)
正確方案:還是flex布局好用。
大致如上圖,頭部導航<HeaderView> 是固定的,剩下的就是
<SegmentedControl> 組件(紅色方框區域) 設置屬性 flex:1 使它撐滿剩余空間,這時候可以設置它為相對定位,然后底部那個按鈕絕對定位,這樣應該也行,但是咱們嘗試着拋開定位繼續用flex一層層的撐。
按鈕底部空白的位置,不是定位出來的,其實是適應iphoneX組件的空間,所以可以忽略。
接下來只要把內部划成三塊就行:tab導航 列表內容 底部按鈕 。而列表內容和底部導航是由一個VIew 包着 和tab 導航同一層級的。所以這個View 設置flex:1.
到了最后一層,就是設置列表內容 flex:1 , 底部按鈕固定高度。這樣根據flex布局的屬性,底部按鈕就被擠在 最下面這個位置了。
這個方法相對於直接用一層定位來,多了幾層flex:1,省去了計算高度的工作。個人更傾向於這種的,不存在安卓的兼容性,免去了樣式爆炸的煩惱。
總結:可能上面描述的您不是很明白,核心就是一點,一層層設置flex:1,把固定高度的擠在固定的地方就行。