Как получить доступ к вложенному элементу из навигатора вкладок в виде экрана на навигаторе ящика реагирует навигатор

Question

Я пытаюсь использовать вложенный элемент для создания элемента навигатора, но не знаю, как к нему получить доступ.

По сути, есть много стековых навигаторов, и мне нужно использовать один из вложенных стековых навигаторов.

кто-нибудь знает, как сделать, чтобы получить доступ к этому виду предметов? даже если мне нужны действия, кто-нибудь может оставить небольшой пример?

 const Tab1a = ({ navigation }) => (<Screen label="Tab 1a" navigation={navigation} />);
const Tab1b = ({ navigation }) => (<Screen label="Tab 1b" navigation={navigation} />);
const Tab1c = ({ navigation }) => (<Screen label="Tab 1c" navigation={navigation} />);


const Tab2a = ({ navigation }) => (<Screen label="Tab 2a" navigation={navigation} />);
const Tab2b = ({ navigation }) => (<Screen label="Tab 2b" navigation={navigation} />);
const Tab2c = ({ navigation }) => (<Screen label="Tab 2c" navigation={navigation} />);

// second view on drawer

const Tab3a = ({ navigation }) => (<Screen label="Tab 3a" navigation={navigation} />);
const Tab3b = ({ navigation }) => (<Screen label="Tab 3b" navigation={navigation} />);
const Tab3c = ({ navigation }) => (<Screen label="Tab 3c" navigation={navigation} />);

const Tab4a = ({ navigation }) => (<Screen label="Tab 4a" navigation={navigation} />);
const Tab4b = ({ navigation }) => (<Screen label="Tab 4b" navigation={navigation} />);
const Tab4c = ({ navigation }) => (<Screen label="Tab 4c" navigation={navigation} />);



// first tab navigator stacks
const stack1StackNavigator = StackNavigator({
    A: {
        screen: Tab1a,
    },
    B: {
        screen: Tab1b,
    },
    C: {
        screen: Tab1c,
    },
});

const stack2StackNavigator = StackNavigator({
    A: {
        screen: Tab2a,
    },
    B: {
        screen: Tab2b,
    },
    C: {
        screen: Tab2c,
    },
});

// second tab navigator stacks
const stack3StackNavigator = StackNavigator({
    A: {
        screen: Tab3a,
    },
    B: {
        screen: Tab3b,
    },
    C: {
        screen: Tab3c,
    },
});

const stack4StackNavigator = StackNavigator({
    A: {
        screen: Tab4a,
    },
    B: {
        screen: Tab4b,
    },
    C: {
        screen: Tab4c,
    },
});

const tab1StackNavigator = StackNavigator({
    A: {
        screen: stack1StackNavigator,
    },
    B: {
        screen: stack2StackNavigator,
    },
});

const tab2StackNavigator = StackNavigator({
    A: {
        screen: stack3StackNavigator,
    },
    B: {
        screen: stack4StackNavigator,
    },
});



const MainNavigator = TabNavigator({
    First: {
        screen: tab1StackNavigator,
    },
    Second: {
        screen: tab2StackNavigator,
    },
}, {
        tabBarPosition: 'bottom',
        tabBarOptions:{
            scrollEnabled: false,
        }
    });


const MainDrawerNavigator = DrawerNavigator({
    Main: {
        screen: MainNavigator,
    },
    Secondary: {
        //I'm trying to do something like this but doesn't work
        screen: MainNavigator.Second.A.C
    },
}, {
        initialRouteName: 'Main',
        headerMode: 'none',
        drawerPosition: 'left',
        contentComponent: CustomDrawerContentComponent,
        contentOptions: {
            activeTintColor: '#00a3c3',
            inactiveTintColor: '#00a3c3',

        },
        drawerWidth: 300,
        useNativeAnimations: true,
        contentOptions: {
            itemsContainerStyle: {
                //The styles of the container, 
                margin: 23
            },
            labelStyle: {
                //Get properties of the label, color, etc. 
                color: '#00a2c3'
            }
        },
    });

.