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. iptables配置管理

    iptables规则 内核netfilter的规则: iptables的规则: 基本操作 实践:往iptables中插入一条规则:禁止基于端口号为22的所有客户端访问(等于是禁止基于SSH的客户端连接 ...

  2. mybatis基础(中)

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

  3. Web前端 Web前端和Web后端的区分

    一.绪论 1. 前台:呈现给用户的视觉和基本的操作. 后台:用户浏览网页时,我们看不见的后台数据跑动.后台包括前端.后端. 前端:对应我们写的html.css.javascript 等网页语言作用在前 ...

  4. mac下 将python2.7改为python3

    1.查看当前电脑python版本 python -V // 显示2.7.x 2.用brew升级python brew update python 3.如果安装成功,去系统目录下回看到两个版本的pyth ...

  5. 参观微软Serbia开发中心和Office365 2019-01-31活动感悟

    这是<国外线下技术俱乐部建设>系列文章之一.   该活动网址是:https://www.meetup.com/ITPro-Serbia/events/258352104/ 活动内容是讲Of ...

  6. Python开发爬虫之静态网页抓取篇:爬取“豆瓣电影 Top 250”电影数据

    所谓静态页面是指纯粹的HTML格式的页面,这样的页面在浏览器中展示的内容都在HTML源码中. 目标:爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/t ...

  7. C++ 11 创建和使用共享 weak_ptr

    1.为什么需要weak_ptr? 在正式介绍weak_ptr之前,我们先来回忆一下shared_ptr的一些知识.我们知道shared_ptr是采用引用计数的智能指针,多个shared_ptr实例可以 ...

  8. 多层json的构造,取值,还有使用bootstrap的tree view在前端展示的相关问题

    bootstrap-tree view是一款非常好用的插件,它可以添加任意多层节点,效果如下所示: 使用之前需要在HTML页面添加依赖文件: <link href="bootstrap ...

  9. Ubuntu 把最小化、最大化和关闭按钮放到右边

    1.按下"Ctrl+Alt+T"或者"ALT+F2"调出终端 2.输入"gconf-editor",回车.如果未安装gconf-editor ...

  10. phpstorm ftp主动模式能连接上,但获取不到目录;

    前面一直都在使用ST做开发,但是也想试试传说中的phpstorm神器.一切都弄好了,想使用它的远程开发功能,省去我本地开发然后再ftp上传做法. 但是却遇到了这个问题,困扰了我三四天!!!我各种百度都 ...