React Navigation 使用 Redux 重置堆栈的正确方法

Question

使用 React-Navigtion 和 Redux 返回（重置）到初始状态的正确方法是什么。

这是我的初始状态：

const firstAction = AppNavigator.router.getActionForPathAndParams('HomeDrawer');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const INITIAL_STATE = AppNavigator.router.getStateForAction( secondAction, tempNavState );

这是我的减速器：

export default (state = INITIAL_STATE, action) => {
  let nextState;
  switch (action.type) {
    case 'LOGIN':
      nextState = AppNavigator.router.getStateForAction(NavigationActions.back()), state);
      break;
    case 'LOGOUT_TEMP':
      nextState = AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
      break;
    case 'LOGOUT_START':
      // Don't know exactly what to do here
      nextState = { ...INITIAL_STATE };
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
    break;
  }
  return nextState || { ...state };
};

我不确定这是否可行。我不明白 React-Navigation 如何在幕后处理这个问题。它会监听这种类型的状态变化并适当导航，还是我需要始终通过 getStateForAction(NavigationActions.something(...), state) 执行运行操作？

nextState = { ...INITIAL_STATE };

我以前在不使用 Redux 的时候这样做过：

const resetLogin = NavigationActions.reset({
  index: 1,
  actions: [
      NavigationActions.navigate({ routeName: "HomeDrawer" }),
      NavigationActions.navigate({ routeName: "Login" })
    ]
});

我是否对上面的内容执行以下操作？

nextState = AppNavigator.router.getStateForAction(resetLogin, state);

如何将 React-Navigation 重置回 Redux 初始状态，我能否使用上面的 const INITIAL_STATE 以某种方式执行此操作？

谢谢，

沃伦·贝尔

Answer 1

哇，没有答案。作为记录，我最终使用了：

const resetLogin = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: "HomeDrawer" }),
    NavigationActions.navigate({ routeName: "Login" })
  ]
});

然后在我的减速器中这样做：

nextState = AppNavigator.router.getStateForAction(resetLogin, state)

我还发现使用：

AppNavigator.router.getActionForPathAndParams('ScreenName');

如果 'ScreenName' 是 DrawerNavigator 中的屏幕，

不会让我得到正确的 redux 操作。使用以下内容让我获得正确的 redux 操作：

NavigationActions.navigate({ routeName: 'ScreenName' })

希望这对其他人有帮助。

谢谢，

沃伦·贝尔

React Navigation 使用 Redux 重置堆栈的正确方法

React Navigation proper way to reset stack using Redux

react-native

react-redux

react-navigation