代碼在這裡：
<a href="https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller">https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller</a>
回頭看看RN的填坑之旅系列，發現一路寫下來都是我在開發中遇到的問題如何解決的。興之所至，不問順序。于是出現一個問題，填坑系列和學習知識的順序不是很一緻。比如今天要說的布局問題。其實在一個app開發之前，就應該有所了解。否則的話每次看到的<code><View style={{flex: 1}} /></code>代表的是什麼呢？上來就是一個疑問。
在這個系列進行到一定程度的時候，我會花時間重新整理全系列的文章，讓各位可以按照知識本來學習的順序循序漸進的學習React Native的知識，避免在開發中遇到不應該遇到的問題。
正文開始。本文主要是介紹基礎知識，但是不适用基礎的代碼。是以，如果你在看的時候有什麼問題弄不清楚的話，随時查閱官網。那麼問題是什麼？三個View放在一個父View裡顯示出來會是設麼樣子的？這五個子View每次隻要顯示一個的話應該如何處理？
首先我們先來一點開胃小菜：
預設的情況下NavigationBar的左側回退按鈕看起來是這樣的：
圖中可見，按鈕緊貼上沿。這個時候的布局是這樣的：
如何讓NavigationBar的按鈕豎直居中呢？不要想在<code>TouchableHighlight</code>上添加的樣式可以起作用。隻有在外層再包裹一層View才可以。并給外層的View設定樣式，讓其中的内容豎直居中才可以。
下面要實作一個效果。我們已經有三個橫向排列的，等寬度的View。對應的還有三個按鈕，每一個按鈕對應一個View。但是，不要三個View都顯示出來。每次隻顯示一個。點一個按鈕就顯示出對應的View來。
先來看看制造問題的代碼重制：
看起來是這樣的：
預設的，在一個View裡的子View都是豎直依次排列的。
React Native使用Flexbox來實作布局的。Flexbox兩個方向，一個是column，一個是row。
column 是預設的flexbox方向，是豎直的，從上到下的方向。如上例的圖檔中截面裡紅、橙、黃三個顔色的view排列的方向。
row是橫向的，從左到右的方向。
我們來看看flexbox在row方向的樣子：
添加了按鈕以後的界面看起來是這樣的：
在flow已經決定了子view排列的方向的時候。還需要進一步的調整子view的時候就會用到<code>justifyContent</code>和<code>alignItems</code>。
在和flow指定的方向同一方向上調整的時候使用<code>justifyContent</code>。flow指定的方向為主方向。要在次方向上指定子view如何排列就是用<code>alignItems</code>。如果<code>flexDirection</code>指定的是<code>column</code>（豎直方向），那麼主方向就是豎直的，次方向就是水準的。
上面介紹了flex的方向，這裡來說說flex的值。
在兄弟姐妹關系的View中，如果他們的flex都是1，那麼他們評分父view的空間。如果，有一個flex的值是2，那麼就是說這個子View的寬（高）是其他的兄弟姐妹的2倍。
在flex為0的時候，View的寬高就完全需要靠自己了。也就是這個view的寬和高需要設定具體的數值。系統不會替你計算。
如果flow為<code>-1</code>，那麼View的寬度和高度，由width和height決定。*在空間不夠的情況下，view的寬度和高度會縮小到<code>minWidth</code>和<code>minHeight</code>。
效果：
實作代碼：
實作原理：
如何去改變一個元件的外觀布局？自然少不了<code>setState</code>方法。一開始，我們就把這幾個子view的布局都放在<code>state</code>裡。
在下面的三個按鈕的點選事件中，設定不同的state，那麼赤、橙和黃三個view就會發生變化。
前面提高flex的值為0的時候<code>width</code>和<code>height</code>起作用，flex不為0的時候不起作用。這就是核心算法之所在了。在一開始讓紅色的view的flex為<code>1</code>。其他的view的flex為<code>0</code>，并且寬度也為<code>0</code>。
之後每次點選了一個按鈕的時候，對應的view的布局設定為flex等于<code>1</code>，其他的view的flex為<code>0</code>。這樣就實作了上面的效果。
最後留一個練習題，上面的效果對于一個簡單的View來說也可以使用conditional render來搞定。那麼就請你做一個這樣的練習。
上面的講解都是我遇到的問題的講解。包含了一些flexbox布局的基礎，但是更難了解一下。React Native的布局包括的東西還有很多。後續會在本文或者系列的其他的文章中講解。
歡迎加群互相學習，共同進步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，轉載請注明出處！
本文轉自張昺華-sky部落格園部落格，原文連結：http://www.cnblogs.com/sunshine-anycall/p/5983172.html，如需轉載請自行聯系原作者