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

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

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

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

先入為主，下方這個gif中所有的內容就是我們今天要結束的東西，全是關於Flex布局的。

　　

 

 

一、Flex

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

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

<View style={{ flex: flexValue />

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

• 三個黑塊中的初始的flex值為1， 所以三個黑色方塊會平分屏幕。

• 每點擊一次，中間的黑塊的flex數增加1，然后我們就看到中間黑塊會增大，三個黑塊的比例變成了1 :  2 : 1。每次點擊都會有變化。 

　　

 

最后我們來簡單的看一下該效果的實現，代碼如下。

• 首先我們來看一下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。所以我們最終看到的效果是沒點擊一次，中間的黑塊會增大。

　　

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

// flex
import { Component } from "react";
import { TouchableOpacity, View, Text } from "react-native";
import React from "react";

type FlexStateType = {
  flexValue: number
}
export default class FlexTestComponent extends Component<null, FlexStateType> {
  flexValue = 1;
  constructor(props) {
    super(props);
    this.state = {
      flexValue: this.flexValue
    };
  }

  clickView = () => {
    this.flexValue ++;
    this.setState({flexValue: this.flexValue})
  };

  item = (flexValue: number) => {
    return (
      <View style={{ flex: flexValue, height: 50, backgroundColor: 'black', marginLeft:10, marginRight: 10 , justifyContent: 'center', alignItems:'center'}}>
        <Text style = {{color: '#fff'}}>flex = {flexValue}</Text>
      </View>
    );
  };

  render () {
    const {
      flexValue
    } = this.state;
    return (
      <TouchableOpacity onPress={this.clickView}>
        <View style={{ height: 60, width: '100%', backgroundColor: '#e5e5e5', flexDirection: 'row' , alignItems: 'center'}}>
          {this.item(1)}
          {this.item(flexValue)}
          {this.item(1)}
        </View>
      </TouchableOpacity>
    );
  }
}

 

 

 

二、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 子元素就會按照我們要求的樣式去展示。

　　

完整代碼示例：

// flexDirection
import React, { Component } from 'react'
import { FlexStyle, StyleSheet, Text, View } from 'react-native'

export default  function FlexDirectionTestComponent () {
  return (
    <View style={{ height: 180, backgroundColor: '#c1c1c1' , flexDirection: 'row'}}>
      <View style={{ height: '100%', width: '50%', justifyContent: 'space-around'}}>
        <FlexDirectionTestView value={{ flexDirection: 'row' }}/>
        <FlexDirectionTestView value={{ flexDirection: 'row-reverse' }}/>
      </View>

      <View style={{ height: '100%', width: '50%', flexDirection: 'row' , justifyContent: 'space-around'}}>
        <FlexDirectionTestView value={{ flexDirection: 'column' }}/>
        <FlexDirectionTestView value={{ flexDirection: 'column-reverse' }}/>
      </View>
    </View>
  )
}

type FlexDirectionProps = {
  value?: FlexStyle
}

class FlexDirectionTestView extends Component<FlexDirectionProps> {
  render () {
    return (
      <View style={[myStyle.flexDirectionProps, { flexDirection: this.props.value.flexDirection }]}>
        <SubView value={'1'}/>
        <SubView value={'2'}/>
        <SubView value={'3'}/>
      </View>
    )
  }
}

type SubViewProps = {
  value: string
}
class SubView extends Component<SubViewProps> {
  render () {
    return(
      <View style={myStyle.subViewStyle}>
        <Text style={{ color: 'white', fontSize: 17 }}> {this.props.value} </Text>
      </View>
    )
  }
}

const myStyle = StyleSheet.create({
  subViewStyle: {
    margin: 10,
    borderRadius: 25,
    width: 25,
    height: 25,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center'
  },
  flexDirectionProps: {
    backgroundColor: 'gray',
    margin: 5
  }
});

 

 

 

三、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中分別調用了按鈕區和布局區兩塊的內容。

　　

 

完整代碼如下：

// justifyContent
import { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import React from "react";

type JustifyContentType = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
type JustifyContentCompontStateType = {
  justifyContentValue: JustifyContentType
}
export default class JustifyContentTestComponent extends Component<null, JustifyContentCompontStateType> {
  constructor(props) {
    super(props);
    this.state = {
      justifyContentValue: 'flex-start'
    };
  }

  clickView = (value: JustifyContentType) => () => {
    this.setState({ justifyContentValue: value});
  };

  customButton = (title: JustifyContentType) => {
    return (
      <TouchableOpacity onPress={this.clickView(title)}>
        <View style = {{ width: 120, height: 30, backgroundColor: 'green', margin: 5, justifyContent:'center', alignItems:'center'}}>
          <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  operaView = () => {
    return (
      <View style={{
        height: 90,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row',
        flexWrap:'wrap'}}>
        {this.customButton('flex-start')}
        {this.customButton('flex-end')}
        {this.customButton('center')}
        {this.customButton('space-between')}
        {this.customButton('space-around')}
        {this.customButton('space-evenly')}
      </View>
    );
  };

  item = (width: number) => {
    return (
      <View style = {{ height: 30, width: width, backgroundColor: 'green' , margin: 2}}/>
    );
  };

  resultDisplayView = () => {
    const {
      justifyContentValue
    } = this.state;
    return (
      <View style={{ height: 110, width: '100%', justifyContent: justifyContentValue, flexDirection: 'row', flexWrap:'wrap' }}>
        {this.item(60)}
        {this.item(100)}
        {this.item(30)}
        {this.item(80)}
        {this.item(100)}
        {this.item(90)}
        {this.item(30)}
        {this.item(80)}
      </View>
    );
  };

  render () {
    return (
      <View style={{ height: 200, backgroundColor: '#e5e5e5' }}>
        {this.operaView()}
        {this.resultDisplayView()}
      </View>
    );
  }
}

 

 

 

四、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的實現思路差不多，在此就不做過多贅述了，下方是該部分的完整示例：

// alignItem
import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
import { Component } from "react";
import React from "react";

type AlignContentType = "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";

type AlignContentTestCompontStateType = {
  alignContentValue: AlignContentType
}
export default class AlignContentTestComponent extends Component<null, AlignContentTestCompontStateType> {
  constructor(props) {
    super(props);
    this.state = {
      alignContentValue: 'flex-start'
    };
  }

  clickView = (title: AlignContentType) => () => {
    this.setState({ alignContentValue: title});
  };

  customButton = (title: AlignContentType) => {
    return (
      <TouchableOpacity onPress={this.clickView(title)}>
        <View style = {{ width: 120, height: 30, backgroundColor: 'green', margin: 5, justifyContent:'center', alignItems:'center'}}>
          <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  operaView = () => {
    return (
      <View style={{
        height: '40%',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row',
        flexWrap:'wrap'}}>
        {this.customButton('flex-start')}
        {this.customButton('center')}
        {this.customButton('flex-end')}
        {this.customButton('space-between')}
        {this.customButton('space-around')}
        {this.customButton('stretch')}
      </View>
    );
  };

  item = (width: number, height: number) => {
    return (
      <View style = {{ height: height, width: width, backgroundColor: 'red' , margin: 2}}/>
    );
  };

  resultDisplayView = () => {
    const {
      alignContentValue
    } = this.state;

    let height = 30;
    if (alignContentValue === 'stretch') {
      height = -1;
    }
    return (
      <View style={{ height: "60%", width: '100%', alignContent: alignContentValue, backgroundColor: '#efefef', flexDirection: 'row', flexWrap:'wrap'}}>
        {this.item(50, height)}
        {this.item(80, height)}
        {this.item(30, height)}
        {this.item(60, height)}
        {this.item(50, height)}
        {this.item(100, height)}
        {this.item(30, height)}
        {this.item(50, height)}
        {this.item(80, height)}
        {this.item(30, height)}
      </View>
    );
  };

  render () {
    return (
      <View style={{ height: 200, backgroundColor: '#e5e5e5'}}>
        {this.operaView()}
        {this.resultDisplayView()}
      </View>
    );
  }
}

 

 

 

五、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放不下時會自動的換到下一行進行展示。具體如下所示：

　　

 該示例的完整代碼：

// flexWrap
import { Component } from "react";
import { TouchableOpacity, View } from "react-native";
import React from "react";

type FlexWrapTestComponentStateType = {
  allViews: Array<any>
}
export default class FlexWrapTestComponent extends Component<null, FlexWrapTestComponentStateType> {
  constructor(props) {
    super(props);
    this.state = {
      allViews : [this.item()]
    };
  }

  clickView = () => {
    let items = this.state.allViews;
    items.push(this.item());
    this.setState({allViews: items});
  };

  item = () => {
    let randomWidth = Math.random() * 100 + 10;
    return (
      <View style={{backgroundColor: 'green', height: 30, width: randomWidth, margin: 5}} />
    );
  };

  render () {
    return (
      <TouchableOpacity onPress={this.clickView}>
        <View style={{ height: 100, backgroundColor: '#eaeaea' , flexDirection: 'row', flexWrap: 'wrap',}}>
          {this.state.allViews}
        </View>
      </TouchableOpacity>
    );
  }
}

 

　　

 

六、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: 這個就比較有意思了，設置該屬性值就意味着子元素以子元素中的 文字的基線對齊。

　　

該示例完整代碼如下：

// alignItem
import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
import { Component } from "react";
import React from "react";

type AlignItemTestCompontStateType = {
  alignItemValue: FlexAlignType
}
export default class AlignItemTestComponent extends Component<null, AlignItemTestCompontStateType> {
  constructor(props) {
    super(props);
    this.state = {
      alignItemValue: 'flex-start'
    };
  }

  clickView = (title: FlexAlignType) => () => {
    this.setState({ alignItemValue: title});
  };

  customButton = (title: FlexAlignType) => {
    return (
      <TouchableOpacity onPress={this.clickView(title)}>
        <View style = {{ width: 80, height: 30, backgroundColor: 'red', margin: 5, justifyContent:'center', alignItems:'center'}}>
          <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  operaView = () => {
    return (
      <View style={{ height: '100%', width: '30%', backgroundColor: '#e0e0e0', justifyContent: 'center', alignItems: 'center'
      }}>
        {this.customButton('flex-start')}
        {this.customButton('center')}
        {this.customButton('flex-end')}
        {this.customButton('stretch')}
        {this.customButton('baseline')}
      </View>
    );
  };

  item = (height: number, fontSize: number) => {
    return (
      <View style = {{ height: height, width: 50, backgroundColor: 'red' , margin: 10 }}>
        <Text style={{fontSize: fontSize}}> {fontSize} </Text>
      </View>
    );
  };

  resultDisplayView = () => {
    const {
      alignItemValue
    } = this.state;

    let heights = [100, 150, 80];
    if (alignItemValue === 'stretch') {
      heights = [-1, -1, -1];
    }
    return (
      <View style={{ height: '100%', width: '70%', alignItems: alignItemValue, backgroundColor: '#efefef', flexDirection: 'row', justifyContent: 'center' }}>
        {this.item(heights[0], 10)}
        {this.item(heights[1], 20)}
        {this.item(heights[2], 30)}
      </View>
    );
  };

  render () {
    return (
      <View style={{ height: 200, backgroundColor: '#e5e5e5' , flexDirection: 'row'}}>
        {this.operaView()}
        {this.resultDisplayView()}
      </View>
    );
  }
}

 

 

 

七、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完整示例：

// alignSelf
import { FlexAlignType, Text, TouchableOpacity, View } from "react-native";
import { Component } from "react";
import React from "react";

type AlignSelfTestCompontStateType = {
  alignItemValue: FlexAlignType
}
export default class AlignSelfTestComponent extends Component<null, AlignSelfTestCompontStateType> {
  constructor(props) {
    super(props);
    this.state = {
      alignItemValue: 'flex-start'
    };
  }

  clickView = (title: FlexAlignType) => () => {
    this.setState({ alignItemValue: title});
  };

  customButton = (title: FlexAlignType) => {
    return (
      <TouchableOpacity onPress={this.clickView(title)}>
        <View style = {{ width: 80, height: 30, backgroundColor: 'black', margin: 5, justifyContent:'center', alignItems:'center'}}>
          <Text style={{color: '#fff', fontSize: 17}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  operaView = () => {
    return (
      <View style={{ height: '100%', width: '30%', backgroundColor: '#e0e0e0', justifyContent: 'center', alignItems: 'center'
      }}>
        {this.customButton('flex-start')}
        {this.customButton('center')}
        {this.customButton('flex-end')}
        {this.customButton('stretch')}
      </View>
    );
  };

  resultDisplayView = () => {
    const {
      alignItemValue
    } = this.state;

    let height = 80;
    if (alignItemValue === 'stretch') {
      height = -1
    }
    return (
      <View style={{ height: '100%', width: '70%', alignItems: 'flex-start', backgroundColor: '#efefef', flexDirection: 'row', justifyContent: 'center' }}>
        <View style = {{ height: 150, width: 50, backgroundColor: 'black' , margin: 10}}/>
        <View style = {{alignSelf: alignItemValue,  height: height, width: 50, backgroundColor: 'black' , margin: 10}}/>
        <View style = {{ height: 100, width: 50, backgroundColor: 'black' , margin: 10}}/>
      </View>
    );
  };

  render () {
    return (
      <View style={{ height: 180, backgroundColor: '#e5e5e5' , flexDirection: 'row'}}>
        {this.operaView()}
        {this.resultDisplayView()}
      </View>
    );
  }
}

 

 

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

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

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