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

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

React Ntive 学习手记的更多相关文章

  1. Linux.NET学习手记(7)

    前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...

  2. Linux.NET学习手记(8)

    上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...

  3. 关于《Linux.NET学习手记(8)》的补充说明

    早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...

  4. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  5. 【学】React的学习之旅1

    React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...

  6. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  7. EF框架学习手记

    转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...

  8. ExtJS MVC 学习手记3

    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...

  9. ExtJS MVC学习手记

    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...

随机推荐

  1. 抽象类&接口

    抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 在Java中抽象 ...

  2. (转)tar.xz文件如何解压

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数Linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...

  3. 在oracle里写各种语句得心应手,但是在mybatis.xml文件里呢?

    这个问题我让我搞了大半天,实在气人,话不多说,直接上代码 <select id="*" resultMap="Blog" parameterType=&q ...

  4. UML(统一建模语言)

    需求分析阶段 用例图 定义:用例图并不是用来描述用例的.用例图的主要作用是:直观地描述系统对外提供的功能. 用例图的三个要素:角色.系统.用例 用例图的关系: 角色和用例的关系:有关和无关 用例和用例 ...

  5. 用CSS3在手机上写弹出框,遮盖层

    html: 在页面头部要写 <title>网上预约</title> <link href="../App_Themes/default/css/header.c ...

  6. 纯JS实现中国行政区域上下联动选择地址

    一.实现目的: 如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动.此篇中将介绍如何使用JS实现相同功 ...

  7. ios label上显示特殊字符 % "

    今天在label上显示一个拼接的百分比 label.text = [NSString stringWithFormater:@"%d%",i]; 结果后面的%就是报错,然后查半天也 ...

  8. 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?

    webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...

  9. Android开发学习---如何写数据到外部存储设备(sd卡),Environment.getExternalStorageDirectory,怎么获取sd卡的大小?

    本文主要介绍如何写数据到sd卡,这里主要到的技术是Environment中的方法. 1. 2.实现代码: /datasave/src/com/amos/datasave/savePasswordSer ...

  10. 安装swoole 扩展,在phpinfo中显示,但是php -m 中不显示的问题

    步骤如下: 1 首先找到php.ini的目录:linux命令:find / -name php.ini 我的路径如下: