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

  • 相关阅读:
    jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
    shell脚本,awk取奇数行与偶数行方法。
    shell脚本,awk取中间列的方法。
    shell脚本,每5个字符之间插入"|",行末不插入“|”。
    shell脚本,tee小工具的用法。
    shell脚本,逻辑结构题练习。
    shell脚本,实现奇数行等于偶数行。
    shell脚本,编程题练习。
    shell脚本,用awk实现替换文件里面的内容。
    shell脚本,awk替换{}里面的内容
  • 原文地址:https://www.cnblogs.com/farmerkids/p/5972212.html
Copyright © 2011-2022 走看看