关于DrawerLayoutAndroid和Navigator的一个问题



  • 我想做一个全局的Drawer,于是我在主程序中把Navigator给放在了Drawer内,如下:

    initialRoute={
        name: "首页",
        component: MyComponent,
    };
    render() {
        return(
            <Drawer ref={(drawer)=>this.drawer=drawer}>
                <Navigator
                    initialRoute={this.initialRoute}
                    configureScene={(route) => {
                        return Navigator.SceneConfigs.VerticalDownSwipeJump;
                    }}
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />
                    }} />
            </Drawer>
        );
    }
    

    其中Drawer是自定义的一个组件,其ref已与组件内的DrawerLayoutAndroid正确关联.
    现在Drawer内有若干按钮点击后需要操作navigator,而navigator场景的component中Toolbar的onIconClicked又需要打开Drawer,目前按照上面的代码我没有成功.
    目前,我发现只有在主程序中写一个打开Drawer的函数并把它传入navigator的component中让其调用该函数,才能成功.


    我想到了另一种方法,每个component里都写一遍Drawer.
    但是这样做,却又增加了不少重复的代码,我想请问应该怎样写才更好?


  • administrators

    典型的跨组件调用问题
    简单的做法,是把Drawer和Navigator用ref暴露到global中
    规范的做法,是使用redux一类的框架



  • 如何暴露在global中,需要把Drawer和Navigator的ref传入组件中吗@sunnylqm


  • administrators

    @ysc 说:

    <Drawer ref={(drawer)=>this.drawer=drawer}>

    你都知道这样写了,就想不到如何暴露在global中吗?

    <Drawer ref={(drawer)=>global.drawer=drawer}>
    


  • @sunnylqm 理解了,谢谢大神!


登录后回复