react-native 布局篇之flexbox

Near_Li 發布于2019-08-20 18:11 / 1159人閱讀

摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個注意的點，我在剛剛開始中總結的容器屬性，，布局方式主軸對齊方式交叉軸對齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對象是主軸在中設置是水平方向上占滿整個容器。

FlexBox布局

直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡化了。
有幾個注意的點，我在剛剛開始flexbox中總結的：

容器(container)屬性

flexDirection ，justifyContent，alignItems

flexDirection flex布局方式

justifyContent 主軸對齊方式

alignItems 交叉軸對齊方式
這里需要特別注意的就是主軸和交叉軸。以下舉具體示例說明：

flexDirection:"column"（默認值），垂直居中對齊：justifyContent:"center",水平居中對齊：alignItems:"center"
flexDirection:"row"，垂直居中對齊：alignItems:"center"，水平居中對齊：justifyContent:"center"

項目(item)屬性

flex

為什么設置flex:1占滿整個容器
很多時候我們經常直接寫flex:1占滿整個容器，那為什么寫flex:1,不寫flex:2或者flex:3呢？首先我們要了解flex屬性是比例值，假設現在有兩個項目，分別設置屬性flex:1,flex:2,那么第一項就占據整個容器的1/3,第二項占據整個容器2/3。這下知道為什么flex:1占滿整個容器了吧，因為是1/1。所以如果容器只有一個項目那么flex:1,flex:2,flex:3都是占滿整個容器，因為分別的意思是：1/1,2/2,3/3。

特別注意flex:1的作用對象是主軸
在flexDirection:"row"中設置flex:1,是水平方向上占滿整個容器。在flexDirection:"column"中設置flex:1,是垂直方向上占滿整個容器。

GPU云服務器云服務器 flexbox react-native FlexBox詳解 flexbox容器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84166.html

react-native 布局篇之position

摘要：先簡單的看一下示例圖相對布局。這個是相對于父容器進行據對布局。絕對布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結構里面，這個和的也很大不一樣。 position布局 position:enum(absolute,relative)。先簡單的看一下示例圖 showImg(https://segmentfault.com/img/remote/1460000010270428); po...

Lemon_95 2019-08-20 18:11 評論0 收藏0
[RN] React Native style -- 樣式的使用

摘要：表示在上的對齊方式，基于的頂部基于的底部基于的中部布滿整個。的屬性所占的比例大小。它允許項目中當個和其他不一樣的對齊方式，會覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫的應用的樣式不是靠css來實現的，而是依賴javascript來為你的應用來添加樣式，先不討論這樣做的好處與壞處，因為這個實現方法本身就存在著很多爭議，我們主要關注他的樣式的語法和...

FrozenMap 2019-08-21 10:49 評論0 收藏0
react-native電影簡介app，了解一下？（android端）

摘要：寒假結束了，在寒假期間玩了一下，模仿豆瓣實現了一個查看當前熱門電影和即將上映電影的簡單，項目比較簡單，十分適合剛剛入門的同學查看。寒假結束了，在寒假期間玩了一下react-native，模仿豆瓣實現了一個查看當前熱門電影和即將上映電影的簡單app，項目比較簡單，十分適合剛剛入門的同學查看。首先我們要了解react-native： react-native中文網、react-nativ...

RayKr 2019-08-26 11:48 評論0 收藏0
react-native 開發筆記（一）

摘要：顏色問題這個不算問題了，算是優勢。一般做開發，如果不是圖標字體的話，我們會為圖片的選中和不選中準備兩張圖片做切換。這可能會導致開發者很困惑，怎么高度和我想的不一致呢那只要把剩余的高度都設置準確，這些都會迎刃而解。 react-native 開發筆記開始使用react-native開發產品，講講今天遇到的坑 TabBarIos的使用一般app的設計都是主頁是一個tab頁面，我們的ap...

waltr 2019-08-20 16:23 評論0 收藏0