首页 文章

React-native：回到堆栈中的特定屏幕

提问于
浏览 次
4

这是根导航器

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到任何屏幕）我提到了以下反应导航文档 - https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back

以上文件 . 说明从屏幕D到屏幕A（弹出D，C和B）你需要提供一个goBack FROM的密钥，在我的情况下是B，就像这样

navigation.goBack(SCREEN_KEY_B)

所以，我的问题是 from where should I get the key for a specific screen? 我检查了我的根导航对象，它向我显示了每个屏幕的一些动态生成的密钥 . How can I specify my own keys for the screens?

react-native react-navigation

3 回答

  • 0

    这很棘手！

    我提到了这部分反应导航文档，并且已经实现了上述目标！ 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);
};
    回复于
  • 0

    看起来他们现在正在做的方式是保存你想通过 params 回来的屏幕的关键 . 因此，一旦你进入B并导航到C，你将屏幕键传递给C作为参数，然后当你从C导航到D时，你将B的键传递给D作为参数 .

    更多信息here .

    回复于
  • 1

    我使用了 NavigatorService 的设置，如下面的概述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]);
      }
    }
  }
}

    这对我很有用 .

    回复于

相关问题