React native 排除React导航/抽屉中的某些屏幕

我有一个带有登录页面的应用程序，我不希望抽屉出现在此页面上。只有后面的那些。我想我应该创建两个堆栈导航器。抽屉导航器将包装其中一个，但不会包装另一个。我正在使用@react navigation/drawer库，我很接近：

App.js

// Have both navigators at the root
render() {
    return (
    [
    <NavigationContainer>
       <DrawerNavigator extraData={{handleLogin:this.handleLogin, handleLogout:this.handleLogout, checkLoginStatus:this.checkLoginStatus}}/>
    </NavigationContainer>,
    <NavigationContainer>
      <LogRegNavigator extraData={{handleLogin:this.handleLogin, handleLogout:this.handleLogout, checkLoginStatus:this.checkLoginStatus}}/>
    </NavigationContainer>
    ]
     
    );
  }

//两个导航器都位于根目录下
render（）{
返回(
[
,
]
);
}

这里的问题是，两者都是渲染，这显然是我不想要的。还有一个问题是，它们实际上并不共享同一屏幕，这意味着您无法在堆栈之间导航

LogRegNavigator.js：

render (){
    return (
    <Stack.Navigator>
        <Stack.Screen name="Home" >
        {props => <Home {...props} extraData={{handleLogin:this.props.extraData.handleLogin, handleLogout:this.props.extraData.handleLogout, checkLoginStatus:this.props.extraData.checkLoginStatus}}/>}
        </Stack.Screen>
    </Stack.Navigator>
    )
}
}

render（）{
返回(
{props=>}
)
}
}

这是我登录和注册屏幕的常规导航器

MainStackNavigator.js

render (){
    return (
    <Stack.Navigator>

            <Stack.Screen name="PractSetup">
            {props =>  <PractSetup {...props} />}
            </Stack.Screen>
            
    )
}

render () {
    return(
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name='Home'>
        {props => <MainStackNavigator {...props} extraData={{handleLogin:this.props.extraData.handleLogin, handleLogout:this.props.extraData.handleLogout, checkLoginStatus:this.props.extraData.checkLoginStatus}}/>}
        </Drawer.Screen>
    </Drawer.Navigator>
    )

}

render（）{
返回(
{props=>}
)
}

这是登录/注册屏幕之后所有页面的主导航器

papernavigator.js

render (){
    return (
    <Stack.Navigator>

            <Stack.Screen name="PractSetup">
            {props =>  <PractSetup {...props} />}
            </Stack.Screen>
            
    )
}

render () {
    return(
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name='Home'>
        {props => <MainStackNavigator {...props} extraData={{handleLogin:this.props.extraData.handleLogin, handleLogout:this.props.extraData.handleLogout, checkLoginStatus:this.props.extraData.checkLoginStatus}}/>}
        </Drawer.Screen>
    </Drawer.Navigator>
    )

}

render（）{
返回(
{props=>}
)
}

这是包装主导航器的抽屉导航器。这就是排除Login/Reg抽屉的工作，但是现在两个导航器堆栈都显示出来了。一定有更简单的方法吗

---

谢谢

我的方法是创建一个SwitchNavigator，它可以包装您的DroperNavigator和LogRegNavigator。 这样，在App.js中，您将获得如下内容：

const SwitchNavigator = createSwitchNavigator(
{
    //here you would include your navigators 
    mainFlow: DrawerNavigator,
    logRegFlow: LogRegNavigator
},
{
    //here your options for the stack navigator
    initialRouteName:'logRegFlow'
});
return(
    <NavigationContainer>
        <SwitchNavigator/>
    </NavigationContainer>
);

const SwitchNavigator=createSwitchNavigator(
{
//这里包括你的导航员
主流程：抽屉驱动，
logRegFlow:LogRegNavigator
},
{
//这里是堆栈导航器的选项
initialRouteName:'logRegFlow'
});
返回(
);

这样，LogRegNavigator将首先显示，您无法开始执行某些路由。

---

有趣的是，我还没有听说过这一点，之后的路由会继续正常吗？我要给它一个trySwitchNavigator已经被弃用了5.x不幸。我不确定这是否有帮助。我不只是需要在导航器之间切换，我需要有效地禁用某些屏幕的导航器，所以你实际上给我设置了正确的路径，我是傻瓜。在导航器之间切换本质上意味着当我切换到另一个lol时，其中一个被禁用。我能够使用三元运算符来实现这一点。