React Navigation:使用NavigationActions.reset,goBack和getStateForAction导航回Root

Question

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

有没有干净的方式从导航SCREEN_D到SCREEN_A？

换句话说,在看到向后导航之前,我不希望看到SCREEN_C和SCREEN_B分裂一秒钟SCREEN_ASCREEN_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);
}

Answer 1

react-native导航是否popToTop可以像打击一样使用它

this.props.navigation.popToTop()

Answer 2

这是一个快速解决方案.这将在导航(向前或向后)时删除所有过渡.

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

在transitionConfig中添加:

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

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

• 如果有人知道改变单一导航动画的方法,我很想听听怎么做!

Answer 3

您可以通过使用Navigation prop中的popToTop方法来执行此操作。另外，如果您使用的是redux，则应更新Redux集成。

希望这可以帮助！