React Native從零開始（二）Flexbox佈局，和佈局屬性

一、什麼是FlexBox

我們在React Native中使用flexbox規則來指定某個組件的子元素的佈局。Flexbox可以在不同屏幕尺寸上提供一致的佈局結構。

Flexbox是由伸縮容器和伸縮項目組成。任何一個元素都可以指定Flexbox佈局，伸縮容器的子元素可以成爲伸縮項目，伸縮項目使用伸縮佈局模型來排版。

在默認的情況下，伸縮容器由兩根軸組成：主軸（main axis）、交叉軸(cross axis)。
主軸的開始位置是main start，結束位置main end。
交叉軸的開始位置是cross start，結束位置是cross end。
伸縮項目在主軸上佔據的空間叫main size。交叉佔據的空間叫cross size。

二、我們開始創建這個工程吧

1、利用命令行創建一個工程

時間可能會比較長，請耐心等待

這樣就完成了工程的創建

2、打開可以用AndroidStudio運行也可以用命令行運行

因爲現在大多數的手機都是5.0以上所以在命令行中或者AndroidStudio命令行中執行
react-native start service
作爲一個Android程序猿還是喜歡用Studio，我感覺Studio運行起來會比命令行快，難道是錯覺？

用Android Studio打開項目中Android文件
我們直接運行

正常情況下是這個樣子的，但是如果你的服務沒有開啓的話，那麼會報如下錯誤。

也就是我們在AndroidStudio命令行中開啓服務就好，並重新reload就行

react-native start

三、Flexbox屬性和佈局屬性

打開這個文件，ios的話應該是下面那個。

So開始吧

首先我們更改裏頭的控件和控件的屬性

const styles = StyleSheet.create({
  container: {
		flexDirection:'row'
  },
  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:50,
		height:50,
		margin:20
  	},
  	text2:{
		fontSize:30,
		backgroundColor:'green',
		textAlignVertical:'center',
		textAlign:'center',
		width:50,
		height:50,
		margin:20
  	},
  	text3:{
		fontSize:30,
		backgroundColor:'yellow',
		textAlignVertical:'center',
		textAlign:'center',
		width:50,
		height:50,
		margin:20
  	},
});



export default class FlexboxDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text1}>
          1
        </Text>
        <Text style={styles.text2}>
          2
        </Text>
        <Text style={styles.text3}>
          3
        </Text>
      </View>
    );
  }
}

效果：

那麼先來看看三個主要的屬性

1、Flex Direction

在組件的style中指定flexDirection可以決定佈局的主軸。子元素是應該沿着水平軸(row)方向排列，還是沿着豎直軸(column)方向排列呢？默認值是豎直軸(column)方向。
flexDirection enum('row', 'row-reverse', 'column', 'column-reverse') 有四種屬性，其中column爲默認屬性

代碼

container: {
		
  },

row爲水平方向

代碼

container: {
  	flexDirection:'row'
		
  },

row-reverse水平反方向

代碼

container: {
  	flexDirection:'row-reverse'
		
  },

column默認的垂直方向

代碼

  container: {
  	flexDirection:'column'
		
  },

column-reverse垂直反方向

代碼

  container: {
  	flexDirection:'column-reverse'
		
  },

2、Justify Content

在組件的style中指定justifyContent可以決定其子元素沿着主軸的排列方式。子元素是應該靠近主軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end、space-around以及space-between。
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')其中flex-start爲默認的。

代碼

 container: {
  	flexDirection:'row',
  	justifyContent:'flex-end'
		
  },

  container: {
  	flexDirection:'row',
  	justifyContent:'center'
		
  },

爲了看的更加清晰我將margin屬性去掉，可以看出space-between是內部控件距離均勻分佈
  container: {
  	flexDirection:'row',
  	justifyContent:'space-between'
		
  },

控件均勻分佈並且和邊距也是均勻分佈
  container: {
  	flexDirection:'row',
  	justifyContent:'space-around'
		
  },

3、Align Items
在組件的style中指定alignItems可以決定其子元素沿着次軸（與主軸垂直的軸，比如若主軸方向爲row，則次軸方向爲column）的排列方式。子元素是應該靠近次軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end以及stretch。
注意：要使stretch選項生效的話，子元素在次軸方向上不能有固定的尺寸。以下面的代碼爲例：只有將子元素樣式中的width: 50去掉之後，alignItems: 'stretch'才能生效。
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems決定了子元素在次軸方向的排列方式（此樣式設置在父元素上）。例如若子元素本來是沿着豎直方向排列的（即主軸豎直，次軸水平），則alignItems決定了它們在水平方向的排列方式。此樣式和CSS中的align-items表現一致，默認值爲stretch。訪問https://developer.mozilla.org/en-US/docs/Web/CSS/align-items來進一步瞭解。

container: {
  	flexDirection:'column',
  	alignItems:'flex-start',
		
  },

container: {
  	flexDirection:'column',
  	alignItems:'flex-end',
		
  },

  container: {
  	flexDirection:'column',
  	alignItems:'center',
		
  },

去掉了寬高屬性
 container: {
  	flexDirection:'column',
  	alignItems:'stretch',
		
  },
  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',


  	},

如果主軸是row方向的話需要設置他的高度否則看不到效果

  container: {
  	flexDirection:'row',
  	alignItems:'center',
  	height:500
		
  },

4、alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf決定了元素在父元素的次軸方向的排列方式（此樣式設置在子元素上），其值會覆蓋父元素的alignItems的值。其表現和CSS上的align-self一致（默認值爲auto）。

父佈局的是
container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:1
		
  },
  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:70,
		height:70,
		margin:10,
		alignSelf:'flex-start'
		

  	},

他會覆蓋父佈局的效果

5、borderBottomWidth number
設置下邊框的高度
6、borderLeftWidth number
設置左邊框高度
7、borderRightWidth number
設置右邊框高度
8、borderTopWidth number
設置上邊框高度

9、borderWidth

  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:70,
		height:70,
		margin:10,
		borderWidth:15

  	},

10、bottom number
bottom值是指將本組件定位到距離底部多少個邏輯像素（底部的定義取決於position屬性）。
它的表現和CSS上的bottom類似，但注意在React Native上只能使用邏輯像素值（數字單位），而不能使用百分比、em或是任何其他單位。

這裏我們發現他是在居中的基礎上距離底部的位置

text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:70,
		height:70,
		margin:10,
		bottom:50

  	},

11、position
如果您想使用特定的邏輯像素相對於它的父節點來定位子節點，請設置子節點具有絕對位置.。
如果你想將一個孩子定位爲某個不是其父的東西，那就不要使用樣式。使用組件樹。

如果將子空間設置成了absolute的話那麼，就不在flex佈局的屬性中了

  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:70,
		height:70,
		margin:10,
		bottom:50,
		position:'absolute'
  	},

12、flex number
In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the yoga library at https://github.com/facebook/yoga.

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

（譯文，可能會有問題所以請指教）
在ReactNaitve Flex的功能和Css不同。Flex是一個數字而不是字符串，
當Flex是一個正數，它使組件可伸縮，它的大小將按照比例伸縮。因此，Flex設置爲2的組件將需要兩倍的空間作爲一個組件與Flex設置爲1。
當Flex爲0，該組件是根據寬度和高度大小，確定他的伸縮。
當Flex是- 1，該組件通常大小根據寬度和高度。然而，如果沒有足夠的空間，該組件將收縮其minwidth和minheight。
flexgrow，flexshrink，和flexbasis功能和CSS相同。

 container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:-1,
		
  },

  container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:0,
		
  },

  container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:1,
		
  },

13、flexBasis num
設置第一個彈性盒元素的初始長度爲 30 像素：

  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',
		width:70,
		height:70,
		margin:10,
		flexBasis:30
  	},

14、flexGrow num
定義子項寬度之和不足父元素寬度時，子項拉伸的比例第二個的拉伸比例是其他的5倍

這裏沒有設置寬度
  text1:{
		fontSize:30,
		backgroundColor:'red',
		textAlignVertical:'center',
		textAlign:'center',

		height:70,
		margin:10,
		flexGrow:1
  	},
  	text2:{
		fontSize:30,
		backgroundColor:'green',
		textAlignVertical:'center',
		textAlign:'center',

		height:70,
		margin:10,
		flexGrow:5
  	},
  	text3:{
		fontSize:30,
		backgroundColor:'yellow',
		textAlignVertical:'center',
		textAlign:'center',

		height:70,
		margin:10,
		flexGrow:1
  	},
});

15、flexShrink num
讓第二個元素收縮到其他元素的三分之一：跟上一個類似

16、flexWrap enum('wrap', 'nowrap')
如果控件多的情況下會顯示不開那麼就需要這個屬性了

顯示不開
  container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:1,
  	
		
  },

  container: {
  	flexDirection:'row',
  	alignItems:'center',
  	backgroundColor:'blue',
  	flex:1,
  	flexWrap:'wrap'
		
  },

17、height number、width number
高度
18、left number 、right number、top number
left值是指將本組件定位到距離左邊多少個邏輯像素（左邊的定義取決於position屬性）。
它的表現和CSS上的left類似，但注意在React Native上只能使用邏輯像素值（數字單位），而不能使用百分比、em或是任何其他單位

19、margin number
marginBottom number #
marginHorizontal number 相當於設置了Left和Right
marginVertical number 相當於設置了Top和Bottom
外邊距

20、maxHeight number 、maxWidth number、minHeight number、minWidth number
21、padding number、paddingBottom number、paddingHorizontal number、paddingLeft number、paddingRight number 、paddingTop number 、paddingVertical number
類似與Margin

22、overflow enum('visible', 'hidden', 'scroll') #
overflow 屬性規定當內容溢出元素框時發生的事情。
23、zIndex number
屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

SuperBigLw

發佈了33 篇原創文章 · 獲贊 14 · 訪問量 26萬+

私信關注

React Native從零開始（二）Flexbox佈局，和佈局屬性

React Native從零開始（二）Flexbox佈局，和佈局屬性

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

HTTP URL 詳解

創新工具：2024年開發者必備的一款表格控件（二）

車牌識別控制檯可快速整合二次開發

Android RecyclerView 詳解（三） RecyclerView的動畫實現（移除、添加、改變、移動）和自定義動畫的實現

Android RecyclerView 詳解（五） RecyclerView多佈局的使用

Android RecyclerView 詳解（二）點擊事件綁定、瀑布流和Grid的實現

自用Android資源訪問

Android動畫詳解之Android 動畫屬性和實現方法之屬性動畫（三）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結