React native 在React Native中从抽屉导航到单个页面

我有三个底部选项卡，每个选项卡都可以访问相同的抽屉导航。在抽屉导航中，我使用drawerContent和drawerItems创建指向选项卡外页面的自定义内容链接（即，我不希望选项卡显示在这些页面上）。然而，我似乎无法通过导航道具-我收到“navigation.navigate不是一个函数”

编辑：基本上我想从抽屉链接到标签外的页面（不显示标签），带有后退按钮等。。我想我需要一个createStackNavigator，但我不知道如何合并它

代码如下：

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function TabOne({ navigation }) {
    return (
         <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
             <Drawer.Screen name="Tab One" component={TabOneScreen} />
         </Drawer.Navigator>
    );
}

function TabTwo({ navigation }) {
    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
            <Drawer.Screen name="Tab Two" component={TabTwoScreen} />
        </Drawer.Navigator>
    );
}

function TabThree({ navigation }) {
    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
            <Drawer.Screen name="Tab Three" component={TabThreeScreen} />
        </Drawer.Navigator>
    );
}

function CustomDrawerContent(props, navigation) {
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />

            // THIS LINE HERE
            <DrawerItem label="Settings" onPress={() => navigation.navigate('Settings')} />

            <DrawerItem label="Logout" onPress={() => LogOut()} />
        </DrawerContentScrollView>
    )
}

function TabOneScreen() {
    return (
        <>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Tab One Screen</Text>
        </View>
        </>
    );
 }

 function TabTwoScreen() {
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Tab Two Screen</Text>
         </View>
     );
 }

 function TabThreeScreen() {
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
             <Text>Tab Three Screen</Text>
         </View>
     );
 }

 export default function App() {
     return (
         <NavigationContainer>
             <Tab.Navigator>
                 <Tab.Screen name="Tab One" component={TabOne} />
                 <Tab.Screen name="Tab Two" component={TabTwo} />
                 <Tab.Screen name="Tab Three" component={TabThree} />
             </Tab.Navigator>
         </NavigationContainer>
     );
 }

const Tab=createBottomTabNavigator（）；
const Drawer=createDrawerNavigator（）；
函数TabOne（{navigation}）{
返回(
}>
);
}
函数TabTwo（{navigation}）{
返回(
}>
);
}
函数TabThree（{navigation}）{
返回(
}>
);
}
功能CustomDrawerContent（道具、导航）{
返回(
//这条线在这里
导航。导航（'Settings'）}/>
注销（）}/>
)
}
函数TabOneScreen（）{
返回(
选项卡一屏幕
);
}
函数TabTwoScreen（）{
返回(
选项卡二屏幕
);
}
函数TabThreeScreen（）{
返回(
选项卡三屏幕
);
}
导出默认函数App（）{
返回(
);
}

此外，我不确定如何在DroperItem中“包括”链接的设置页面/组件，因为它不包括在任何导航堆栈中

正确的方法是什么

---

干杯，Matt

使用

createStackNavigator

创建父导航器，然后将选项卡导航器和非选项卡屏幕作为父导航器的子组件