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

2024年1月6日 340次阅读

这是根导航器

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