Question

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

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

正常情况下，用户将转到屏幕A，然后单击以使用某些参数转到屏幕C.从屏幕B，用户点击进入屏幕D. 现在在屏幕D上，当用户点击时，我需要他进入屏幕C但是通过屏幕A（因为当用户从C点击回来时，他们需要回到屏幕A）。

我尝试将params从屏幕D传递到屏幕A，并在A的render（）方法中，检查参数并继续导航到屏幕C，它可以正常工作。但是我得到了警告＆＃34;在现有状态转换期间无法更新（例如在＆＃39;渲染＆＃39; ...＆＃34;。那么如何在不触发任何警告的情况下完成此操作？

由于

Answer 1

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

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

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

反应导航如何通过父级导航到子项？

1 个答案: