RN如何固定底部的按鈕

2022-01-31 13:03:18 字數 720 閱讀 7685

如上圖的底部新增按鈕,要是放在web裡那是相當簡單,直接是用固定定位就行,但是在rn裡是沒有固定定位可言的。

方案一: 採用絕對定位,相對於最外層的定位在底部位置。(在部分安卓機上有問題,動態計算的高度,定位底部的高度有問題,導致底部按鈕定位脫離了視野)

正確方案:還是flex布局好用。

大致如上圖,頭部導航是固定的,剩下的就是

元件(紅色方框區域) 設定屬性 flex:1 使它撐滿剩餘空間,這時候可以設定它為相對定位,然後底部那個按鈕絕對定位,這樣應該也行,但是咱們嘗試著拋開定位繼續用flex一層層的撐。

按鈕底部空白的位置,不是定位出來的,其實是適應iphonex元件的空間,所以可以忽略。

接下來只要把內部劃成三塊就行:tab導航  列表內容  底部按鈕 。而列表內容和底部導航是由乙個view 包著 和tab 導航同一層級的。所以這個view 設定flex:1.

到了最後一層,就是設定列表內容 flex:1 , 底部按鈕固定高度。這樣根據flex布局的屬性,底部按鈕就被擠在 最下面這個位置了。

這個方法相對於直接用一層定位來,多了幾層flex:1,省去了計算高度的工作。個人更傾向於這種的,不存在安卓的相容性,免去了樣式**的煩惱。

總結:可能上面描述的您不是很明白,核心就是一點,一層層設定flex:1,把固定高度的擠在固定的地方就行。

按鈕懸浮固定在微信小程式底部

常見的有加入購物車按鈕 結算按鈕 收貨列表新增位址按鈕。以收貨位址為例,將新增位址按鈕懸浮於最底部,這樣再多的位址,也不會被遮擋而看不見。核心 如下 新增 新增位址按鈕 address add position fixed bottom 0 width 100 改用position fixed之後,...

如何將操作按鈕懸浮固定在微信小程式底部?

常見的有加入購物車按鈕 結算按鈕 收貨列表新增位址按鈕。以收貨位址為例,將新增位址按鈕懸浮於最底部,這樣再多的位址,也不會被遮擋而看不見。核心 如下 新增 新增位址按鈕 address add 改用position fixed之後,其中width需要設定為100 不然會是乙個很窄的按鈕。考慮到按鈕自...

4固定在底部 禮堂椅廠家教你如何固定座椅

禮堂椅廠家眾所周知,當人們離開時,禮堂或刷房中使用的座椅會自動翻轉到垂直位置,因此行和行之間有一條大通道讓人走路。在現有技術中,通過以下方法翻轉禮堂椅 在兩個支腿之間設定固定軸,並且在支座底部的兩側設定與固定軸對應的軸承座。座椅可繞軸線旋轉。在這個時候,我們非常關注軸承箱的安裝。固定在不同地面上的方...