react-navigation 简介
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 简介的更多相关文章
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [RN] 04 - React Navigation
react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React-native 导航插件React Navigation 4.x的使用
React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...
- [RN] React Navigation 使用中遇到的显示 问题 汇总
React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d
随机推荐
- 四大机器学习编程语言对比:R、Python、MATLAB、Octave
本文作者是一位机器学习工程师,他比较了四种机器学习编程语言(工具):R.Python.MATLAB 和 OCTAVE.作者列出了这些语言(工具)的优缺点,希望对想开始学习它们的人有用. 图源:Pixa ...
- 驰骋工作流引擎JFlow与activiti的对比之2种结构化模式
1. 任意循环(Arbitrary Cycles) ACTIVITI : 某一个或多个活动可以反复执行. 例子:用户买了瓶汽水,拿到汽水后,中了一瓶,又去兑换了一瓶汽水,如果又中了,再去兑换一瓶汽水- ...
- Android人脸识别App(带web上传注册信息)
人脸识别+本机Web后端人脸sdk采用虹软sdk,本机web采用AndServer:上传姓名+人脸图片即可实现注册源码地址:https://github.com/joetang1989/ArcFace ...
- [aspnetcore.apidoc]一款很不错的api文档生成工具
AspNetCore.ApiDoc 简单徐速一下为什么选用了aspnetcore.apidoc 而没有选用swagger 最初我们也有在试用swagger,但总是有些感觉,感觉有点不满意,就但从api ...
- PM过程管理成熟度1级
之前,我已经从项目实现的角度.企业管理诉求两方面,分析了PM的核心能力架构,以及其在过程管理方面的能力等级.接下来,Fancier凡奉信息会站在PM能力成长的角度,横向与纵向阐述每一成熟度等级PM的过 ...
- ubuntu中使用机密数据Secrets
目录 AptNetCore使用Secrets管理私密数据 前言 使用 设置UserSecretsId 设置机密 代码中访问机密 脚注 AptNetCore使用Secrets管理私密数据 前言 在项目中 ...
- 详解 OneAlert 排班可以帮你做什么
排班的存在,实质是通过有序安排,降低企业/团队人力成本,提升工作效率. 阅读导航(预计2min) 1. 详解排班功能 轮班机制 工作时间 双视图展示 灵活调整 2. 利用排班如何助力运维团队 排班 ...
- [20190409]pre_page_sga=true与连接缓慢的问题.txt
[20190409]pre_page_sga=true与连接缓慢的问题.txt --//曾经遇到11g下设置pre_page_sga=true启动缓慢的问题(没有使用hugepages).--//链接 ...
- SQLServer之创建视图
视图定义 视图是一个虚拟的表,是一个表中的数据经过某种筛选后的显示方式,视图由一个预定义的查询select语句组成. 使用SSMS数据库管理工具创建视图 1.连接数据库,选择数据库,展开数据库-> ...
- iOS pthread
pthread 是属于 POSIX 多线程开发框架 创建线程的方法:pthread_create 参数含义: 1.指向线程代号的指针 2.线程的属性 3.指向函数的指针 4.传递给该函数的参数 返 ...