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 ...
随机推荐
- Linux学习Day5:Vim编辑器、配置网卡、配置Yum软件仓库
今天首先学习Vim编辑器的使用,通过它可以对Linux系统的文件进行编写和修改.在Linux系统中一切都是文件,所以熟练掌握Vim编辑器的使用十分重要.最后通过配置主机网卡的实验,来加深Vim编辑器中 ...
- KINDLE 小说下载--超级书库
网址:https://shuayouxi.cn/
- for循环嵌套练习题or99乘法表
//输出1-10之间的和 public static void whileTest(){ //定义变量用于存储不断变化的和 int sum = 0; //定义变量,用于记录不断变化的被加数 int x ...
- 将short类型转换为char类型
void short2char(uint8_t *arr1, uint16_t *arr2, int len) { ; ; for (x; x < len; x++) { arr1[x++] = ...
- php压缩文件zip格式并打包(单个或多个文件压缩)
最近接到一个需求,就是选择多个文件下载时,不要一个一个下载,直接把多个文件打包成一个文件进行下载.我们项目是前后端分离,所以我写了个接口,让前端传参数,后台下载. 废话不多说,直接上代码: 先是压缩单 ...
- 【IDE】IDEA - 使用问题记录
1.显示方法API:类似eclipse把鼠标放到方法上有api信息. setting/keymap中搜索 quick docs:(有说默认快捷键是ctrl+q,但我的不是待查找快捷键) 2.forea ...
- mac 电脑画图软件相关
sketchbook 免费但是不太好用 sketch, https://www.newasp.net/soft/327640.html 注意:安装前,请开启任何来源.OS X 10.12 及以上版本请 ...
- 覆盖的面积 HDU - 1255 线段树+扫描线+离散化 求特定交叉面积
#include<cstdio> #include<map> #include<algorithm> using namespace std; ; struct N ...
- svn error: "Previous operation has not finished; run 'cleanup' if it was interrupted"
出现这种问题,有几个原因 1.本身文件确实是锁住了 2.之前clean up 过很多次,但是每次都可能以失败告终,造成work queue存在缓存队列 3.svn lock 有lock记录 以下是简单 ...
- 1.Docker Compose
一.Docker Compose 简介 概述 Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排.从功能上看,跟 OpenStack 中的 Heat 十 ...