【React Native】文件翻譯閱讀紀錄 - 基礎 - Flexbox 佈局
 |
| Facebook Open Source React Native |
Flexbox 佈局
組件可以使用flexbox算法指定其子項的佈局。 Flexbox旨在為不同的屏幕尺寸提供一致的佈局。
您通常會使用flexDirection，alignItems 和 justifyContent的組合來實現正確的佈局。
您通常會使用flexDirection，alignItems 和 justifyContent的組合來實現正確的佈局。
Flexbox在React Native中的工作方式與在Web上的CSS中的工作方式相同，但有一些例外。默認值不同，flexDirection默認為列而不是行，flexparameter僅支持單個數字。
彈性方向
將flexDirection添加到組件的樣式可確定其佈局的主軸。子元素應該橫向（行）還是縱向（列）組織？默認為列。
證明內容
將justifyContent添加到組件的樣式可確定沿主軸的子項分佈。兒童應該在開始時，中心，結尾還是均勻分佈？可用選項包括flex-start，center，flex-end，space-around，space-between和space-uniformity。
對齊項目
將alignItems添加到組件的樣式確定子項沿輔助軸的對齊方式（如果主軸是行，則輔助是列，反之亦然）。孩子應該在開始，中心，結束時對齊還是拉伸以填充？可用選項包括flex-start，center，flex-end和stretch。
要使拉伸產生效果，兒童不得沿輔助軸具有固定尺寸。在下面的示例中，設置alignItems：stretch會在從子項中刪除width：50之前不執行任何操作。
更深入
我們已經介紹了基礎知識，但是佈局可能還需要許多其他樣式。此處記錄了控制佈局的道具的完整列表。
我們已經接近能夠構建一個真正的應用程序。我們仍然缺少的一種方法是獲取用戶輸入，所以讓我們繼續學習如何使用TextInput組件處理文本輸入。
我們已經接近能夠構建一個真正的應用程序。我們仍然缺少的一種方法是獲取用戶輸入，所以讓我們繼續學習如何使用TextInput組件處理文本輸入。
0 意見