zoukankan      html  css  js  c++  java
  • 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 

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

  • 相关阅读:
    剑指offer系列40:构建乘积数组
    自学网站
    存储分析--- 转载
    程序员面试宝典第四版
    资源查找
    诗句
    fifo manage
    charlse抓包
    python基础之-----列表list工厂的仓库
    python内置函数积累
  • 原文地址:https://www.cnblogs.com/guyunxiang/p/5262153.html
Copyright © 2011-2022 走看看