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. 我的js为什么会触发两次

    $(function() { $(".show").off("click").on("click",function(e){ e.preve ...

  2. 【ZJOI2017】树状数组

    题目描述 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的 OI 比赛经历.那是一道基础的树状数组题. 给出一个长度为 $n$ 的数组 $A$,初始值都为 $0$,接下来 ...

  3. BZOJ 2131 [scoi2010] 传送带

    @(BZOJ)[三分法] Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段. 两条传送带分别为线段AB和线段CD. lxhgww在AB上的移动速度为P,在CD上的移 ...

  4. openssl转换各种证书的语法收集

    参考网址:https://www.sslshopper.com/ssl-converter.html 个人总结:先找准要生成什么证书先,尤其是正规购买的流程与openssl生成的不一样,所以先确定是什 ...

  5. INDY9发送tstream

    INDY9发送tstream 首先都要发送stream.Size, 这是必须的. // 服务端 AThread.Connection.WriteInteger(stream2.Size); AThre ...

  6. can-i-win(好)

    https://leetcode.com/problems/can-i-win/ package com.company; import java.util.*; class Solution { / ...

  7. Utuntu 和 window共享文件

    由于自己想用服务器跑代码,数据集和模型一般都在本机电脑上,用实验室服务器需要拷贝数据或者,在服务器上重新下载数据很麻烦 都在局域网内可以实现文件共享,代码和数据都在本地,共享给服务器,只需要使用服务器 ...

  8. HDU 5304(Eastest Magical Day Seep Group&#39;s Summer-环加外向树生成树计数)[Template:Kirchhoff矩阵]

    Eastest Magical Day Seep Group's Summer Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 655 ...

  9. tcp ip协议笔记(1)——简单介绍

    前言 本人记性不佳,看书健忘,以此笔记来记录看书后自己所知所想,已达到加深对tcp ip的理解.本笔记不过我看完书后自己所写的总结,权当是书后复习. 一.为什么会有tcp ip协议        ...

  10. react 调用 function 的写法 及 解决 react onClick 方法自动执行

    1.react 调用方法的写法 (1)方式一 onClick={this.getFetchData.bind(this,item.id)} (2)方式二 getFetchData(e){ this.s ...