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
随机推荐
- 用JS编写一个函数,返回数组中重复出现过的元素
用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: , , , , , , , ]; var getRepeat = function (arr) { var obj = {}; , le ...
- linux学习笔记-配置vbox虚拟机本地连接和外网同时可用
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 在设置网络里面启用两个网卡,一个桥接,一个网络地址转换 archlinux系统下第一个网络地址转换,第二个桥接 centos7系 ...
- APIO 2018游记
并不是很想写游记 在考场上做了四个小时的T1T2,T3没开 出考场听zrz讲T3的时候差点气死 难度顺序为1 > 2 > 3什么鬼 不过最后还是出乎意料的混到了一块铜牌 两天的培训好评(虽 ...
- 从.Net到Java学习第十二篇——SpringBoot+JPA提供跨域接口
从.Net到Java学习系列目录 最近又撸了半个月的前端代码,做app离线存储,然后又花了一周去将过去的wcf项目转webapi,java又被落下了,总感觉我特么像斗地主中的癞子牌,变来变去..... ...
- 自定义switchButton
这篇博客要讲的是自定义switchButton,不过没有设置动画效果. 我用GradientDrawable来绘制switchButton,我们先看看最终的效果: 点击前: 点击后 接下来我们看看如何 ...
- 通过fromdata实现上传文件
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下. 之前也用node写过对文件处理方面的东西,这次用php写着试一下. a.html文件 <!DOCTYPE ht ...
- ionic3 导航的应用(页面跳转与参数传递)
about.html(跳转页面) <ion-content padding> <ion-list> <ion-item *ngFor="let he of co ...
- [Android][Recovery] Recovery下找不到sdcard路径
做升级的时候,把更新包拷贝到sd卡中,然后调用接口进行重启升级 wossoneri.github.io File update_file = new File("/sdcard/update ...
- PJSUA2开发文档--第五章 帐户(号)Accounts
第五章 帐户(号) 帐户提供正在使用该应用程序的用户的身份(或身份).一个帐户有一个与之相关的SIP统一资源标识符(URI).在SIP术语中,该URI用作该人的记录地址( Address of Rec ...
- 使用Python的列表推导式计算笛卡儿积
笛卡儿积: 笛卡儿积是一个列表, 列表里的元素是由输入的可迭代类型的元素对构 成的元组,因此笛卡儿积列表的长度等于输入变量的长度的乘积, 如下图: 如果你需要一个列表,列表里是 3 种不同尺寸的 T ...