从“抽屉导航器”导航到特定屏幕

Question

我正在使用三个导航器（即堆栈，抽屉和materialbottomtab）构建小型投资组合。以下是我要包含在投资组合中的部分：主屏幕，项目屏幕，技能屏幕，关于屏幕和雇用屏幕。在“材料”选项卡导航器中，我具有除“关于”屏幕以外的所有屏幕。在抽屉式导航器中，我拥有所有5个屏幕。我的主页和项目屏幕被用作堆栈屏幕。当我从抽屉式导航器中单击项目屏幕时，它将带我到屏幕，但是没有主屏幕一样的标题。

function HamburgerMenu() {
   <Drawer.Navigator> 
      <Drawer.Screen name="Home" component={MainTabNavigator}/>
      <Drawer.Screen name="Projects" component={//Project screen of MainTabNavigator} />
   </Drawer.Navigator>
}

maintabnavigator是一个功能，其中的底部选项卡导航器与上面一样。如何从抽屉式导航器导航到maintabnavigator的项目屏幕（不丢失标题）。

Answer 1

因为标题是Stack导航器的一部分。因此，如果要在项目屏幕上使用它，则必须将StackNavigator添加到屏幕上。

您可以在选项卡中放置一个堆栈，也可以根据您的使用情况将选项卡放在堆栈中。

我在[https://snack.expo.io/@gie3d/drawer-tab-stack这里创建了一个小吃示例

从小吃示例链接，您将看到带有堆栈，不带有堆栈的标签栏以及其显示方式。

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
);

const TabWithoutStack = () => (
  <Tab.Navigator>
    <Tab.Screen name="HomeTabWithoutStack1" component={Home} />
    <Tab.Screen name="HomeTabWithoutStack2" component={Home} />
  </Tab.Navigator>
)

const TabWithStack = () => (
  <Tab.Navigator>
    <Tab.Screen name="HomeTabWithStack1" component={HomeStack} />
    <Tab.Screen name="HomeTabWithStack2" component={HomeStack} />
  </Tab.Navigator>
)

const Home = ({navigation}) => {
  return (
  <View>
    <Text>This is Home</Text>
    <Button onPress={() => navigation.toggleDrawer()}>
      Open Drawer
    </Button>
  </View>
)}

export default () => {
  return (
    <View style={{flex: 1}}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="HomeStack">
          <Drawer.Screen name="HomeStack" component={HomeStack} />
          <Drawer.Screen name="HomeNoStack" component={Home} />
          <Drawer.Screen name="TabWithoutStack" component={TabWithoutStack} />
          <Drawer.Screen name="TabWithStack" component={TabWithStack} />
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  );
}