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来获取默认的动画和更多的场景配置选项。

功能明确，这里说一下使用：

官方的基本用法在我看来还是比较抽象的（好吧，我比较菜 - -!）

先来看一个明了点的栗子：

class demo extends Component {
  // 配置页面切换效果方法
  configureScene(route) {
    return Navigator.SceneConfigs.FloatFromBottom;
  }
  // 配置页面跳转路由
  renderScene(route, navigator) {
    var Component = null;
    switch (route.name) {
      case 'first':
        Component = FirstPageComponent;
        break;
      case 'second':
        Component = SecondPageComponent;
        break;
      default :
        Component = DefaultPageComponent;
    }
    return <Component navigator={navigator}/>
  }
  // 渲染导航器
  render() {
    return (
      <Navigator
        initialRoute={{name:'first'}}         // 设置默认路由
        configureScene={this.configureScene}  // 设置导航器跳转方式
        renderScene={this.renderScene}        // 设置导航器路由
        style={styles.navigator}              // 设置导航器样式
        />
    );
  }
}

上面这个栗子还是比较清晰的，

这里介绍 Navigator 的几个基本属性：

initialRoute object 

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。

initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

configureScene function 

可选的函数，用来配置场景动画和手势。

会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。

然后它应当返回一个场景配置对象

renderScene function 

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