如何从外部重置特定的堆栈导航器?

Question

我正在使用带有 react-native 的 react-navigation 制作一个应用程序。

我的应用程序的结构是，

Main Tab
- Tab 1 (Stack)
- screen A
- screen B
- screen C
- Tab 2 (Stack)
- screen D
- screen E
- screen F

我想做的是在特定时间重置选项卡 1(堆栈导航器(，而不是导航到选项卡 1。

如果用户位于屏幕 F 中，我只想重置选项卡 1(堆栈(，而不让用户移动到选项卡 1。

所以我认为调度导航操作应该在这些反应组件之外触发，比如resetHelper.js

但是我不知道如何在不导航该堆栈的情况下重置特定堆栈。

任何帮助将不胜感激。提前感谢！

Answer 1

通常，如果您位于特定堆栈中，您将通过this.props.navigation.reset()重置，但由于您想从另一个堆栈重置一个堆栈，因此您需要对需要重置的StackNavigator使用NavigationService。

阅读此帮助指南，了解如何创建NavigationService。

设置NavigationService后，将NavigationService.js编辑为：

import { StackActions, NavigationActions } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function reset(index = 0, actions) {
_navigator.dispatch(
StackActions.reset({
index,
actions
})
);
}
// add other navigation functions that you need and export them
export default {
reset,
setTopLevelNavigator,
};

然后，从任何文件中的任何函数中执行以下操作：

import {reset} from NavigationService.js
//your other code and functions here.
reset(0, actions)

在此处阅读更多相关信息。