ReactNative之參照具體示例來看RN中的FlexBox佈局

時間 2019-11-05

標籤 reactnative 參照具體示例來看 flexbox 佈局欄目 Flex 简体版

原文原文鏈接

今天是重陽節，祝你們節日快樂，今天繼續更新RN相關的博客。上篇博客《ReactNative之從HelloWorld中看環境搭建、組件封裝、Props及State》中咱們經過一個HelloWorld的一個示例介紹了RN的環境搭建、組件封裝、Props以及States。通過這麼多天，今天咱們繼續來看RN的東西，本篇博客是關於RN的Flex佈局的，也就是說是關於RN中控件放哪兒的一篇博客。在RN中使用的是Flex佈局，若是你以前接觸過Web前端的話對FlexBox佈局並不陌生，可是若是你以前沒作過Web開發的話，也不影響看今天的博客。本篇博客也是RN開發的基礎，算是比較重要的。css

RN中控件的佈局方式與Web前端開發中的div+css的盒式佈局是極爲類似的。本篇博客就來詳細的講解一下RN中的FlexBox佈局，中文名「彈性佈局」。RN中的FlexBox佈局和CSS中的FlexBox大致相同，也是經過一些屬性來控制控件的位置、大小以及各個控件之間的關係。在FlexBox中分爲容器屬性（flexDirection、flexWrap、alignItems、justifyContent、alignContent）和元素屬性（flex、alignSelf、margin、padding、border、width、height等等）。顧名思義，容器屬性是用來添加到父組件上來控制子組件的位置的屬性，而元素屬性則是添加到子組件自己控制自己的一種屬性。稍後會詳細介紹。html

接下來咱們將根據具代碼來詳細的介紹經常使用的幾種FlexBox佈局的屬性,。根據經常使用性，下方會依次介紹RN中的Flex佈局中的flex、flexDirection、justifyContent、alignContent、flexWrap、AlignItem、AlignSelf這些經常使用的屬性。本篇博客所涉及的Demo會上傳到博客最後方的github連接中。前端

先入爲主，下方這個gif中全部的內容就是咱們今天要結束的東西，全是關於Flex佈局的。react

1、Flexgit

首先咱們先來看一下flex的使用方式，flex屬性接收的是一個number類型的值, 該值表示彈性佈局的比例係數。具體的咱們還要看一下下方關於Flex的一個Demo。github

下方就是flex的具體使用方式，其中的flexValue是一個number類型的值。react-native

<View style={{ flex: flexValue />

接下來咱們來看一下flex具體的一個示例。咱們經過點擊來修改中間的flex的值來觀察flex對每一個view的影響：dom

三個黑塊中的初始的flex值爲1，因此三個黑色方塊會平分屏幕。
每點擊一次，中間的黑塊的flex數增長1，而後咱們就看到中間黑塊會增大，三個黑塊的比例變成了1 : 2 : 1。每次點擊都會有變化。

最後咱們來簡單的看一下該效果的實現，代碼以下。ide

首先咱們來看一下item的實現，Item即對應着每一個黑塊。這個item方法有個名爲 flexValue的參數，該參數用來接收設置的flex的值。因此在item中咱們將flexValue指定給了View的flex屬性。
而後咱們在看一下render中的實現。在 Render中，咱們添加了一個View來容納item(黑塊)，View中三個item就對應着上述的三個黑塊。中間的item的flex的值是從Status中獲取的，下方會介紹到。
最後咱們在看一個 ClickView這個方法，該方法會在點擊View時執行，執行該方法時，咱們爲 Status存儲的flexValue自增了1。也就是說沒點擊 1 次中間的item的flex就會增長1。因此咱們最終看到的效果是沒點擊一次，中間的黑塊會增大。

下方是上述示例的完整代碼：函數

 1 // flex
 2 import { Component } from "react";
 3 import { TouchableOpacity, View, Text } from "react-native";
 4 import React from "react";
 5 
 6 type FlexStateType = {
 7   flexValue: number
 8 }
 9 export default class FlexTestComponent extends Component<null, FlexStateType> {
10   flexValue = 1;
11   constructor(props) {
12     super(props);
13     this.state = {
14       flexValue: this.flexValue
15     };
16   }
17 
18   clickView = () => {
19     this.flexValue ++;
20     this.setState({flexValue: this.flexValue})
21   };
22 
23   item = (flexValue: number) => {
24     return (
25       <View style={{ flex: flexValue, height: 50, backgroundColor: 'black', marginLeft:10, marginRight: 10 , justifyContent: 'center', alignItems:'center'}}>
26         <Text style = {{color: '#fff'}}>flex = {flexValue}</Text>
27       </View>
28     );
29   };
30 
31   render () {
32     const {
33       flexValue
34     } = this.state;
35     return (
36       <TouchableOpacity onPress={this.clickView}>
37         <View style={{ height: 60, width: '100%', backgroundColor: '#e5e5e5', flexDirection: 'row' , alignItems: 'center'}}>
38           {this.item(1)}
39           {this.item(flexValue)}
40           {this.item(1)}
41         </View>
42       </TouchableOpacity>
43     );
44   }
45 }

View Code

2、FlexDirection

看完flex屬性，接下來咱們來看一下flexDirection屬性。該屬性在FlexBox佈局中也是一個尤其重要並且比較經常使用的一個屬性。flexDirection主要是用來控制子元素的佈局方向的，主要分爲橫向佈局和縱向佈局，默認是縱向佈局（column）。下方是flexDirection的屬性值和使用方式。

屬性值：

flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";

用法示例：

<View style={{ flexDirection: 'row' />

flexDirection的屬性值主要有如下幾個：

row : '行'，該值表示子元素 自左向右橫向排列, 。以下圖的row, 先放的子元素1，若是有子元素2的話，會放到子元素1的右邊，依次類推的橫向佈局。
row-reverse: '逆向的行'，這個與row相反，該屬性表示 自右向左橫向排列。具體參見下圖中的row-reverse。
column：'列'，該屬性值表示子元素 自上而下縱向排列，具體參見下方的column。
column-reverse: '逆向的列'，這個與column相反，該屬性則表示 自下而上的縱向排列，具體參見下方的column-reverse。

因該部分的demo對應的代碼比較簡單，介紹以下：

首先咱們封裝了一個名爲 FlexDirectionTestView的視圖，該視圖對應着上述展現 1 2 3的視圖。該視圖對外留了一個屬性，用來接收 flexDirection。外邊傳入什麼flexDirection的值，1 2 3這三個子視圖就按什麼排列。
在 FlexDirectionTestComponent組件中，咱們就調用了 FlexDirectionTestView這個視圖，傳入了不一樣的flexDirection屬性，從而這個 1 2 3 子元素就會按照咱們要求的樣式去展現。

完整代碼示例：

 1 // flexDirection
 2 import React, { Component } from 'react'
 3 import { FlexStyle, StyleSheet, Text, View } from 'react-native'
 4 
 5 export default  function FlexDirectionTestComponent () {
 6   return (
 7     <View style={{ height: 180, backgroundColor: '#c1c1c1' , flexDirection: 'row'}}>
 8       <View style={{ height: '100%', width: '50%', justifyContent: 'space-around'}}>
 9         <FlexDirectionTestView value={{ flexDirection: 'row' }}/>
10         <FlexDirectionTestView value={{ flexDirection: 'row-reverse' }}/>
11       </View>
12 
13       <View style={{ height: '100%', width: '50%', flexDirection: 'row' , justifyContent: 'space-around'}}>
14         <FlexDirectionTestView value={{ flexDirection: 'column' }}/>
15         <FlexDirectionTestView value={{ flexDirection: 'column-reverse' }}/>
16       </View>
17     </View>
18   )
19 }
20 
21 type FlexDirectionProps = {
22   value?: FlexStyle
23 }
24 
25 class FlexDirectionTestView extends Component<FlexDirectionProps> {
26   render () {
27     return (
28       <View style={[myStyle.flexDirectionProps, { flexDirection: this.props.value.flexDirection }]}>
29         <SubView value={'1'}/>
30         <SubView value={'2'}/>
31         <SubView value={'3'}/>
32       </View>
33     )
34   }
35 }
36 
37 type SubViewProps = {
38   value: string
39 }
40 class SubView extends Component<SubViewProps> {
41   render () {
42     return(
43       <View style={myStyle.subViewStyle}>
44         <Text style={{ color: 'white', fontSize: 17 }}> {this.props.value} </Text>
45       </View>
46     )
47   }
48 }
49 
50 const myStyle = StyleSheet.create({
51   subViewStyle: {
52     margin: 10,
53     borderRadius: 25,
54     width: 25,
55     height: 25,
56     backgroundColor: 'red',
57     justifyContent: 'center',
58     alignItems: 'center'
59   },
60   flexDirectionProps: {
61     backgroundColor: 'gray',
62     margin: 5
63   }
64 });

View Code

3、JustifyContent

今天這篇博客的乾貨仍是比較足的，接下來咱們來看一下第三個比較重要的屬性justifyContent。該屬性也是比較經常使用的，一般被用來控制子元素的左右方向的佈局，這個與上面的flexDirection不一樣，justifyContent會控制總體子元素左右方向上的一個約束關係。下方是justifyContent的屬性值和使用方式

屬性值：

justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"

用法示例：

<View style={{ justifyContent: 'flex-start' />

具體的還得看下方這個GIF圖，該圖中就列舉了justifyContent全部的屬性值，而且展現了每一個屬性值的不一樣表現形式，接下來詳細的介紹一下每一個屬性值的做用。

flex-start: 該屬性值的功能是讓全部 子元素靠左對齊，以下方點擊flex-start的佈局形式。
center: 則表示子元素在 左右方向上居中展現，以下方點擊Center按鈕對應的佈局形式。
flex-end: 這個與flex-start相反，flex-end則表示 子元素靠右對齊，對應着下方點擊flex-end按鈕的佈局形式。
space-between：從字面意思上不難看出，該屬性值對應的是左右 間距平分於子元素中間的佈局方式，設置該屬性值後，左右邊上是子元素是緊貼父View的左右邊距的，間距平分與子元素中間。
space-around: 該屬性也是比較好理解的，就是 左右間距環繞在子元素周圍，從下方點擊space-around的效果不難看出，設置該屬性後，每一個元素的左右邊距是一致的，環繞在子元素之間。
space-evenly: 該屬性值的意思是 子元素的左右間距均分，這個間距包括子元素與子元素的間距，還包括子元素與父元素的間距。

　　

介紹完上述屬性，咱們來簡單的看一下該示例的實現代碼，從上述操做來看本部分的Demo會相對複雜一些。首先來看一下上述按鈕區域對應的代碼片斷：

首先咱們定義了一個 OperaView來容納全部的點擊的View，在該View中調用了咱們自定義的customButton組件。
customButton組件接收一個參數，這個參數對應的就是justifyContent的屬性值。每次點擊該按鈕，就會把按鈕對應的屬性值寫入Status中。
方法ClickView即爲CustomButton點擊時對應執行的方法。

看完按鈕區域的代碼，接下來咱們就來看一下佈局區域的代碼：

首先來看一下Item，下方的 item函數返回的就是佈局區域的每一個方框，每一個方框的高度相同，寬度由參數決定。
而後在看一下 resultDisplayView, 該View函數對應的就是按鈕下方的佈局區域，該View的 JustifyContent屬性的值是直接從state中獲取的。
最後就來看一下render中了，在 render中分別調用了按鈕區和佈局區兩塊的內容。

完整代碼以下：

 1 // justifyContent
 2 import { Component } from "react";
 3 import { Text, TouchableOpacity, View } from "react-native";
 4 import React from "react";
 5 
 6 type JustifyContentType = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
 7 type JustifyContentCompontStateType = {
 8   justifyContentValue: JustifyContentType
 9 }
10 export default class JustifyContentTestComponent extends Component<null, JustifyContentCompontStateType> {
11   constructor(props) {
12     super(props);
13     this.state = {
14       justifyContentValue: 'flex-start'
15     };
16   }
17 
18   clickView = (value: JustifyContentType) => () => {
19     this.setState({ justifyContentValue: value});
20   };
21 
22   customButton = (title: JustifyContentType) => {
23     return (
24       <TouchableOpacity onPress={this.clickView(title)}>
25         <View style = {{ width: 120, height: 30, backgroundColor: 'green', margin: 5, justifyContent:'center', alignItems:'center'}}>
26           <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
27         </View>
28       </TouchableOpacity>
29     );
30   };
31 
32   operaView = () => {
33     return (
34       <View style={{
35         height: 90,
36         width: '100%',
37         justifyContent: 'center',
38         alignItems: 'center',
39         flexDirection:'row',
40         flexWrap:'wrap'}}>
41         {this.customButton('flex-start')}
42         {this.customButton('flex-end')}
43         {this.customButton('center')}
44         {this.customButton('space-between')}
45         {this.customButton('space-around')}
46         {this.customButton('space-evenly')}
47       </View>
48     );
49   };
50 
51   item = (width: number) => {
52     return (
53       <View style = {{ height: 30, width: width, backgroundColor: 'green' , margin: 2}}/>
54     );
55   };
56 
57   resultDisplayView = () => {
58     const {
59       justifyContentValue
60     } = this.state;
61     return (
62       <View style={{ height: 110, width: '100%', justifyContent: justifyContentValue, flexDirection: 'row', flexWrap:'wrap' }}>
63         {this.item(60)}
64         {this.item(100)}
65         {this.item(30)}
66         {this.item(80)}
67         {this.item(100)}
68         {this.item(90)}
69         {this.item(30)}
70         {this.item(80)}
71       </View>
72     );
73   };
74 
75   render () {
76     return (
77       <View style={{ height: 200, backgroundColor: '#e5e5e5' }}>
78         {this.operaView()}
79         {this.resultDisplayView()}
80       </View>
81     );
82   }
83 }

View Code

4、AlignContent

接下來來看一下AlignContent這個屬性及其相關的屬性值。該屬性與上面的JustifyContent屬性的功能差很少，JustifyContent負責左右方向的子元素之間的關係，而AlignContent則負責上下方向上的子元素之間的佈局。下方是AlignContent的相關屬性值和使用方式：

屬性值：

alignContent?:"flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around"

用法示例：

<View style={{ alignContent: 'flex-start' />

按照上述的思路，咱們仍是經過一個Demo來看一下每一個屬性值的具體的做用。下方就是本部分對應的Demo，每一個按鈕對應着AlignContent的一個屬性值，點擊相關按鈕後，下方的子元素就會按照點擊的按鈕進行設置。下方是具體介紹：

flex-start: 子元素頂部對齊，點擊下方的flex-start按鈕會看到全部子元素向上對齊了。
center: 上下方向上居中，也就是說設置該屬性，子元素會在上下方向上進行居中展現。
flex-end: 該屬性與flex-start相反, 設置該屬性， 子元素會位於父元素的底部展現。
space-between：間隔填充， 子元素的上下間距位於子元素中間。
space-around: 即間隔環繞在子元素的上下，與JustifyContent的 space-around相似。
stretch：拉伸，該屬性只有在子元素的高度沒有設置的狀況下適用，該狀況下會自適應高度，以致填滿父視圖，具體以下所示：

代碼和以前的Demo的實現思路差很少，在此就不作過多贅述了，下方是該部分的完整示例：

 1 // alignItem
 2 import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
 3 import { Component } from "react";
 4 import React from "react";
 5 
 6 type AlignContentType = "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
 7 
 8 type AlignContentTestCompontStateType = {
 9   alignContentValue: AlignContentType
10 }
11 export default class AlignContentTestComponent extends Component<null, AlignContentTestCompontStateType> {
12   constructor(props) {
13     super(props);
14     this.state = {
15       alignContentValue: 'flex-start'
16     };
17   }
18 
19   clickView = (title: AlignContentType) => () => {
20     this.setState({ alignContentValue: title});
21   };
22 
23   customButton = (title: AlignContentType) => {
24     return (
25       <TouchableOpacity onPress={this.clickView(title)}>
26         <View style = {{ width: 120, height: 30, backgroundColor: 'green', margin: 5, justifyContent:'center', alignItems:'center'}}>
27           <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
28         </View>
29       </TouchableOpacity>
30     );
31   };
32 
33   operaView = () => {
34     return (
35       <View style={{
36         height: '40%',
37         width: '100%',
38         justifyContent: 'center',
39         alignItems: 'center',
40         flexDirection:'row',
41         flexWrap:'wrap'}}>
42         {this.customButton('flex-start')}
43         {this.customButton('center')}
44         {this.customButton('flex-end')}
45         {this.customButton('space-between')}
46         {this.customButton('space-around')}
47         {this.customButton('stretch')}
48       </View>
49     );
50   };
51 
52   item = (width: number, height: number) => {
53     return (
54       <View style = {{ height: height, width: width, backgroundColor: 'red' , margin: 2}}/>
55     );
56   };
57 
58   resultDisplayView = () => {
59     const {
60       alignContentValue
61     } = this.state;
62 
63     let height = 30;
64     if (alignContentValue === 'stretch') {
65       height = -1;
66     }
67     return (
68       <View style={{ height: "60%", width: '100%', alignContent: alignContentValue, backgroundColor: '#efefef', flexDirection: 'row', flexWrap:'wrap'}}>
69         {this.item(50, height)}
70         {this.item(80, height)}
71         {this.item(30, height)}
72         {this.item(60, height)}
73         {this.item(50, height)}
74         {this.item(100, height)}
75         {this.item(30, height)}
76         {this.item(50, height)}
77         {this.item(80, height)}
78         {this.item(30, height)}
79       </View>
80     );
81   };
82 
83   render () {
84     return (
85       <View style={{ height: 200, backgroundColor: '#e5e5e5'}}>
86         {this.operaView()}
87         {this.resultDisplayView()}
88       </View>
89     );
90   }
91 }

AlignContent

5、flexWrap

接下來看一下flexWrap這個屬性，該屬性負責折行的。例如當一個View沒有設置flexWrap屬性時，子元素又是橫排的狀況時，會在一行上一直日後排，並不會折行。若是想折行的話，那麼就得使用這個flexWrap屬性了，下方是flexWrap屬性的相關值和用法：

屬性值：

flexWrap?:"wrap" | "nowrap" | "wrap-reverse"

用法示例：

<View style={{ flexWrap: 'wrap' />

flexWrap的屬性值比較少，也比較好理解，下方就進行簡單的描述：

wrap: 折行，設置該屬性意味着一行放不下時會自動換到下一行進行展現。
nowrap: 不這行，默認值，超出屏幕後也一直往一行後邊疊加。
wrap-reverse: 逆向折行，這個雖然在查看類型的時候有這個選項，可是實測是不可用的，可忽略。

下方就是flexWrap所對應的Demo, 該Demo中的View就設置了flexWrap的屬性爲wrap的值，沒點擊一次咱們就隨機的日後邊添加一個隨機寬度的子View。從下方gif中不難看出，當最後一個View放不下時會自動的換到下一行進行展現。具體以下所示：

該示例的完整代碼：

 1 // flexWrap
 2 import { Component } from "react";
 3 import { TouchableOpacity, View } from "react-native";
 4 import React from "react";
 5 
 6 type FlexWrapTestComponentStateType = {
 7   allViews: Array<any>
 8 }
 9 export default class FlexWrapTestComponent extends Component<null, FlexWrapTestComponentStateType> {
10   constructor(props) {
11     super(props);
12     this.state = {
13       allViews : [this.item()]
14     };
15   }
16 
17   clickView = () => {
18     let items = this.state.allViews;
19     items.push(this.item());
20     this.setState({allViews: items});
21   };
22 
23   item = () => {
24     let randomWidth = Math.random() * 100 + 10;
25     return (
26       <View style={{backgroundColor: 'green', height: 30, width: randomWidth, margin: 5}} />
27     );
28   };
29 
30   render () {
31     return (
32       <TouchableOpacity onPress={this.clickView}>
33         <View style={{ height: 100, backgroundColor: '#eaeaea' , flexDirection: 'row', flexWrap: 'wrap',}}>
34           {this.state.allViews}
35         </View>
36       </TouchableOpacity>
37     );
38   }
39 }

FlexWrap

6、AlignItem

該屬性也是比較經常使用的，用來定義子元素在交叉軸上的對齊方式。也就是說，子元素是橫向排列的，那麼該屬性就約定縱軸方向上的對齊方式。AlignItem屬性的屬性值也沒幾個，也比較好理解，下方是AlignItem對應的熟悉值和使用方式：

屬性值：

type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";

用法示例：

<View style={{ alignItem: 'flex-start' />

下方就是真的AlignItem實現的一個Demo, 咱們將根據下方的Demo來具體的看一下AlignItem所對應的每一個屬性值的做用，具體以下所示：

flex-start: 首先仍是來看一下flex-start，下方咱們的子元素是橫向排列的，因此設置flex-start時，就意味着， 子元素在縱軸開始的位置對齊，也就是頂部對齊。
center: 也是以橫向排列的子元素爲例，當設置alignItem爲Center時，表示 交叉軸方向上居中對齊，具體在該Demo中表現的是上下方向上居中對齊。
flex-end: 這個與flex-start相反，表示以交叉軸的尾部對齊。
baseline: 這個就比較有意思了，設置該屬性值就意味着子元素以子元素中的 文字的基線對齊。

該示例完整代碼以下：

 1 // alignItem
 2 import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
 3 import { Component } from "react";
 4 import React from "react";
 5 
 6 type AlignItemTestCompontStateType = {
 7   alignItemValue: FlexAlignType
 8 }
 9 export default class AlignItemTestComponent extends Component<null, AlignItemTestCompontStateType> {
10   constructor(props) {
11     super(props);
12     this.state = {
13       alignItemValue: 'flex-start'
14     };
15   }
16 
17   clickView = (title: FlexAlignType) => () => {
18     this.setState({ alignItemValue: title});
19   };
20 
21   customButton = (title: FlexAlignType) => {
22     return (
23       <TouchableOpacity onPress={this.clickView(title)}>
24         <View style = {{ width: 80, height: 30, backgroundColor: 'red', margin: 5, justifyContent:'center', alignItems:'center'}}>
25           <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
26         </View>
27       </TouchableOpacity>
28     );
29   };
30 
31   operaView = () => {
32     return (
33       <View style={{ height: '100%', width: '30%', backgroundColor: '#e0e0e0', justifyContent: 'center', alignItems: 'center'
34       }}>
35         {this.customButton('flex-start')}
36         {this.customButton('center')}
37         {this.customButton('flex-end')}
38         {this.customButton('stretch')}
39         {this.customButton('baseline')}
40       </View>
41     );
42   };
43 
44   item = (height: number, fontSize: number) => {
45     return (
46       <View style = {{ height: height, width: 50, backgroundColor: 'red' , margin: 10 }}>
47         <Text style={{fontSize: fontSize}}> {fontSize} </Text>
48       </View>
49     );
50   };
51 
52   resultDisplayView = () => {
53     const {
54       alignItemValue
55     } = this.state;
56 
57     let heights = [100, 150, 80];
58     if (alignItemValue === 'stretch') {
59       heights = [-1, -1, -1];
60     }
61     return (
62       <View style={{ height: '100%', width: '70%', alignItems: alignItemValue, backgroundColor: '#efefef', flexDirection: 'row', justifyContent: 'center' }}>
63         {this.item(heights[0], 10)}
64         {this.item(heights[1], 20)}
65         {this.item(heights[2], 30)}
66       </View>
67     );
68   };
69 
70   render () {
71     return (
72       <View style={{ height: 200, backgroundColor: '#e5e5e5' , flexDirection: 'row'}}>
73         {this.operaView()}
74         {this.resultDisplayView()}
75       </View>
76     );
77   }
78 }

AlignItem

7、AlignSelf

最後咱們來看一下這個AlignSelf屬性，該屬性是元素屬性，主要設置在子元素上，用來控制單個子元素在父元素的交叉軸的位置。AlignSelf的做用方式與AlignItem差很少，只不過一個做用於父元素，一個是做用於子元素。下方是AlignSelf的屬性值和用法示例：

屬性值：

type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";

type AlignSelfType = "auto" | FlexAlignType;

用法示例：

<View/>

　　<View style={{ alignSelf: 'flex-start' />

</View>

最後咱們仍然經過一個Demo來看一下AlignSelf的表現形式。在下方Demo中咱們依次爲右邊中間的黑塊設置的AlignSelf屬性。每一個屬性的值的意思可參見AlignItem的屬性值，只不過這些屬性值是做用於子元素的。具體關於AlignSelf的內容就不作過多贅述了。

該部分Demo完整示例：

 1 // alignSelf
 2 import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
 3 import { Component } from "react";
 4 import React from "react";
 5 
 6 type AlignSelfTestCompontStateType = {
 7   alignItemValue: FlexAlignType
 8 }
 9 export default class AlignSelfTestComponent extends Component<null, AlignSelfTestCompontStateType> {
10   constructor(props) {
11     super(props);
12     this.state = {
13       alignItemValue: 'flex-start'
14     };
15   }
16 
17   clickView = (title: FlexAlignType) => () => {
18     this.setState({ alignItemValue: title});
19   };
20 
21   customButton = (title: FlexAlignType) => {
22     return (
23       <TouchableOpacity onPress={this.clickView(title)}>
24         <View style = {{ width: 80, height: 30, backgroundColor: 'black', margin: 5, justifyContent:'center', alignItems:'center'}}>
25           <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
26         </View>
27       </TouchableOpacity>
28     );
29   };
30 
31   operaView = () => {
32     return (
33       <View style={{ height: '100%', width: '30%', backgroundColor: '#e0e0e0', justifyContent: 'center', alignItems: 'center'
34       }}>
35         {this.customButton('flex-start')}
36         {this.customButton('center')}
37         {this.customButton('flex-end')}
38         {this.customButton('stretch')}
39       </View>
40     );
41   };
42 
43   resultDisplayView = () => {
44     const {
45       alignItemValue
46     } = this.state;
47 
48     let height = 80;
49     if (alignItemValue === 'stretch') {
50       height = -1
51     }
52     return (
53       <View style={{ height: '100%', width: '70%', alignItems: 'flex-start', backgroundColor: '#efefef', flexDirection: 'row', justifyContent: 'center' }}>
54         <View style = {{ height: 150, width: 50, backgroundColor: 'black' , margin: 10}}/>
55         <View style = {{alignSelf: alignItemValue,  height: height, width: 50, backgroundColor: 'black' , margin: 10}}/>
56         <View style = {{ height: 100, width: 50, backgroundColor: 'black' , margin: 10}}/>
57       </View>
58     );
59   };
60 
61   render () {
62     return (
63       <View style={{ height: 180, backgroundColor: '#e5e5e5' , flexDirection: 'row'}}>
64         {this.operaView()}
65         {this.resultDisplayView()}
66       </View>
67     );
68   }
69 }

AlignSelf

通過本篇博客的詳細介紹想必對FlexBox有了更詳細的瞭解，掌握了上述屬性後，在RN中寫佈局應該就不是什麼難事兒了。固然本篇博客值介紹了FlexBox佈局比較核心的部分，想什麼Margin、Padding等等這些屬性比較簡單，就不作過多贅述了。本篇博客所涉及的全部Demo會在github上給出，下方會給出相關連接。

下篇博客會集中根據具體示例來聊一下RN中經常使用的動畫。

github地址：https://github.com/lizelu/ReactNativeTestDemo