我试着理解如何在嵌套堆栈中重置我的代码
const AuthStack = createStackNavigator(
{
Welcome,
Login,
Register,
ConfirmationCode,
},
{
initialRouteName: 'Welcome',
headerMode: 'none',
lazy: true,
transitionConfig,
defaultNavigationOptions: {
gesturesEnabled: false,
},
}
)
const AppStack = createStackNavigator(
{
TabStack,
SearchResult,
BusinessDetail,
BusinessMap,
MakeAppointment,
TermsAndConditions
},
{
initialRouteName: 'TabStack',
headerMode: 'none',
lazy: true,
transitionConfig,
defaultNavigationOptions: {
gesturesEnabled: false,
},
}
)
let MainStack = createSwitchNavigator(
{
AuthLoading,
Auth: AuthStack,
App: AppStack,
},
{
initialRouteName: 'AuthLoading',
headerMode: 'none',
lazy: true,
defaultNavigationOptions: {
gesturesEnabled: false,
},
}
)
TabStack
import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {
Search,
MyFavourites,
MyAppointments,
UserProfile
} from '../screens'
import Icon from 'react-native-vector-icons/Feather';
import Colors from '../utils/Colors'
let TabStack = createBottomTabNavigator(
{
Search,
MyFavourites,
MyAppointments,
UserProfile,
},
initialRouteName: 'ScreenTab1',
tabBarOptions: {
activeTintColor: Colors.pink,
inactiveTintColor: Colors.black,
showLabel: false,
style: {
backgroundColor: 'white'
}
},
}
)
export default createAppContainer(TabStack);
我想了解如何重置例如:
reset from UserProfile to TabStack (in AppStack) to AuthStack
我试着这样做
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
});
this.props.navigation.dispatch(resetAction);
或者这样
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
});
this.props.navigation.dispatch(resetAction);
但我得到了错误
没有为AuthStack定义的路由
我检查了stackoverflow中的问题,但那里的答案对我不起作用,总是向我显示我上面写的相同错误。
你的resetAction
不成功,因为你在TabStack
上发送它(因为你在this.props.navigation.dispatch
上调用UserProfile
,如果我找到你的话)。您需要将resetAction
发送到您的MainStack
。 This thread here提出了一些可以实现这一目标的方法。而且,这是我的首选解决方案,因为我不必在导航器周围传递道具或使用此调用多个嵌套操作。
navigationService.js
(以保持顶级导航器作为参考)import { NavigationActions, StackActions } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigateMainNavigator(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
}),
);
}
// add other navigation functions that you need and export them
export default {
setTopLevelNavigator,
navigateMainNavigator,
};
App.js
或任何其他文件中渲染MainStack
,请执行此操作以设置参考import NavigationService from './navigationService';
...
render() {
return (
...
<MainStack
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
...
)
}
AuthStack
(或你的MainStack
中的任何其他堆栈),只需导入NavigationService
并调用NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'
===========================================================================
以前的解决方案,在navigationService.js
,是StackNavigator
作为MainStack
function navigateAndReset(routeName, params) {
_navigator.dispatch(
StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName,
params,
}),
],
})
);
}
尝试将其设置为AppStack
,因为无论如何它将重定向到GeneralStack
,因为你有initialRouteName
里面的AppStack
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'App' })],
});
this.props.navigation.dispatch(resetAction);
您可以执行以下操作,重置为authStack
,
创建重置操作如下,
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "AuthStack" })],
key: null
});
this.props.navigation.dispatch(resetAction);
并将AuthStack添加到appStack或您调用上述代码的堆栈中。
例如,如果您从appstack调用此方法,请在应用堆栈中添加以下行作为路由
const AppStack = createStackNavigator(
{
TabStack,
SearchResult,
BusinessDetail,
BusinessMap,
MakeAppointment,
TermsAndConditions,
AuthStack <---Insert THIS
},
这适用于我使用注销时。