React Ntive 學習手記

React使今年來比較熱門的前端庫，之因此說是庫呢，由於React.js是應用於MVC中的V層，

它並非一個完整的MVC框架，因此，我也不知稱之爲框架了。

不過這並不影響React的火熱。

混合應用的發展也有很多時間了，我本身也參與了屢次混合應用開發。

從最初的移動前端webapp開發到內嵌應用中的傳統混合應用開發

再到成熟的前端混合應用開發框架的實踐——ionic

到現在面前的React Native.

都是在前端混合應用開發上越走越遠。

React Native 學習資料很少，國內比較全的像極客學院，ruanyf文章等，還有像晴明等人漢化的官網

我本身也嘗試了一些簡單React Native 項目開發。

這裏簡單記錄如下React Native的一個經常使用組件：導航器

導航器使控制着app頁面的跳轉，能夠說每一個應用的必須的組件。

官方介紹：

使用導航器能夠讓你在應用的不一樣場景（頁面）間進行切換。導航器經過路由對象來分辨不一樣的場景。利用renderScene方法，導航欄能夠根據指定的路由來渲染場景。

能夠經過configureScene屬性獲取指定路由對象的配置信息，從而改變場景的動畫或者手勢。查看Navigator.SceneConfigs來獲取默認的動畫和更多的場景配置選項。

功能明確，這裏說一下使用：

官方的基本用法在我看來仍是比較抽象的（好吧，我比較菜 - -!）

先來看一個明瞭點的栗子：

 1 class demo extends Component {
 2   // 配置頁面切換效果方法
 3   configureScene(route) {
 4     return Navigator.SceneConfigs.FloatFromBottom;
 5   }
 6   // 配置頁面跳轉路由
 7   renderScene(route, navigator) {
 8     var Component = null;
 9     switch (route.name) {
10       case 'first':
11         Component = FirstPageComponent;
12         break;
13       case 'second':
14         Component = SecondPageComponent;
15         break;
16       default :
17         Component = DefaultPageComponent;
18     }
19     return <Component navigator={navigator}/>
20   }
21   // 渲染導航器
22   render() {
23     return (
24       <Navigator
25         initialRoute={{name:'first'}}         // 設置默認路由
26         configureScene={this.configureScene}  // 設置導航器跳轉方式
27         renderScene={this.renderScene}        // 設置導航器路由
28         style={styles.navigator}              // 設置導航器樣式
29         />
30     );
31   }
32 }

上面這個栗子仍是比較清晰的，

這裏介紹 Navigator 的幾個基本屬性：

initialRoute object 

定義啓動時加載的路由。路由是導航欄用來識別渲染場景的一個對象。

initialRoute必須是initialRouteStack中的一個路由。initialRoute默認爲initialRouteStack中最後一項。

configureScene function 

可選的函數，用來配置場景動畫和手勢。

會帶有兩個參數調用，一個是當前的路由，一個是當前的路由棧。

而後它應當返回一個場景配置對象

renderScene function 

必要參數。用來渲染指定路由的場景。調用的參數是路由和導航器。