React-native：返回堆栈中的特定屏幕答案

【问题标题】：React-native: Go back to a specific screen in stackReact-native：返回堆栈中的特定屏幕
【发布时间】：2018-03-18 08:15:03
【问题描述】：

这是根导航器

export const AppNavigator = StackNavigator({
        Splash: { screen: Splash },
        Dashboard: { screen: DashboardDrawer }
    });

const DashboardDrawer = DrawerNavigator({ DashboardScreen: {
        screen: StackNavigator({
            A: { screen: A },
            B: { screen: B },
            C: { screen: C },
            D: { screen: D },
        }
    }, {
        contentComponent: DashboardDrawerComponent,
        drawerWidth: 280
    });

我的堆栈中有 4 个屏幕 - A、B、C、D。我想从 D 跳到 A。（或 D 到任何屏幕）我参考了下面的react-navigation文档-https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back

以上文档。声明要从屏幕 D 转到屏幕 A（弹出 D、C 和 B），您需要提供一个键来返回 FROM，在我的情况下是 B，像这样

navigation.goBack(SCREEN_KEY_B)

那么，我的问题是我应该从哪里获得特定屏幕的密钥？ 我检查了我的根导航对象，它向我显示了每个屏幕的一些动态生成的键。 如何为屏幕指定我自己的键？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

这很棘手！

我参考了react-navigation文档的这一部分，并且已经实现了上面的！ https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions

就是这样，

1.稍微改变了我在问题中的 DrawerNavigator（以适应下面的 stacknavigator）

const DrawerStackNavigator = new StackNavigator({
        A: { screen: A },
        B: { screen: B },
        C: { screen: C },
        D: { screen: D },
    }
});

const DashboardDrawer = DrawerNavigator({
        DashboardScreen: DrawerStackNavigator,
}, { 
       contentComponent: DashboardDrawerComponent,
       drawerWidth: 280
});

2. 在屏幕 D 中调度一个动作

const {navigation} = this.props;
navigation.dispatch({
    routeName: 'A',
    type: 'GoToRoute',
});

3.在我的堆栈导航器上听到了这个动作

const defaultGetStateForAction = DrawerStackNavigator.router.getStateForAction;
DrawerStackNavigator.router.getStateForAction = (action, state) => {            
    if (state && action.type === 'GoToRoute') {           
        let index = state.routes.findIndex((item) => {
            return item.routeName === action.routeName
        });
        const routes = state.routes.slice(0, index+1);
        return {
            routes,
            index
        };    
    }       
    return defaultGetStateForAction(action, state);
};

【讨论】：

【解决方案2】：

看起来他们现在的做法是通过params 保存您想要返回的屏幕的键。因此，一旦您在 B 中并导航到 C，您将屏幕键作为参数传递给 C，然后当您从 C 导航到 D 时，您将 B 的键作为参数传递给 D。

更多信息here.

【讨论】：

非常感谢您的回答。尽管我参考了 react-navigation 的官方文档，并且找到了一种方法来覆盖 getStateForAction 导航，以更好的方式实现我的目标，而不是一直将参数发送到屏幕。你可以参考我的回答。

【解决方案3】：

我使用 NavigatorService 的设置，如 unexge 帖子中的 here 所述。

从服务中，我公开以下内容：

function goBackToRouteWithName(routeName: string) {
  if (!_container) return;
  const route = _getRouteWithName(_container.state.nav, routeName);
  route && _container.dispatch(NavigationActions.back({ key: route.key }));
}

function _getRouteWithName(route, name: string): ?NavigationRouteConfigMap {
  const stack = [];
  stack.push(route);
  while (stack.length > 0) {
    let current = stack.pop();
    if (current.routes) {
      for (let i = 0; i < current.routes.length; i++) {
        if (current.routes[i].routeName === name) {
          //NOTE because of going from, not to!!
          return current.routes[i + 1];
        }
        stack.push(current.routes[i]);
      }
    }
  }
}

这对我很有效。

【讨论】：