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

从Drawer Navigator导航到特定屏幕

1 个答案: