React Navigation：使用NavigationActions.reset，goBack和getStateForAction导航回Root [英] React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction

问题描述

说我在StackNavigator应用程序中浏览了4个屏幕，现在我想回到第一个屏幕。似乎有三种不同的方法可以做到这一点，它们会导航到我想要做的地方，但每种方式都有一个循环每个前一个屏幕的动画。

Say I've navigated through 4 screens in my StackNavigator App and now I want to go back to the first screen. There seems to be three different ways to do this and they do navigate to where I want to do, however each way has an animation that cycles through each previous screen.

是否有一种干净的方式从 SCREEN_D 导航到 SCREEN_A ？

Is there a clean way to navigate from SCREEN_D to SCREEN_A?

换句话说，我不希望看到 SCREEN_C 和 SCREEN_B 从 SCREEN_D

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);
}

推荐答案

这是一个快速修复。
这将在导航（向前或向后）时删除所有过渡。

Here's a quick fix. This will remove ALL transitions when navigating (forward or backward).

const Nav = StackNavigator({
  Screens
},{
  transitionConfig,
  navigationOptions
});

在transitionConfig中添加：

in transitionConfig add this:

const transitionConfig = () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  })

transitionConfig是一个返回一个覆盖默认屏幕转换的对象的函数。 https://reactnavigation.org/docs/navigators/stack

The transitionConfig is a function that returns an object that overrides default screen transitions. https://reactnavigation.org/docs/navigators/stack

• 如果有人知道改变单一导航动画的方法，我很想听听！

这篇关于React Navigation：使用NavigationActions.reset，goBack和getStateForAction导航回Root的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！