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

IT技术 javascript reactjs react-native react-navigation
2021-05-19 03:40:18

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

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

换句话说，我不希望看到SCREEN_C和SCREEN_B第二的前看到一个分裂SCREEN_A向后导航时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);
}
4个回答

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

this.props.navigation.popToTop()

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

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

  • 如果有人知道在单个导航上更改动画的方法，我很想知道如何！

您可以使用Navigation prop 中的popToTop方法来完成此操作。此外，如果您使用的是 redux，您应该更新您的Redux 集成。

希望这可以帮助！

对于 2020 / react-navigation-stack，我在设置 StackNavigator 时使用以下代码：

import { createStackNavigator, CardStyleInterpolators } from 'react-navigation-stack';
import { Easing } from 'react-native';

const Navigator = createStackNavigator({
  // ...
}, {
  defaultNavigationOptions: ({ navigation }) => {
    const animation = navigation.getParam('_animation');
    return {
      // ...
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      ...(animation === 'back' && {
        gestureDirection: 'horizontal-inverted',
      }),
      ...(animation === 'skip' && {
        transitionSpec: {
          open: { animation: 'timing', config: { duration: 0, easing: Easing.step1 }, },
          close: { animation: 'timing', config: { duration: 0, easing: Easing.step0 }, },
        },
      }),
    };
  },
});

和 _animation 参数来覆盖动画样式

// replace to a route not in the stack normally creates a forward animation, but
// we want a backwards animation
this.props.navigation.dispatch(
  StackActions.replace({ routeName: 'Login', params: { _animation: 'back' } })
);
其它你可能感兴趣的问题
上一篇在垂直边界打印失败 下一篇如何使用 Redux Saga 测试 API 请求失败？