[英]react-navigation 3 reset in nested stack
Im try to understand how to reset in nested stack this my code 我试着理解如何在嵌套堆栈中重置我的代码
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 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);
I want to understand how to make reset for example: 我想了解如何重置例如:
reset from UserProfile to TabStack (in AppStack) to AuthStack
I tried to do from it this way 我试着这样做
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
});
this.props.navigation.dispatch(resetAction);
or this way 或者这样
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
});
this.props.navigation.dispatch(resetAction);
but i got the error 但我得到了错误
there is no route defined for AuthStack
没有为AuthStack定义的路由
I checked in issues in stackoverflow but the answers there not works for me,always show me the same error I wrote above. 我检查了stackoverflow中的问题,但那里的答案对我不起作用,总是向我显示我上面写的相同错误。
Try by setting it to AppStack
, because anyhow it is going to redirect to GeneralStack
as you have it as initialRouteName
inside AppStack
将其设置为尝试
AppStack
,因为无论如何它会重定向到GeneralStack
因为你拥有了它作为initialRouteName
内AppStack
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'App' })],
});
this.props.navigation.dispatch(resetAction);
Your resetAction
is unsuccessful because you are dispatching it on TabStack
(because you are calling this.props.navigation.dispatch
on UserProfile
, if I get you correctly). 你的
resetAction
不成功,因为你在TabStack
上调度它(因为你在UserProfile
上调用this.props.navigation.dispatch
,如果我找到你的话)。 You need to dispatch the resetAction
to your MainStack
instead. 您需要将
resetAction
调度到MainStack
。 This thread here suggested some ways that you can achieve this. 这个帖子在这里提出了一些方法可以实现这一点。 And also, here is my preferred solution, because i don't have to pass props around navigators or calls multiple nested actions with this.
而且,这是我的首选解决方案,因为我不必在导航器周围传递道具或使用此调用多个嵌套操作。
navigationService.js
with the following contents (to keep your top level navigator as a reference) 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
or any other file you render your MainStack
, do this to set the reference App.js
或任何其他文件你呈现你的MainStack
,这样做是为了设置参考 import NavigationService from './navigationService';
...
render() {
return (
...
<MainStack
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
...
)
}
AuthStack
(or any other stack in your MainStack
), just import NavigationService
and call AuthStack
(或您的任何其他栈MainStack
),只需要导入NavigationService
和呼叫 NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'
=========================================================================== ================================================== =========================
Previous solution, in navigationService.js
, is for StackNavigator
as the MainStack
以前的解决方案,在
navigationService.js
,用于StackNavigator
作为MainStack
function navigateAndReset(routeName, params) {
_navigator.dispatch(
StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName,
params,
}),
],
})
);
}
You can do the following, to reset to authStack
, 您可以执行以下操作,重置为
authStack
,
create a reset actions as following, 创建重置操作如下,
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "AuthStack" })],
key: null
});
this.props.navigation.dispatch(resetAction);
and also add the AuthStack into appStack, or the stack from which you are calling the above code. 并将AuthStack添加到appStack或您调用上述代码的堆栈中。
For example if your calling this from your appstack, add the following line as a route within your app stack 例如,如果您从appstack调用此方法,请在应用堆栈中添加以下行作为路由
const AppStack = createStackNavigator(
{
TabStack,
SearchResult,
BusinessDetail,
BusinessMap,
MakeAppointment,
TermsAndConditions,
AuthStack <---Insert THIS
},
This works for me when using to signout. 这适用于我使用注销时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.