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 ...
随机推荐
- clr via c# 参数和属性
1,可选参数和命名参数 当给参数指定默认值时,可以在调用的时候省略 有默认值的参数,必须放在所有没有默认值的参数后面,但是 参数数组必须放在最后面,parm 默认值必须时编译时能确定的常量值,对于值类 ...
- 思科路由器、交换机配置Console 线线序 (亲测可以)
网上有许多标准console线配置线序,在配置思科网络设备时都是不能用的,因为思科的console线序是专用的, 如下 水晶头侧 线序 B 白橙,橙,白绿,蓝 ,白蓝,绿,白粽,棕 对应串口侧线序 1 ...
- Java基础之三、类的特性和接口
类的派生.多态.抽象类.接口 1:派生-extends 派生就是继承已有类非私有的字段和方法等创建新的类,还可以添加.重写字段和方法: 在类的派生中,构造函数不可以被继承: 派生源的类-父类/基类/超 ...
- 吴裕雄--天生自然 R语言数据可视化绘图(1)
par(ask=TRUE) opar <- par(no.readonly=TRUE) # make a copy of current settings attach(mtcars) # be ...
- Java如何优雅地使用close()?
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/java-clo ...
- 《C++Primer》第五版习题答案--第六章【学习笔记】
<C++Primer>第五版习题答案--第六章[学习笔记] ps:答案是个人在学习过程中书写,可能存在错漏之处,仅作参考. 作者:cosefy Date: 2020/1/16 第六章:函数 ...
- ECharts展示后台数据
/** * Created by Administrator on 2015/11/10 010. */ var home = function () { //项目预警分析 var getProAla ...
- css3神奇的圆角边框、阴影框及其图片边框
css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...
- .net 父类值赋给子类
1.最简单的方式,反射+泛型 优点:字段修改时,无需更改代码,只需要更新实体即可 缺点:因为用到反射,可能效率会稍微弱那么一点点,没有实际用太多字段测试 public static cClass Pa ...
- flutter常用插件(持续更新)
flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...