反应导航如何通过父母导航到孩子？答案

【问题标题】：React navigation how to navigate to children through parent?反应导航如何通过父母导航到孩子？
【发布时间】：2017-08-04 11:19:29
【问题描述】：

所以我有这个反应导航设置：

Stack navigator
|Tab navigator
|  | Screen_A
|  | Screen_B
| Screen_C
| Screen_D

正常情况下，用户会转到屏幕 A，然后单击以转到屏幕 C，并带有一些参数。从屏幕 B，用户单击以转到屏幕 D。现在在屏幕 D 上，当用户点击时，我需要他转到屏幕 C 但通过屏幕 A（因为当用户从 C 点返回时，他们需要返回屏幕 A）。

我尝试将参数从屏幕 D 传递到屏幕 A，并在 A 的 render() 方法中检查参数并继续导航到屏幕 C，它可以工作。但是我收到警告“无法在现有状态转换期间更新（例如在'渲染'内......”。那么我怎样才能在不触发任何警告的情况下完成此操作呢？

谢谢

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

一个可能的替代解决方案是利用自定义的stack router，这里我想出了一个可能的解决方案。

在这种情况下，当您从 ScreenD 导航到 ScreenC 时，您可以直接导航到 ScreenC，但是当用户在 ScreenC 上并尝试返回时，我们会将 ScreenA 插入堆栈，因此用户将看到 ScreenA 而不是屏幕D。

const NestedNavigator = TabNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB },
});

const MainNavigator = StackNavigator({
  Home: {
    screen: NestedNavigator
  },
  ScreenC: { screen: ScreenC },
  ScreenD: { screen: ScreenD },
});

const defaultGetStateForAction = MainNavigator.router.getStateForAction;

MainNavigator.router.getStateForAction = (action, state) => {
  if (state && action.type === 'Navigation/BACK' && state.routes[state.index].routeName === 'ScreenC') {
    const routes = [
      ...state.routes,
      {index: 0, key: 'ScreenA', routeName: 'Home', routes: [{ key: 'ScreenA', routeName: 'ScreenA'}, { key: 'ScreenB', routeName: 'ScreenB' }]},
    ];
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  return defaultGetStateForAction(action, state);
};

【讨论】：