摘要:在中是主流布局方式。它有三種狀態正數零與負數。來看下運行效果。這是為正數的情況,如果,控件的大小就會根據設置的與來固定顯示。如果發現生效的方式請務必告知。在中有主軸與副軸之分,主軸控制的排列方向,默認為。默認值為,繼承父容器的屬性。
今天我們來聊聊Flexbox,它是前端的一個布局方式。在React Native中是主流布局方式。如果你剛剛入門React Native,或者沒有多少前端的技術經驗,亦或者對其半知半解,那么這篇文章將很好的幫助你參透Flexbox的整個全貌。
purpose通過這篇文章你將快速吃透整個Flexbox,因為對于Flexbox你只需掌握以下幾點屬性即可。
flex
flexDirection
justifyContent
alignItems
flexWrap
alignSelf
flexFlexbox使用的是彈性布局,它有個屬性flex用來控制它的彈性。有點類似與Android布局中的weight屬性。當然與前端的css中的flex也有所不同,它支持的類型是number不是string。它有三種狀態:正數、零與負數。直接看代碼:
import React, {Component} from "react"; import {StyleSheet, Text, View} from "react-native"; export default class App extends Component{ render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF", }, red: { flex: 1, width: 100, backgroundColor: "red" }, blue: { flex: 2, width: 100, backgroundColor: "blue" }, orange: { width: 100, height: 100, backgroundColor: "orange" } });
父容器使用flex:1來撐滿整個屏幕,orange是固定的一個view,而red與blue使用flex,通過flex的值進行等比(1:2)分攤剩余的空間。來看下運行效果。
這是為正數的情況,如果flex:0,控件的大小就會根據設置的width與height來固定顯示。
如果flex:-1,如果空間足夠,控件的大小也會根據width與height來展示;如果空間不足,會根據minWidth與minHeight來展示。
一般都不會使用flex:-1,而且經過測試,空間不足時minWidth與minHeight并不會生效。如果發現生效的方式請務必告知。flexDirection
在Flexbox中有主軸與副軸之分,主軸控制child的排列方向,默認為column。可以通過flexDirection屬性改變主軸方向。它有四個可選值分別為
row: child水平方向排列
column: child豎直方向排列(默認)
row-reverse: child水平方向反向排列
column-reverse: child豎直方向反向排列
在上面的demo基礎上改變style樣式:
const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "row", justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF", }, red: { height: 100, width: 100, backgroundColor: "red" }, blue: { width: 100, height: 100, backgroundColor: "blue" }, orange: { width: 100, height: 100, backgroundColor: "orange" } });
分別改變container中flexDirection的值:row、row-reverse、column、column-reverse
justifyContent固定好主軸之后,可以通過justifyContent來指定主軸方向child的排列方式,它有六個可選值
flex-start: child對齊主軸的起點(默認)
flex-end: child對齊主軸的終點
center: child居中對齊主軸
space-between: child在主軸方向相鄰child等間距對齊,首尾child與父容器對齊
space-around: child在主軸方向相鄰child等間距對齊,首尾child與父容器的間距相等且為相鄰child間距的一半
space-evenly: child在主軸方向均勻分布。相鄰間距與首尾間距相等
container: { flex: 1, flexDirection: "row", justifyContent: "flex-start", backgroundColor: "#F5FCFF", }
依次改變container中的justifyContent:flex-start、flex-end、center、space-between、space-around與space-evenly
主軸固定之后,剩下的就是副軸,alignItems可以用來控制副軸上的child排列方式。它有五個可選項分別為
flex-start: child對齊副軸起點(默認)
flex-end: child對齊副軸終點
center: child居中對齊副軸
stretch: child為彈性布局時(未設置副軸方向的大小或者為auto),拉伸對齊副軸
baseline: 有文本存在時,child在副軸方向基于第一個文本基線對齊
改變container的style,主軸設置為row,依次改變alignItems:flex-start、flex-end、center
container: { flex: 1, flexDirection: "row", alignItems: "flex-start", backgroundColor: "#F5FCFF", }
最后將alignItems設置為stretch,并且改變red的height,red會被拉伸
container: { flex: 1, flexDirection: "row", alignItems: "stretch", backgroundColor: "#F5FCFF", }, red: { width: 100, height: "auto", backgroundColor: "red" }
alignItems: baseline,并不是文本的正中心,而是文本View的容器底部。在上面基礎上添加一個Text,讓文本自身居中展示。
container: { flex: 1, flexDirection: "row", alignItems: "baseline", backgroundColor: "#F5FCFF", }, text: { width: 80, height: 80, fontSize: 20, color: "white", marginTop: 110, backgroundColor: "black", textAlign: "center", textAlignVertical: "center" }flexWrap
如果再增加一個View,由于空間不足它會展示不全。這時可以使用flexWrap屬性,它可以支持自動換行展示。
nowrap: 不換行(默認)
wrap: 自動換行
在container中添加flexWrap屬性,并且再添加一個green view
container: { flex: 1, flexDirection: "row", flexWrap: "wrap", justifyContent: "flex-start", backgroundColor: "#F5FCFF", }, green: { width: 100, height: 100, backgroundColor: "green" }alignSelf
alignSelf屬性類似于alignItems,它也是控制副軸上的排列規則,不同的是它使用的對象是child自己。它可以改變父容器alignItems的屬性控制的child排列規則,在副軸上實現自己的排列規則。默認值為auto,繼承父容器的alignItems屬性。因此它也有五個可選值:flex-start、flex-end、center、stretch與baseline。例如我們為range添加alignSelf,其它的child不變,都繼承父容器的alignItems: flex-start
orange: { width: 100, height: 100, backgroundColor: "orange", alignSelf: "flex-end" }
其它的可選值就不一一說明,可以參考alignItemsother
最后還有三個比較冷門屬性,這里就不詳細一一代碼與貼圖,簡單的說下它們的作用,相同點是它們都是在child中使用,與alignSelf的作用域一樣。
flexBasis: 設置主軸方向上的初始值,默認為auto。如果與width或者height同時存在,則會覆蓋它們的值
flexGrow: 設置chid的放大比例,類似于flex,空間充足時自動按比例放大,默認為0
flexShrink: 設置chid的縮小比例。空間不足時自動按比例縮小,默認為0
有關Flexbox,縱觀全文只需掌握開頭所列的六種屬性,React Native中的絕大多數布局也就不成問題。現在對于Flexbox是否清晰了許多呢?趕緊親自去試試吧~
精選文章ViewDragHelper之手勢操作神器
Android Architecture Components Part1:Room
自定義Android注解Part1:注解變量
tensorflow-梯度下降,有這一篇就足夠了
感覺不錯的可以來一波關注,掃描下方二維碼,關注公眾號,及時獲取最新知識技巧。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113776.html
摘要:在中是主流布局方式。它有三種狀態正數零與負數。來看下運行效果。這是為正數的情況,如果,控件的大小就會根據設置的與來固定顯示。如果發現生效的方式請務必告知。在中有主軸與副軸之分,主軸控制的排列方向,默認為。默認值為,繼承父容器的屬性。 今天我們來聊聊Flexbox,它是前端的一個布局方式。在React Native中是主流布局方式。如果你剛剛入門React Native,或者沒有多少前端...
摘要:通過來對數據進行轉化處理或最終暴露給調用者對異常的處理。封裝在實際開發中,的都是相同的,不同的是請求的方法名與參數。上述提到的與的請求時機。下面來看下完整的封裝。 每一門語言都離不開網絡請求,有自己的一套Networking Api。React Native使用的是Fetch。 今天我們來談談與Fetch相關的一些事情。 purpose 通過這篇文章,你將了解到以下幾點關于Fet...
摘要:下面是本周精選內容,請享用。不要看錯了,這個是,和測試框架僅一字之差。本文作者王仕軍,商業轉載請聯系作者獲得授權,非商業轉載請注明出處。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領域跟上時代的腳步。 showImg(https://segmentfault.com/img/remote/1460000009646412); 破解前端面試系列文章本周出到第 ...
摘要:表示在上的對齊方式,基于的頂部基于的底部基于的中部布滿整個。的屬性所占的比例大小。它允許項目中當個和其他不一樣的對齊方式,會覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫的應用的樣式不是靠css來實現的,而是依賴javascript來為你的應用來添加樣式,先不討論這樣做的好處與壞處,因為這個實現方法本身就存在著很多爭議,我們主要關注他的樣式的語法和...
閱讀 3289·2023-04-26 02:40
閱讀 4638·2021-09-22 15:22
閱讀 1573·2021-09-22 10:02
閱讀 3474·2021-08-11 10:23
閱讀 1388·2019-08-30 15:55
閱讀 2487·2019-08-30 12:48
閱讀 584·2019-08-30 11:04
閱讀 697·2019-08-29 16:29