zoukankan      html  css  js  c++  java
  • 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();
                        }
                    }
           

  • 相关阅读:
    基于OpenCV的图像强度操作
    统计学习方法笔记(一)-k近邻算法原理及python实现
    机器学习实战-之SVM核函数与案例
    机器学习实战之SVM原理与案例
    JStorm与Storm源码分析(七)--BasicBoltExecutor与装饰模式
    JStorm与Storm源码分析(五)--SpoutOutputCollector与代理模式
    JStorm与Storm源码分析(四)--均衡调度器,EvenScheduler
    JStorm与Storm源码分析(三)--Scheduler,调度器
    JStorm与Storm源码分析(二)--任务分配,assignment
    转。Nas配置。想找原版没找到,全是转载的,也没注出处,无语。
  • 原文地址:https://www.cnblogs.com/farmerkids/p/5972212.html
Copyright © 2011-2022 走看看