Navigator已经被React Native废弃了。也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到。不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的,值不值得用。

react-navigation包括下面三个Navigator:

  • StackNavigator: 这个组件是用来代替之前的Navigator的。凡是维持一种“先进后出”的栈式导航的话就可以用这个。
  • TabNavigator:这个组件和iOS的`TabBarController。看起来是这样的。
  • DrawerNavigator:这个组件就是抽屉式的导航菜单。在React Native里只有Android才有:DrawerLayoutAndroid,在iOS里是没有的。有了DrawerNavigator,两个平台都可以用了。

最简单的用法:

import { StackNavigator } from "react-navigation";
export default NavHome = StackNavigator({
Home: {
screen: NavApp,
},
Message: {
screen: MessageContainer,
},
})

实现页面间的跳转:

StackNavigator(RouteConfigs, StackNavigatorConfig)我们需要配置navigationOptions
//App.js 页面
<Button onPress={this.props.navigation.navigate('Message')} title={'To message'} /> //MessageContainer.js
<Button onPress={this.props.navigation.goBack()} title={'Go Back'} /> Home: {
screen: App,
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: (<Button onPress={() => navigation.navigate('DrawerToggle')} title={'User'} />),
headerRight: (<Button onPress={() => navigation.navigate('Message')} title={'Message'} />),
})
},

react-native填坑--react-navigation的更多相关文章

  1. React Native 填坑一

    React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justif ...

  2. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  3. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  4. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

  5. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  6. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  7. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  8. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

  9. React Native填坑之旅--动画

    动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...

  10. React Native填坑之旅--Button篇

    从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...

随机推荐

  1. Codeforces Gym101606 E.Education (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    E Education 这个题有点意思,就是找满足条件的最小价格里的最大值的人数,有点贪心的思想吧,一开始写错了,人群的那个不能排序,而且是最小价格里找能住下人最多的部门,让这个部门去住这个房间.在循 ...

  2. SQL盲注工具BBQSQL

    SQL盲注工具BBQSQL   SQL注入是将SQL命令插入到表单.域名或者页面请求的内容中.在进行注入的时候,渗透测试人员可以根据网站反馈的信息,判断注入操作的结果,以决定后续操作.如果网站不反馈具 ...

  3. Mybatis Generator插件和PageHelper使用

    最近,开始接触web项目开发,项目使用springboot和mybatis,以前一直以为开发过程中实体类,mybatis的xml文件都需要自己手动的去创建. 同事推荐说Mybatis Generato ...

  4. 使用viewPage实现图片轮播

    概述 图片循环播放这种效果,在许多的场合都能看到,只要一打开各大主流网站的首页几乎都有一个这样的组件,它可以很显目的提供给用户最近最火热的信息.因为它应用得如此之广泛,今天,我们就来写一下这个组件. ...

  5. Mybatis原理分析一 从JDBC到Mybaits

    1.引言 本文主要讲解JDBC怎么演变到Mybatis的渐变过程,重点讲解了为什么要将JDBC封装成Mybaits这样一个持久层框架.再而论述Mybatis作为一个数据持久层框架本身有待改进之处. 2 ...

  6. 远程的jmeter自动执行完,如何回调通知被调用者“结束”状态

    场景:python应用通过paramiko在远程服务器上启动jmeter执行性能压测,压测完,jmeter通过回调函数告诉应用‘执行状态’ 方案:python应用写一个restful api,接收jm ...

  7. GridView数据绑定控件的模版列时设置显示的格式

    形式 语法 结果 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $12.3656   货币 "¥{0:N2}&q ...

  8. Oracle-31-对视图DML操作

    一.对视图进行DML操作 1.创建一个视图v_person create or replace noforceview v_person as select *from person where id ...

  9. (学习笔记3)BMP位图的读取与显示

    在(学习笔记2)中.我们已经具体说明怎样去创建MFC.在这节中.主要解决BMP位图照片的读取和显示问题. 我们新建一个projectdemo1.创建步骤请看(学习笔记2)中具体说明. 创建成功后,例如 ...

  10. 关于在 C#中无法静态库引用的解决方法

    在VS中用C#写了个类库,后面想转成静态库发现没有直接的方法,原来在C++中可以,而C#中不支持. 但是有时候程序引用C#编写的动态库觉得用户体验不好太累赘,想要简单只发一个exe可执行程序给用户就好 ...