一直以來，我們都在用原始的CSS屬性來設置外邊距、內邊距和顏色。但是，最新的CSS規范中增加了彈性盒子的概念，非常利于我們對App的UI進行布局，雖然你可能還不太熟悉它。
React Native 使用了 css-layout 庫，在這個庫中實現了彈性盒子，而這種模型無論對iOS還是Android來說都很好理解。
更幸運的是，Facebook針對許多語言單獨實現了這個項目，這就引申出了許多新穎的用法，比如[在SVG中應用彈性盒子布局](http://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html)（是的，這篇文章也是我寫的，為此我不得不熬到深夜）。
在這個App中，采用了默認的垂直流式布局，即容器中的子元素按照從上到下的順序進行布局。比如：
這被稱作主軸, 主軸可能是水平方向，也可能是垂直方向。
每個子元素的縱向位置由它們的邊距（margin）、間距（padding）和高決定。容器的alignItems屬性會被設置為居中（center），這決定了子元素在交叉軸上的位置。在本例里，將導致子元素水平居中對齊。
接下來我們添加一些文本輸入框和按鈕。打開SearchPage.js 在第二個 Text 元素后添加:
~~~
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
~~~
這段代碼添加了兩個頂級的視圖：一個文本輸入框外加一個按鈕，以及一個單獨的按鈕。它們所使用的樣式待會我們再介紹。
接著，在styles中增加如下樣式：
~~~
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
~~~
不同樣式屬性間以逗號分隔，這樣你在container選擇器后必須以一個逗號結尾。
這些樣式將被文本輸入框和按鈕所用。
回到模擬器，按下Cmd+R ，你將看到如下效果：
Go按鈕和其緊隨的文本框在同一行，因此我們將它們用一個容器裝在一起，同時容器的flexDirection: 樣式屬性設置為’row’ 。我們沒有顯式指定文本框和按鈕的寬度，而是分別指定它們的flex樣式屬性為4和1。也就是說，它們的寬度在整個寬度（屏幕寬度）中所占的份額分別為4和1。
而且，視圖中的兩個按鈕都不是真正的按鈕。對于UIKit，按鈕不過是可以點擊的標簽而已，因此React Native開發團隊能夠用JavaScript以一種簡單的方式構建按鈕：TouchableHighlight是一種React Native組件，當它被點擊時，它的前景會變得透明，從而顯示其隱藏在底部的背景色。
最后我們還要在視圖中添加一張圖片。這些圖片可以在[此處](http://cdn2.raywenderlich.com/wp-content/uploads/2015/03/ReactNative-HouseImage.zip)下載。下載后解壓縮zip文件。
在 Xcode 打開 Images.xcassets 文件，點擊加號按鈕，添加一個新的image set。然后將需要用到的圖片拖到image set右邊窗口對應的位置。
要讓這些圖片顯示，必須停止你的 React Native App并重新啟動。
在location按鈕對應的 TouchableHighlight 組件下加入：
`<Image source={require('image!house')} style={styles.image}/>`
然后，為圖片添加適當的樣式定義，記得在上一個樣式之后添加一個逗號結尾：
~~~
image: {
width: 217,
height: 138
}
~~~
由于我們將圖片添加到了Images.xcasset資源包中，我們需要用require(‘image!house’)語句獲得圖片在App包中的正確路徑。在Xcode中，打開Images.xcassets ，你可以找到名為house的image set。
回到模擬器，按下Cmd+R 查看運行效果:
> 注意: 如果圖片沒有顯示，卻看到一個““image!house” cannot be
> found”的提示，則可以重啟packager(在終端中輸入npm start命令)。
到目前為止，我們的App看上去有模有樣，但它還缺少很多實際的功能。接下來的任務就是為App增加一些狀態，執行一些動作。
