0

我正在使用三个导航器（即堆栈、抽屉和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 的项目屏幕（不丢失标题）。

4

1 回答 1

0

因为，标题是堆栈导航器的一部分。因此，如果您想在项目屏幕上使用它，则必须将 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>
  );
}
于 2020-05-19T01:37:49.897 回答