StackNavigator:

原理和浏览器相似但又有局限,浏览器的方式是开放性的,通过点击一个链接可以跳转到任何页面(push),
点击浏览器后退按钮,返回到前一个页面(pop)。
StackNavigator也就是一个路由栈, 这个路由栈的原理和浏览器一样,跳转到一个新页面 push,返回就是pop,
有一个明显的区别是,浏览器中的链接有无数个,点击就可以跳转,不需要实现声明有哪些链接。
在StackNavigator中,必须事先声明这个app中有哪些页面(对应浏览器中的链接),你不能跳转到一个没有事先声明的
页面(即便这个页面在app中存在)。声明的第一个页面默认进入路由栈。
简单用法:

import { StackNavigator } from 'react-navigation';
import Page1 from './page1'
import Page2 from './page2'
import Page3 from './page3'

export default StackNavigator({
    //声明列表:
    //路由名:{页面:页面组件}
    Page1: { screen: Page1},
    Page2: { screen: Page2},
    Page3: { screen: Page3}
},{/*其他的配置*/});

所有在 StackNavigator 中声明的页面,都自动绑定了一个 navigation 属性,
navigation是一个对象,包含很多方法和属性,常用的 就是跳转到新页面和返回:

class Page1 extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Page2 Screen</Text>
        <Button
          title="Go to Page2... again"
          //跳转到Page2页面
          onPress={() => this.props.navigation.navigate('Page2')}
        />
        <Button
          title="Go back"
          //返回上一个页面
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

跳转页面是可以附带参数的,比如:
this.props.navigation.navigate('Page2',{name:'lisa',age:28})
在Page2页面可以通过 this.props.navigation.state.params.name获取对应的值

有些没有在 StackNavigator 中声明的组件页面,无法获取到 navigation 属性,想要
使用 navigation 有两个办法,通过父组件传递 navigation 属性,还可以通过下面这种方式:

import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

export default withNavigation(MyBackButton);

StackNavigator 深度连接 (在浏览器或者其他app中通过url链接唤醒 app到指定页面)
文档介绍:https://reactnavigation.org/docs/deep-linking.html

react-navigation 简介的更多相关文章

  1. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  2. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  3. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  4. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  5. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  6. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. [RN] 04 - React Navigation

    react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...

  8. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  9. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  10. [RN] React Navigation 使用中遇到的显示 问题 汇总

    React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d

随机推荐

  1. mybatis基础(中)

    数据模型分析思路 每张表记录的数据内容 分模块对每张表记录对内容进行熟悉,相当于学习系统需求(功能)的过程 每张表重要的字段设置 非空字段.外键字段 数据库级别表与表之间的关系 外键关系 表与表之间的 ...

  2. Python 面向对象之反射

    Python 面向对象之反射 TOC 什么是反射? hasattr getattr setattr delattr 哪些对象可以使用反射 反射的好处 例子一 例子二 什么是反射? 程序可以访问.检查和 ...

  3. 前端入门19-JavaScript进阶之闭包

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  4. json 按照字段分类

    let arr = [ { Category:'A', Amount:, },{ Category:'B', Amount:, },{ Category:'A', Amount:, },{ Categ ...

  5. vue结合axios使用入门

    Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios axios安装 npm: $ npm install axios bower: $ bower install axio ...

  6. Android studio,第一个生成,调用成功的jni(说多了都是泪)

    0x01 序言: 泪从何处说起呢?其实很早以前就用过android studio写过c++,但是,但是一直没有成功生成过so文件,所以心中一直有一个纠结...为什么不成功呢... 直到今天,由于工作的 ...

  7. git 的 origin 的含义

    我们从progit 一书中可以看到: 远程仓库名字 “origin” 与分支名字 “master” 一样,在 Git 中并没有任何特别的含义一样. 同时“master”是当你运行git init时默认 ...

  8. 关于sqlserver字符类型查询条件区分大小写

    在写sql的查询时 如下: select * from Users where username='WangE' select * from Users where username='wange' ...

  9. c/c++ llinux epoll系列4 利用epoll_wait实现非阻塞的connect

    llinux epoll系列4 利用epoll_wait实现非阻塞的connect connect函数是阻塞的,而且不能设置connect函数的timeout时间,所以一旦阻塞太长时间,影响用户的体验 ...

  10. Serverless架构

    什么是Serverless架构 Servlerless 架构是新兴的架构体系,在Serverless 架构中,开发者无需考虑服务器的问题,计算资源作为服务而不是服务器的概念出现,这样,开发者只需要关注 ...