react-navigation学习笔记
1.关于this.props.navigation.navigate()与this.props.navigation.push()的区别
navigate方法在跳转时会在已有的路由堆栈中查找是否已经存在该值,若存在将直接跳转到之前存在的地址。并且只有当路由堆栈中不存在这个新路由时才会添加。此情况下使用this.props.navigation.popToTop()方法无法生效。 push方法则总是向路由堆栈中添加,无论之前是否存在。此时使用this.props.navigation.popToTop()方法可以达到回到栈顶路由的位置。
2.路由传参
this.props.navigation.push('路由名称',{ '参数名': '值',[ 其他参数]})
3.获取参数
this.props.navigation.getParam('参数名',[默认值])
this.props.navigation.setParams({otherParam: 'Updated!'})
import { withNavigation } from 'react-navigation';
// 然后将需要访问路由的组件用该方法包裹,如
withNavigation(‘组件名’)
6.替换路由
this.props.navigation.replace();
7.定义动态路由
const SimpleApp = createStackNavigator({
Home: { screen: HomeScreen },
Chat: {
screen: ChatScreen,
path: 'chat/:user', //传参数的规则
},
});
8.URI前缀
const SimpleApp = createStackNavigator({...}); const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; const MainApp = () => <SimpleApp uriPrefix={prefix} />;
9.核心方法
createStackNavigator: 一次渲染一个屏幕并提供屏幕之间的转换。打开新屏幕时,它将放置在堆栈顶部
createBottomTabNavigator: 呈现一个标签栏,允许用户在多个屏幕之间切换
createSwitchNavigator: 在一个屏幕和另一个屏幕之间切换,顶部没有UI,当它们变为非活动状态时卸载屏幕
react-navigation学习笔记的更多相关文章
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- React Native学习笔记
React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码. 组件通过props属性传递不变化的内容,UI通过state属性变动来 ...
- React Native学习笔记之2
1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...
随机推荐
- vue 弹性布局 实现长图垂直居上,短图垂直居中
vue 弹性布局 实现长图垂直居上,短图垂直居中 大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class=" ...
- [蓝桥] 历届试题 错误票据 (List用法,空格处理)
时间限制:1.0s 内存限制:256.0MB 问题描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人 ...
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
- 3、My Scripts
.用for循环批量修改文件扩展名(P240) .使用专业改名命令rename来实现 .通过脚本实现sshd.rsyslog.crond.network.sysstat服务在开机时自动启动(P244) ...
- 【译】第42节---EF6-DbSet.AddRange & DbSet.RemoveRange
原文:http://www.entityframeworktutorial.net/entityframework6/addrange-removerange.aspx EF 6中的DbSet引入了新 ...
- ubuntu14.04 Keras框架搭建
>>>sudo su >>> pip3 install -U --pre pip setuptools wheel >>> pip3 instal ...
- testin 测试用例管理平台
应用信息:应用图标,应用名称,版本号,应用包名,系统平台[Android,ios,Web/H5,小程序,快应用]项目成员:成员帐号[邮箱],成员姓名,成员角色,成员职位,状态[激活,未激活],操作[移 ...
- nodejs项目安装ant design
1.确保安装好nodejs $ node --version v10.4.1 2.确保npm $ npm -v 6.1.0 3.安装 $ sudo npm install antd-init -g / ...
- [转][linux]简单的linux下的tcp/udp
转自:https://blog.csdn.net/cabing2005/article/details/53068880 详细函数以及参数解释请看原链接. windows下的tcp/udp参考:htt ...
- npm升级package.json依赖包到最新版本号
转载自:https://blog.csdn.net/syaivin/article/details/79388244?utm_source=blogxgwz1 1.安装: npm install -g ...