React Native布局詳解

flexbox 布局

flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。

容器屬性

簡述：常用：

1、flexdirection ： 用來決定容器內所有子元素item的排列方向，預設是豎直軸方向，即兩個view豎直排列

（想讓子元素橫向並列就用flexdirection:'row'）

2、justifycontent：定義了子元素item在主軸方向上的排列方式

3、alignitems子元素沿豎直軸的排列方式

不常用：

1、flexwrap預設容器中的子元素item都排列在一條軸線上，flexwrap屬性定義了如果在一條軸線上排列不下所有的item元素，可以進行換行排列

.box

wrap：換行，且第一行在上方

wrap-reverse：換行，第一行在下方

元素屬性：

1、flex 布局權重

1:0：flex=0的專案占用空間僅為內容所需空間，flex=1的專案會佔據其餘所有空間

在部分元件指定了height的情況下，flex是「除了height以外剩餘空間」的分布比例。例如：

2、alignself

專案交叉軸方向自身對齊方式

從專案經驗總結的常用方法：

1、設定border邊線的方法

borderrightwidth: 0,

borderleftwidth: 0,
bordertopwidth: 0,
borderbottomwidth: 1,
borderbottomcolor:'#f5f5f5',

圖示外層巢狀乙個view，view的style如下：

imgrightstyle:,

參考：

React Native布局實戰

前輩教導我們，掌握一門新技術的最快方法是練習。因此，我找了下比較有愛，暖氣的介面。當然不是給美團打廣告了，只是覺得頁面蠻清新的。下面就是要顯示的效果 第三篇文章基本上對react native的布局基本上有個大致的認識，現在開工吧。總體上，該頁面分三個部分 1 我們約會吧及其右邊3欄 2 1元吃大餐...

React Native 之布局篇

一.flex布局 什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性 position屬性 float屬性,這種布局方式對於特殊布局非常不方便,比如,垂直居中就不好實現.2009年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指...

ReactNative布局屬性

flexdirection enum row column row reverse column reverse flexdirection屬性定義了父檢視中的子元素沿橫軸或側軸方片的排列方式。justifycontent enum flex start flex end center space ...