这是根导航器 export const AppNavigator = StackNavigator({ Splash: { screen: Splash }, Dashboard: { screen: DashboardDrawer } });const DashboardDrawer = DrawerNavigator({ DashboardScreen: { screen: StackNavigator({ A: { screen: A }, B:
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)
那么,我的问题是我应该从哪里获得特定屏幕的密钥?
我检查了我的根导航对象,它向我显示了每个屏幕的一些动态生成的密钥.如何为屏幕指定自己的按键?
我提到了这部分反应导航文档,并且已经实现了上述目标!
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); };