新手理解Navigator的教程


  • administrators



  • 学习学习学习学习学习学习





  • 关于{...route.params}再提问

    return <Component {...route.params} navigator={navigator} />
    

    这里的{...route.params}是展开给<Component />组件传递 props

    那么这就有点反智,我们并不需要给defaultComponent传递信息(除了navigator),而是需要给第二个页面传递属性。

    写到这里,恍然大悟,醍醐灌顶。

    原来renderScene渲染的是所有的 component,即使第一个页面不需要传递params也应该给其加上,以打开后来页面信息交流的渠道。第一个页面的params展开后没有任何内容,相当于没有写,可以忽略。

    This tutorial is impressive. Thanks.



  • @messi 说:

    你好 关于Navigator这个组件 ,假如结合Android原生代码 有多个入口 怎么去设置呢?
    比如 我原生主界面 跳转到RN的首页 然后 首页点击 跳转到 原生的B页面 在B页面点击某个按钮 要进入RN的另一个JS页面 ,我要如何操作呢?

    我试了下 componentWillMount(){
    console.log("componentWillMount");
    DeviceEventEmitter.addListener('AndroidMessage',this.handmessage.bind(this));
    }
    handmessage(message){

      const {navigator } = this.props;
     console.log(this._navigator);
     if(navigator){
       navigator.push({
         name:'Main2',
         component:Main2
       });
     }
    
     console.log('handmessage====',message);
    

    }
    通过原生发消息 然后调用RN首页的Navigator的push方法 但是我发现有个现象就是
    当往另一个页面跳转的时候 会先跳到首页 然后再跳到我要跳转的页面 这是为什么呢?

    还有我调用push方法的时候 比如我首页是Main 然后我进去Main界面之后 条用push 跳转到另一个界面 此时打印 _renderScene(route, navigator) {
    this._navigator = navigator;

            let Component = route.component;
            console.log(Component);
            return (
                <Component {...route.params} navigator={navigator}/>
            );
        }
    

    这里会打印Main 和我要跳转的界面Main2 这是为什么呢 ?



  • 花了2小时,终于明白过来了,还是和原生安卓开发有些联系。大家注意在component里面push其他的component对象时记得import,警告:必须注意被push的component前加export default哦。反正我粗心大意,足足调了差不多1小时,才想起这点,。其他的参数做传递信息用的。
    谢谢楼主,不过文字上好像第一次看得一脸蒙蔽。文字描述和代码描述不太统一。



  • 比如我要切换用户,需要退回到登录页面,我试过所有方法底部的导航栏会一直存在,继续点导航栏其他模块还能继续操作,问题就是我如何在切换场景的时候把导航栏也一起切换?;另一个问题是注销用户的功能如何做?



  • 这么说,Navigator其实就是个高介组件,封装了各component的跳转栈和跳转动画



  • 建了个群375828326 欢迎大家交流技术


登录后回复