如何导航到堆栈顶部（在 react-navigation-v5 上）？

Question

使用 React-Navigation v5，我想导航到堆栈的第一个屏幕（而不是我最后一次访问此堆栈的最后一个屏幕。）？

我尝试使用dispatch(StackActions.popToTop()) 。 但是，如果用户已经在堆栈顶部，则会导致错误！

错误是： The action 'POP_TO_TOP' was not handled by any navigator. Is there any screen to go back to? This is a development-only warning and won't be shown in production. The action 'POP_TO_TOP' was not handled by any navigator. Is there any screen to go back to? This is a development-only warning and won't be shown in production.

import { StackActions } from "@react-navigation/native";

props.navigation.navigate("MyStack");

// The following works most of the time. However, it causes an error if the user is already on top of the stack! 
props.navigation.dispatch(StackActions.popToTop()); 

Answer 1

以下代码似乎有效。

但是，对于这样一个基本（我认为）要求，这是一个相当长的代码。 我想知道是否有更简单的解决方案。

此外，它使用导航器的 state object，文档不建议使用。 它在https://reactnavigation.org/docs/navigation-actions#reset上说，“考虑导航器的 state ZA8CFDE6331BD59EB2AC96F8911C4B666 中的小版本和更改。 ”

import { CommonActions } from "@react-navigation/native";

// more code...

props.navigation.dispatch(state => {
    // Find (by name) the stack, which I need to reset 
    let i; 
    for (i = 0; i < state.routes.length; i++) {
        if (state.routes[i].name === "MyStack") {
            break;
        }
    }
    // If there has been any activity for the stack, which we found above, we reset it 
    let routes2 = { ...state.routes };
    if (routes2[i].state) { 
        delete routes2[i].state;
    }
    return CommonActions.reset({
        ...state,
        routes2,
    });
});
props.navigation.navigate("MyStack");