设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2645|回复: 350

[视频教程] 14、手把手教React Native实战之Navigator组件初探

  [复制链接]

401

主题

762

帖子

6662

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6662
发表于 2016-6-16 13:14:07 | 显示全部楼层 |阅读模式
#14、手把手教React Native实战之Navigator组件初探

一个应用往往是由多功能视图组成!多页面的切换:路由或导航

在RN中专门负责视图切换的组件:Navigator,NavigatorIOS

加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码


导航器对比:

Navigator和NavigatorIOS都可以用来管理应用中“场景”的导航(也可以称作屏幕)。导航器建立了一个路由栈,用来弹出,推入或者替换路由状态。它们和html5中的history API很类似。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类,而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOS和Android,而NavigatorIOS只能用于iOS。

NavigatorIOS
轻量、受限的API设置,使其相对Navigator来说不太方便定制。
由开源社区主导开发 —— React Native的官方团队并不在自己的应用中使用。
对于大多数正式的App开发,我们建议使用Navigator —— 使用NavigatorIOS实现复杂的需求很容易碰到麻烦。

导航器通过路由对象来分辨不同的场景。利用renderScene方法,导航栏可以根据指定的路由来渲染场景。
可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。

最后的几行: renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

这里是每个人最疑惑的,我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货,navigator是一个Navigator的对象,为什么呢,因为它有push pop jump...等方法,这是我们等下用来跳转页面用的那个navigator对象。

return <Component {...route.params} navigator={navigator} />
这里有一个判断,也就是如果传递进来的component存在,那我们就是返回一个这个component,结合前面 initialRoute 的参数,我们就是知道,这是一个会被render出来给用户看到的component,然后navigator作为props传递给了这个component。

所以下一步,我们可以直接拿到这个 props.navigator:


##14、配套视频(下载地址):
游客,如果您要查看本帖隐藏内容请回复

react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

56

帖子

126

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
126
发表于 2016-6-16 19:07:41 | 显示全部楼层
学习中
回复

使用道具 举报

0

主题

5

帖子

28

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
28
发表于 2016-6-16 19:11:59 | 显示全部楼层
来支持一下
回复 支持 反对

使用道具 举报

0

主题

181

帖子

414

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
414
发表于 2016-6-17 13:34:21 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

8

主题

57

帖子

222

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
222
发表于 2016-6-17 22:38:04 | 显示全部楼层
支持论坛!!!!
回复

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
203
发表于 2016-6-23 21:22:23 | 显示全部楼层
顶顶顶顶顶
回复 支持 反对

使用道具 举报

2

主题

35

帖子

116

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
116
发表于 2016-6-28 11:40:54 | 显示全部楼层
ddddddddddddddddddddddddddddddddddddddddddd
回复 支持 反对

使用道具 举报

7

主题

254

帖子

695

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
695
发表于 2016-6-28 18:53:44 | 显示全部楼层
舒服的所得税发个非官方的奋斗过
回复 支持 反对

使用道具 举报

0

主题

11

帖子

44

积分

新手上路

Rank: 1

积分
44
发表于 2016-6-28 22:22:15 | 显示全部楼层
hao very好  长知识
回复 支持 反对

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-7-1 11:09:06 | 显示全部楼层
component props  父传子
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-1-19 11:59 , Processed in 0.169891 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表