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 

必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。