React Native - 如何从父抽屉导航器导航到子堆栈导航器中的特定屏幕

Question

我已经好几天没能实现这个目标了。

我最上面的导航器是一个 DrawerNavigator，它有多个指向特定子堆栈导航器的链接，也有指向其他屏幕的链接。

这是我的父母抽屉导航器：

const Drawer = createDrawerNavigator();

export default function MainLayout() {
    ...

    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Inicio" screenOptions={{
                headerShown: false,
                drawerPosition: "right",
                drawerType: "slide",
                drawerStyle: {
                    backgroundColor: '#01414d'
                },
                drawerInactiveTintColor: '#fff',
                drawerActiveTintColor: '#fff',
                drawerActiveBackgroundColor: '#7fa091',
                drawerLabelStyle: {
                    fontFamily: "Figtree-SemiBold",
                    fontSize: 16,
                    color: '#fff'
                },
            }}>
                <Drawer.Screen name="Inicio" component={PublicLayout} initialParams={{ route: 'Home' }} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_house}</Text>
                    )
                }} />
                <Drawer.Screen name="Contacto" component={PublicLayout} initialParams={{ route: 'Contact' }} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_phone_office}</Text>
                    )
                }} />
                <Drawer.Screen name="Mi cuenta" component={PrivateLayout} options={{
                    drawerIcon: ({ color }) => (
                        <Text style={[css.icon, { color: color, marginRight: -23, width: 20, textAlign: 'center' }]}>{" "}{FontAwesome.fa_user}</Text>
                    )
                }} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

这是我的孩子 StackNavigator：

const Stack = createNativeStackNavigator();

export default function PublicLayout({ route, navigation }) {
    return (
        <Stack.Navigator initialRouteName="Home" screenOptions={{ header: Header }}>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Vehicle" component={VehicleScreen} />
            <Stack.Screen name="Financing" component={FinancingScreen} />
            <Stack.Screen name="Contact" component={ContactScreen} />
        </Stack.Navigator>
    );
}

我尝试过定制抽屉物品，但似乎是一种非常复杂的做事方式......

我尝试将初始路由名称设置为我发送的“路由”参数，但它不起作用。

我已经为这个问题苦苦挣扎有一段时间了，我真的可以用一只手来解决这个问题。

Answer 1

我似乎误解了 Drawer.Screen 项目的用途，虽然它们提供了一种将项目添加到菜单的快速方法，但我需要的只能通过使用自定义抽屉项目来实现。