、了解React-Native組件

作為開發者都知道，UI組件對于一個應用的重要性。也許，在一款應用中，你還沒有完整的，有體系的構建UI組件，但是你一定或多或少有種想把組件抽出來的沖動，就像有些沖動是人類的本能一樣....這是作為一個開發者的本能。那么組件的復用和統一化是十分必要的。常見的組件有：日歷、下拉列表（常在應用中表現為下拉刷新）、導航欄、頭部、底部、選項卡等等。React-Native就提供了一套iOS原生的組件，這樣就不用HTML5去模擬組件了。React-Native使用css來構建頁面布局，使用Native iOS Components給我們提供強大的組件功能。目前已有組件如下圖：

二、使用CSS樣式 & Flexbox布局

第一篇，已經知道了如何構建工程。這里同樣創建一個HelloWorld工程。默認啟動界面如下圖：

1、基本樣式
這里使用View和Text組件作為演示對象，首先，修改index.ios.js里面的代碼，這里只需要關注StyleSheet和render里面的模板。修改后的代碼如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React=require('react-native');
var {
 AppRegistry,
 StyleSheet,
 Text,
 View,
}=React;
var HelloWorld=React.createClass({
 render: function() {
 return (
 <View>
 <View></View>
 </View>
 );
 }
});
var styles=StyleSheet.create({
});
AppRegistry.registerComponent('HelloWorld', ()=> HelloWorld);
這時候，你cmd + R刷新模擬器應該看到是空白的界面。現在，是展現css魅力的時候了。React-native使用的css 表達是一個JS自面量對象，并且嚴格區分該對象屬性的類型，所以要遵循對象的寫法，而不能使用以前css的寫法，這個需要自己熟悉了。
（1）增加一個帶邊框的矩形，紅色邊框
 直接在組件上添加樣式是這樣的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是組件的一個自有屬性，第一個{}JS執行環境或者說是模板，第二個{}只是css樣式對象的括號而已(慢慢體會,不難理解)。這樣修改后的代碼如下：
 render: function() {
 return (
 <View>
 <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>
 </View>
 </View>
 );
 }
 cmd ＋ R刷新模擬器，結果如下：

 (2)如何知道該組件支持哪些樣式呢？
 上面的已經很簡單了，作為web開發者用腳趾頭都能閉眼寫出來。如果我們需要知道該組件有哪些樣式，又不想查手冊，一個最為簡單的方法是，在樣式表里寫錯一個屬性，比如我寫一個沒有的屬性“border”。但是該屬性必須寫到樣式的創建中去，而不能寫為內聯樣式。寫成內聯樣式，你是看不到報錯提示的。我們改寫成樣式表創建類里面：
 var HelloWorld=React.createClass({
 render: function() {
 return (
 <View>
 <View style={styles.style_1}>
 </View>
 </View>
 );
 }
 });
 var styles=StyleSheet.create({
 style_1:{
 border: '1px solid red',
 height:40,
 borderWidth: 1, 
 borderColor: 'red',
 }
 });
 這個時候你就能齊刷刷地看到樣式表的報錯和提示有哪些樣式了，如下圖所示：

 （3）獨立樣式類
 其實上面已經展示了獨立樣式類了，那么樣式類創建很簡單，我們只需要使用React.StyleSheet來創建類。其實創建的類就是一個js對象而已。那么在組件上引用是這樣的<View style={{對象名稱.對象屬性}}></View>，就跟上面（2）的代碼一樣。
 2、說說Flexbox布局
 其實，這樣的css樣式，作為web開發者一用就會，那么說說布局的事兒。除去margin, padding, position等大家熟悉的web布局的話，最為重要的就是flexbox，目前支持的屬性如下,有6個：

 (1)先說flex屬性，上一段代碼
 var HelloWorld=React.createClass({
 render: function() {
 return (
 <View style={styles.style_0}>
 <View style={styles.style_1}></View>
 <View style={styles.style_1}></View>
 <View style={{flex:10}}></View>
 </View>
 );
 }
 });
 var styles=StyleSheet.create({
 style_0:{
 flex:1,
 },
 style_1:{
 flex: 5,
 height:40,
 borderWidth: 1, 
 borderColor: 'red',
 }
 });
 當一個(元素)組件，定義了flex屬性時，表示該元素是可伸縮的。當然flex的屬性值是大于0的時候才伸縮，其小于和等于0的時候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，因為沒有兄弟節點和它搶占空間。里層是3個view,可以看到三個view的flex屬性加起來是5+5+10=20,所以第一個view和第二個view分別占1／4伸縮空間， 最后一個view占據1／2空間，具體如下圖：

 (2) flexDirection
 flexDirection在React-Native中只有兩個屬性，一個是row(橫向伸縮)和column(縱向伸縮)。具體的效果可見如下代碼：
 var HelloWorld=React.createClass({
 render: function() {
 return (
 <View style={styles.style_0}>
 <View style={styles.style_1}>
 <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
 <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
 </View>
 <View style={[styles.style_1, {flexDirection: 'column'}]}>
 <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
 <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
 </View>
 <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
 <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>
 </View>
 </View>
 );
 }
 });
 var styles=StyleSheet.create({
 style_0:{
 flex:1,
 },
 style_1:{
 flex: 5,
 flexDirection: 'row',
 height:40,
 borderWidth: 1, 
 borderColor: 'red',
 }
 });
 具體的效果如下：

 (3)alignSelf:對齊方式
 alignSelf的對齊方式主要有四種：flex-start、 flex-end、 center、 auto、 stretch。看看代碼，應該就很清楚了：

 效果如下圖