React-Native之flexbox佈局

http://blog.csdn.net/u014486880/article/details/51385688

這篇博客稍微講解下React-Native中的佈局。比較簡單。RN的而佈局是用css中的flexbox佈局，所以佈局起來與Android傳統的佈局樣式有點像。接下來就結合圖片一起來看看。

常用屬性講解

RN的flexbox主要有以下幾個屬性alignItems，alignSelf，flex，flexDirection，flexWrap，justifyContent。

flexDirection

該屬性用於指定主軸的方向。即指定子view的佈局方向。它有兩個值可設置。

• row：橫向佈局。
• column：縱向佈局。

這個屬性很簡單，先看row的代碼段：

<code class="hljs xml has-numbering">render:function(){      
  return(
   <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{styles.flexStyle}</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">style</span>= {<span class="hljs-attribute">styles.flexSub</span>}/></span>
    <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">style</span>= {<span class="hljs-attribute">styles.flexSub</span>}/></span>
    <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">style</span>= {<span class="hljs-attribute">styles.flexSub</span>}/></span>
    <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">style</span>= {<span class="hljs-attribute">styles.flexSub</span>}/></span>
    <span class="hljs-tag"></<span class="hljs-title">View</span>></span>
  );
}
…………
var styles = StyleSheet.create({

  flexStyle:{
    height:600,
    flexDirection:'row',
  },
    flexSub:{
    flex:1,
    height:300,
      backgroundColor:'#333333',
      marginRight:10,
  },
)}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

一個View裏有四個小View,小View的底色是黑的，看下效果圖：

可以看到，四個view橫向的進行佈局。那改成column呢，樣式修改如下：

<code class="hljs cs has-numbering"><span class="hljs-keyword">var</span> styles = StyleSheet.create({
   flexStyle:{
    height:<span class="hljs-number">600</span>,
    flexDirection:<span class="hljs-string">'column'</span>,
  },
  flexSub:{
    flex:<span class="hljs-number">1</span>,
    height:<span class="hljs-number">100</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginBottom:<span class="hljs-number">10</span>,
  },
)}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

看下效果圖：

就是縱向佈局。

alignItems

用於定義子組件在垂直方向上的對齊方式。有四個屬性可設置：flex-start，flex-end，center，stretch。

• flex-start：與父組件的頂部對齊。
• flex-end：與父組件的底部對齊。
• center：處於父容器的中間位置。
• stretch：豎直上填充整個容器。

首先來看下flex-start，順便改了下子組件的顏色，代碼如下：

<code class="hljs cs has-numbering"><span class="hljs-keyword">return</span>(
    <View style={styles.flexStyle}>
    <View style= {styles.flexSelf1}/>
    <View style= {styles.flexSelf2}/>
    <View style= {styles.flexSelf3}/>
    <View style= {styles.flexSelf4}/>
    </View>
  );
  ……
<span class="hljs-keyword">var</span> styles = StyleSheet.create({

  flexStyle:{
    height:<span class="hljs-number">600</span>,
    flexDirection: <span class="hljs-string">'row'</span>,
      alignItems:<span class="hljs-string">'flex-start'</span>,
  },
  flexSub:{
    flex:<span class="hljs-number">1</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginBottom:<span class="hljs-number">10</span>,
  },
  flexSelf1:{
    flex:<span class="hljs-number">1</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#ff0000'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf2:{
    flex:<span class="hljs-number">1</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#00ff00'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf3:{
    flex:<span class="hljs-number">1</span>,
      height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#0000ff'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf4:{
    flex:<span class="hljs-number">1</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginRight:<span class="hljs-number">10</span>,
  }  
});
</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li></ul>

看下效果圖：

就是和父容器頂部對齊。
看下flex-end屬性，代碼就不貼出來了，只要改alignItems屬性就好了。效果圖如下：

可以看到，和底部對齊了。
再看下center，這個可以說是用的最多的屬性，它會讓子組件位於父容器的中間位置，看下效果圖：

stretch就是豎直填充，前提是子組件沒有設置height屬性。看下效果圖：

justifyContent

有豎直就水平。justifyContent和alignItems是相對的。它有五個屬性可以設置，分別是flex-start，flex-end，center，space-between，space-around。
* flex-start：伸縮項目與父容器左端靠齊。
* flex-end：與父容器右端靠齊。
* center：水平居中。
* space-between：第一個子組件位於父容器左端，最後一個子組件位於父容器最右端。然後平均分配在父容器水平方向上。
* space-around：所有子組件平均分配在父容器的水平方向上，左右都有留空隙。

先看水平居中（center）的，先看下代碼：

<code class="hljs cs has-numbering"> <span class="hljs-keyword">return</span>(
    <View style={styles.flexStyle}>
    <View style= {styles.flexSub}/>

    </View>
  );
  ……
  <span class="hljs-keyword">var</span> styles = StyleSheet.create({

  flexStyle:{
    height:<span class="hljs-number">600</span>,
    width:<span class="hljs-number">400</span>,
    flexDirection: <span class="hljs-string">'row'</span>,
    alignItems:<span class="hljs-string">'center'</span>,
    justifyContent:<span class="hljs-string">'center'</span>,
  },
  flexSub:{
    width:<span class="hljs-number">100</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginBottom:<span class="hljs-number">10</span>,
  },
  }）;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li></ul>

父容器設置了justifyContent:’center’屬性，所以理論上子組件應該會水平劇中，來看下是否正確。如下：

justifyContent:’flex-start’，水平居左：

justifyContent:’flex-end’,水平居右：

這些都挺簡單的，來看下space-between和space-around的區別，先看下space-between的效果圖：

可以看到它左右都不留空隙。均勻分佈。
再看下space-around的效果圖：

它左右都留有空隙，是平均的位於整個界面的水平方向上。

alignSelf

該屬性用來設置單獨組件的豎直對齊方式，與alignItem有點像。有五個屬性可以設置，auto，flex-start，flex-end，center，streth。
* auto:按照自身設置的寬高來顯示，如果沒設置，效果跟streth一樣。
* flex-start:與父容器頂部對齊。
* flex-end:與父容器底部對齊。
* center:位於垂直位置。
* streth:垂直拉伸。
這個用法跟上面的很像，只是它用於單個組件，如本例子的子View中，看下代碼：

<code class="hljs cs has-numbering"> <span class="hljs-keyword">return</span>(
    <View style={styles.flexStyle}>
    <View style= {styles.flexSelf1}/>
    <View style= {styles.flexSelf2}/>
    <View style= {styles.flexSelf3}/>
    <View style= {styles.flexSelf4}/>
    </View>
  );
……
<span class="hljs-keyword">var</span> styles = StyleSheet.create({
  flexStyle:{
    height:<span class="hljs-number">600</span>,
    flexDirection:<span class="hljs-string">'row'</span>,
  },

  flexSelf1:{
    flex:<span class="hljs-number">1</span>,
    alignSelf:<span class="hljs-string">'flex-start'</span>,

    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#ff0000'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf2:{
    flex:<span class="hljs-number">1</span>,
    alignSelf:<span class="hljs-string">'flex-end'</span>,

    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#00ff00'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf3:{
    flex:<span class="hljs-number">1</span>,
    alignSelf:<span class="hljs-string">'stretch'</span>,

      backgroundColor:<span class="hljs-string">'#0000ff'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf4:{
    flex:<span class="hljs-number">1</span>,
    alignSelf:<span class="hljs-string">'auto'</span>,
    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  )}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li></ul>

以上幾個子View設置了不同的樣式 ，看下效果圖：

看到了，flex-start就是頂部對齊，flex-end就是與底部對齊。第三個View是streth，垂直拉伸了。第四個View是auto，因爲設置了高度，所以顯示如圖所示。沒有顯示center，但它的效果可想而知，就不再演示啦。

flex

flex指設置伸縮項目的伸縮樣式，可以把它類比成android中的weight屬性。
看一個代碼就清楚它的用法了。

<code class="hljs cs has-numbering">  <span class="hljs-keyword">return</span>(
    <View style={styles.flexStyle}>
    <View style= {styles.flexSelf1}/>
    <View style= {styles.flexSelf1}/>
    <View style= {styles.flexSelf2}/>
    <View style= {styles.flexSelf3}/>
    </View>
  );
  ……
<span class="hljs-keyword">var</span> styles = StyleSheet.create({

  flexStyle:{
    height:<span class="hljs-number">600</span>,
    flexDirection: <span class="hljs-string">'row'</span>,
    flex:<span class="hljs-number">1</span>,
  },
  flexSub:{

    height:<span class="hljs-number">300</span>,
      backgroundColor:<span class="hljs-string">'#333333'</span>,
      marginBottom:<span class="hljs-number">10</span>,
  },
  flexSelf1:{
    flex:<span class="hljs-number">1</span>,
      backgroundColor:<span class="hljs-string">'#ff0000'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf2:{
    flex:<span class="hljs-number">2</span>,

      backgroundColor:<span class="hljs-string">'#00ff00'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  flexSelf3:{
    flex:<span class="hljs-number">4</span>,

      backgroundColor:<span class="hljs-string">'#0000ff'</span>,
      marginRight:<span class="hljs-number">10</span>,
  },
  });</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul>

效果圖如下：

可以看到，flex爲2的組件寬度爲flex爲1寬度的兩倍，flex爲4組件寬度則爲flex爲1的組件寬度的4倍。

flexWrap

其實這些屬性都是CSS原有的屬性，只是RN只支持了部分的屬性。flexWrap用於設置是否可換行，有兩個屬性可設置nowrap和wrap。

• nowrap:即使空間不夠也不換行。
• wrap:空間不夠的話自動換行。
  如設置成wrap時，空間不夠效果圖如下：
  
  第四個放不下，就換行了。
  這篇博客對RN的flexbox進行一個介紹，內容很簡單，也是對自己學的東西的一個鞏固。