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
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
React Ntive 学习手记的更多相关文章
- Linux.NET学习手记(7)
前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
- Linux.NET学习手记(8)
上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
- 关于《Linux.NET学习手记(8)》的补充说明
早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- 【学】React的学习之旅1
React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- EF框架学习手记
转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...
- ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
- ExtJS MVC学习手记
开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
随机推荐
- 抽象类&接口
抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 在Java中抽象 ...
- (转)tar.xz文件如何解压
XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数Linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...
- 在oracle里写各种语句得心应手,但是在mybatis.xml文件里呢?
这个问题我让我搞了大半天,实在气人,话不多说,直接上代码 <select id="*" resultMap="Blog" parameterType=&q ...
- UML(统一建模语言)
需求分析阶段 用例图 定义:用例图并不是用来描述用例的.用例图的主要作用是:直观地描述系统对外提供的功能. 用例图的三个要素:角色.系统.用例 用例图的关系: 角色和用例的关系:有关和无关 用例和用例 ...
- 用CSS3在手机上写弹出框,遮盖层
html: 在页面头部要写 <title>网上预约</title> <link href="../App_Themes/default/css/header.c ...
- 纯JS实现中国行政区域上下联动选择地址
一.实现目的: 如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动.此篇中将介绍如何使用JS实现相同功 ...
- ios label上显示特殊字符 % "
今天在label上显示一个拼接的百分比 label.text = [NSString stringWithFormater:@"%d%",i]; 结果后面的%就是报错,然后查半天也 ...
- 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?
webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...
- Android开发学习---如何写数据到外部存储设备(sd卡),Environment.getExternalStorageDirectory,怎么获取sd卡的大小?
本文主要介绍如何写数据到sd卡,这里主要到的技术是Environment中的方法. 1. 2.实现代码: /datasave/src/com/amos/datasave/savePasswordSer ...
- 安装swoole 扩展,在phpinfo中显示,但是php -m 中不显示的问题
步骤如下: 1 首先找到php.ini的目录:linux命令:find / -name php.ini 我的路径如下: