博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
RN开发-Navigator
阅读量:5024 次
发布时间:2019-06-12

本文共 1222 字,大约阅读时间需要 4 分钟。

  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();
                    }
                }
       

转载于:https://www.cnblogs.com/farmerkids/p/5972212.html

你可能感兴趣的文章
从setting文件导包
查看>>
编写一个函数isMerge,判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成...
查看>>
union和union all
查看>>
Github 开源:使用控制器操作 WinForm/WPF 控件( Sheng.Winform.Controls.Controller)
查看>>
PMD使用提醒
查看>>
Codeforces 887D Ratings and Reality Shows
查看>>
论文《A Generative Entity-Mention Model for Linking Entities with Knowledge Base》
查看>>
CentOS 6.7编译安装PHP 5.6
查看>>
Linux记录-salt分析
查看>>
Android Studio默认快捷键
查看>>
发布开源库到JCenter所遇到的一些问题记录
查看>>
第七周作业
查看>>
函数式编程与参数
查看>>
flush caches
查看>>
SSAS使用MDX生成脱机的多维数据集CUB文件
查看>>
ACM_hdu1102最小生成树练习
查看>>
MyBatis源码分析(一)--SqlSessionFactory的生成
查看>>
android中ListView点击和里边按钮或ImageView点击不能同时生效问题解决
查看>>
CTF常用工具之汇总
查看>>
java的面向对象 (2013-09-30-163写的日志迁移
查看>>