RN开发-Navigator
1、在入口组件render方法中返回<Navigator>
let defaultName = 'Welcome';
let defaultCompenent = Welcome;
<Navigator
initialRoute={{name:defaultName,component:defaultCompenent}}
/*configureScene={
(route) => {
//页面转跳动画 node_modules/react-native/Libraries/CustomComponent/navigate/
return Navigator.SceneConfig.VerticalDownSwipeJump;
}
}*/
renderScene={
(route,navigator)=>{
let Component = route.component;
return <Component {...route.params} navigator={navigator}></Component>;
}
}
/>
2、在Welcom组件的点击事件中修改转跳页面信息并添加参数
pressButton(){
const {navigator} = this.props;
const self = this;
/* 上文中,<Component {...route.params} navigator={navigator} 中传递了navigator作为props */
if(navigator){
navigator.push({
name: 'Detail',
component: Detail,
params:{
author:this.state.author,
user:this.props.user,
getResult: function(res){
self.setState({
result:res
})
}
}
})
}
}
3、在Detail组件中携带参数返回
(1)、接收参数
//生命周期方法
componentDidMount(){
this.setState({
author:this.props.author,
user:this.props.user
});
}
(2)、携带参数返回
backButton(){
const {navigator} = this.props;
if(this.props.getResult){
let result = USER_MODELS[1];
this.props.getResult(result);
}
if(navigator){
// 入栈出栈,把当前页面pop掉
navigator.pop();
}
}
RN开发-Navigator的更多相关文章
- iOS原生混合RN开发最佳实践
iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 ...
- 基于RN开发的一款视频配音APP(开源)
在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...
- RN开发第二天
今天上午配置了windows的Android的环境,下载node,Python,安装Android SDK和Android studio,JSK,然后配置用户变量和系统变量,然后npm install ...
- RN 开发工具及发布release版本
2.1.开发工具推荐visual studio code https://code.visualstudio.com/docs/?dv=win 选择安装react native tool 就可以了 2 ...
- RN开发-Android原生交互
在使用RN开发过程中,难免有些原生功能需要要自己来实现,下面总结一下在使用RN与原生开发交互. 1.在原生代码中定义实现类 1.1 首先继承 ReactContextBaseJaveModule抽象 ...
- RN开发-IDE和API
一.开发工具 1.Visual Studio Code:微软IDE,轻量级,只有30+M大小 2.nuclide :仅支持Mac 3.WebStorm : JavaScript开发工具(IDE) 二. ...
- RN开发中的报错以及告警
报错一: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRES ...
- RN开发-Linux开发环境搭建(Ubuntu 12.04)
1.首先安装JDK 2.安装Android开发环境 3.安装node.js 3.1 官网下载 : node-v6.9.1-linux-x64 3.2 添加环境变量 sudo vi /etc/profi ...
- RN开发-组件View,Text
1.外联js文件(RN自定义组件) module.exports=Header; 导出模块 const Header=require('./header'); 导入外部j ...
随机推荐
- 回炉重造之重读Windows核心编程-003-内核对象
内核对象是个比较难理解的概念,问题的根源就在于即使是<核心编程>书中也没有说清楚它的定义,只是不停地举例和描述它的性质,还有如何使用. 盲人摸象,难见全貌.只能尽可能列举它的性质,注意使用 ...
- everspin最新1Gb容量扩大MRAM吸引力
everspin提供了8/16-bit的DDR4-1333MT/s(667MHz)接口,但与较旧的基于DDR3的MRAM组件一样,时序上的差异使得其难以成为DRAM(动态随机存取器)的直接替代品. ...
- Edge Chromium 中如何始终允许运行 Flash 内容
众所周知,由于 Adobe Flash 控件历史久远,积累了许多漏洞.早在2017年7月,Adobe就宣布了要在2020年底终止对 Flash 的支持.微软称其浏览器移除 Flash 插件的最后期限是 ...
- markdown语法链接新页面打开
我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...
- 如何在Idea中使用Git将项目代码上传到码云
参考链接:https://blog.csdn.net/zzybbh/article/details/88172140
- node模块化开发基本知识学习笔记
传统非模块化开发缺点: 1.命名冲突 2.文件依赖 标准的模块化规范: 1.AMD-requirejs 2.CMD-seajs 服务器端模块化规范: 1.CommonJS-Node.js 模块化相关的 ...
- Ubuntu禁用root账号,开启Ubuntu密钥登录
新建普通用户 ## 新建普通用户 $ adduser ubuntu $ apt-get install sudo ## 将用户加入sudo组 $ usermod -a -G sudo ubuntu 为 ...
- 基于Docker的Consul集群实现服务发现
服务发现 其实简单说,服务发现就是解耦服务与IP地址之间的硬绑定关系,以典型的集群为例,对于集群来说,是有多个节点的,这些节点对应多个IP(或者同一个IP的不同端口号),集群中不同节点责任是不一样的. ...
- Balanced Lineup POJ - 3264
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- Linux教程-修炼
在2020这个特殊的时期,在家就是为国家做贡献!一切都会好起来的,加油中国!! Linux 第1章 Linux 简介 1.1 为什么要学习Linux 1.2 Linux是什么 1.3 Linux 与 ...