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的更多相关文章

  1. iOS原生混合RN开发最佳实践

    iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 ...

  2. 基于RN开发的一款视频配音APP(开源)

    在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...

  3. RN开发第二天

    今天上午配置了windows的Android的环境,下载node,Python,安装Android SDK和Android studio,JSK,然后配置用户变量和系统变量,然后npm install ...

  4. RN 开发工具及发布release版本

    2.1.开发工具推荐visual studio code https://code.visualstudio.com/docs/?dv=win 选择安装react native tool 就可以了 2 ...

  5. RN开发-Android原生交互

    在使用RN开发过程中,难免有些原生功能需要要自己来实现,下面总结一下在使用RN与原生开发交互. 1.在原生代码中定义实现类 1.1  首先继承 ReactContextBaseJaveModule抽象 ...

  6. RN开发-IDE和API

    一.开发工具 1.Visual Studio Code:微软IDE,轻量级,只有30+M大小 2.nuclide :仅支持Mac 3.WebStorm : JavaScript开发工具(IDE) 二. ...

  7. RN开发中的报错以及告警

    报错一: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRES ...

  8. 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 ...

  9. RN开发-组件View,Text

    1.外联js文件(RN自定义组件)        module.exports=Header; 导出模块         const Header=require('./header'); 导入外部j ...

随机推荐

  1. sublime中写python代码

    SublimeREPL插件 这个是首先要安装的,此插件主要功能是为了实现交互,在安装后需要一些简单的配置 在Preferences--> Key Bindings--> user下添加如下 ...

  2. opencv —— HoughLines、HoughLinesP 霍夫线变换原理(标准霍夫线变换、多尺度霍夫线变换、累积概率霍夫线变换)及直线检测

    霍夫线变换的原理 一条直线在图像二维空间可由两个变量表示,有以下两种情况: ① 在笛卡尔坐标系中:可由参数斜率和截距(k,b)表示. ② 在极坐标系中:可由参数极经和极角(r,θ)表示. 对于霍夫线变 ...

  3. Q&A in 2018 - Q2

    How to zip a file for Windows? 压缩一个文件: makecab c:/file_name.txt c:/file_name.zip 解压一个文件: expand c:/f ...

  4. PRML学习准备

    因为很怕PRML课程,所以想提前学习下做点准备. 看的一个学习内容就是python数据处理那本书,比较仔细地学习了 numpy,大致看了pandas和 matplotlib ,有以下几点感受 nump ...

  5. opencv —— morphologyEx 开运算、闭运算、形态学梯度、顶帽、黑帽

    开运算:先腐蚀后膨胀. 能够排除小亮点. 闭运算:先膨胀后腐蚀. 能够排除小黑点. 形态学梯度:膨胀图 — 腐蚀图. 对二值图像进行这一操作,可将图块的边缘突出出来,故可用来保留物体边缘轮廓. 顶帽: ...

  6. C语言程序设计(实验一)

    实验项目:1.3.2,1.3.3,1.3.4,2.3.1,2.3.2 姓名:邹琼   实验地点:家 实验时间:2020年2月28日 一.实验目的与要求 1.实验目的 掌握DEVC++的安装方法,并实现 ...

  7. Java代码操作Elasticsearch

    创建maven项目,导入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</a ...

  8. PP: Extracting statisticla graph features for accurate and efficient time series classification

    Problem: TSC, time series classification; Traditional TSC: find global similarities or local pattern ...

  9. CSS3之border-image的使用

    最近,我在项目开发中遇到这样的问题. 要给这个tab的底部的蓝线左右加上圆角. 然而,这个元素实际如上图所示,只是active的时候加了个underline的类,蓝线并没有单独的html. 若给这个s ...

  10. CentOS7防火墙设置常用命令

    目录 开/关/重启防火墙 查看所有开启的端口号 CentOS7环境下防火墙常用命令 开/关/重启防火墙 查看防火墙状态 firewall-cmd --state 启动防火墙 systemctl sta ...