React Navigation：使用 NavigationActions.reset、goBack 和 getStateForAction 导航回到根目录

Question

假设我在我的 StackNavigator 应用程序中浏览了 4 个屏幕，现在我想返回到第一个屏幕。似乎有三种不同的方法可以做到这一点，它们确实导航到我想做的地方，但是每种方法都有一个循环显示每个先前屏幕的动画。

有没有一种从 SCREEN_D 导航到 SCREEN_A 的干净方法？

In other words, I don’t want to see SCREEN_C and SCREEN_B a split of a second before seeing SCREEN_A when navigating backwards from SCREEN_D

 navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);

三种方法来做到这一点：

1.

 return this.props.navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: 'SCREEN_A'})]
                  }));

2.

  const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)

3.

 const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: 'First'},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}

原文由 Turnipdabeets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

react-navigation 有 popToTop 我们可以像 blow 一样使用它

this.props.navigation.popToTop()

原文由 Sultan Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议