React native 如何跳过嵌套导航器';什么是最初的路线?
我有这样一个导航:React native 如何跳过嵌套导航器';什么是最初的路线?,react-native,react-navigation,React Native,React Navigation,我有这样一个导航: Loading: SwitchNavigator { Auth: Stacknavigator, Main: StackNavigator, Onboard: StackNavigator, } StackNavigators中的每一个都有一个初始路由集。在某些情况下,我想从装载导航器转到车载导航器上的特定路线。如果我只使用navigator.navigate('DesiredRoute'),它也会挤压船上的initialRoute,因此导航堆栈看起来像[ini
Loading: SwitchNavigator {
Auth: Stacknavigator,
Main: StackNavigator,
Onboard: StackNavigator,
}
StackNavigator
s中的每一个都有一个初始路由集。在某些情况下,我想从装载
导航器转到车载
导航器上的特定路线。如果我只使用navigator.navigate('DesiredRoute')
,它也会挤压船上的initialRoute
,因此导航堆栈看起来像[initialRoute,DesiredRoute]
而不是[DesiredRoute]
。如何摆脱初始路由
代码示例:
// Loading.js
if (loadingComplete) {
if (!user) {
navigation.navigate('auth')
return
}
if (user && userData) {
navigation.navigate('Main')
return
}
if (onboardingCheckpointCleared) {
// this creates `['InitialRoute', 'DesiredRoute']` instead of `['DesiredRoute']`
navigation.navigate('DesiredRoute')
return
}
navigation.navigate('Onboard')
}
这是预期的行为,如果您只想显示
DesiredRoute
,则必须在加载中设置该路由,如下所示:
Loading: SwitchNavigator {
Auth: Stacknavigator,
Main: StackNavigator,
Onboard: StackNavigator,
DesiredRoute: ScreenName
}
这样书写不会产生任何冲突,您可以安全地进行书写。我假设您是从板载堆栈导航器外部导航到DesiredRoute
如果您在板载
导航器之外,执行导航。导航('DesiredRoute')
将触发两个操作:首先,它将导航到板载
堆栈导航器(因此它还将激活它的默认子屏幕初始路由
)然后它将推送所需的路由
。如果您想在堆栈上仅使用DesiredRoute
进入车载
,可以使用如下导航操作的子操作:
navigation.navigate('Onboard', undefined, StackActions.replace('DesiredRoute'));
第三个参数是可以由第一个参数导航器执行的操作(如果第一个参数不是屏幕而是导航器)。在这里,它将导航到车载
导航器,从而将初始路由
放入堆栈中(自动作为车载
的初始路由)。但是,StackAction.replace('DesiredRoute')
将由车载导航器执行,并将InitialRoute
替换为DesiredRoute
请参阅有关导航的官方文档:我最终创建了一个自定义路由器,在导航到我的嵌套堆栈时,该路由器将删除初始路由:
const MyStackNav = createStackNavigator({ ...routes })
const defaultGetStateForAction = MyStackNav.router.getStateForAction
const customGetStateForAction = (action, state) => {
const defaultNavState = defaultGetStateForAction(action, state)
// If we're pushing onto a stack that only has a defaulted initialRoute
if (
!!defaultNavState &&
!defaultNavState.routeName &&
defaultNavState.isTransitioning &&
defaultNavState.index === 1 &&
action.type === NavigationActions.NAVIGATE
) {
const newState = {
...defaultNavState,
index: 0, // Decrement index
routes: defaultNavState.routes.slice(1), // Remove initial route
}
return newState
}
return defaultNavState
}
我还没有用所有最新的软件包测试自己,但是假设你写的是正确的,这怎么会是一个问题呢?你想干什么?这看起来确实是一个可以解决的问题elsewhere@Zygro您对这个答案或任何其他要求有任何顾虑吗?