如何在博览会中同时拥有侧面导航和底部选项卡

Question

我正在构建一个 Expo React Native 应用程序，并尝试实现具有以下要求的抽屉导航：

抽屉式菜单：

包含动态项目列表（例如项目 1、项目 2）。 该列表可以动态增长，可能达到 100 项。 点击行为：

单击某个项目（例如项目 1）时： 它应该显示一个带有两个选项卡的底部选项卡导航器： 轮廓 设置 相同的行为适用于其他项目（例如项目 2），但每个项目都应该有自己独立的导航。

Answer 1

这是您可以尝试的示例代码。确保执行

expo install

所有依赖项

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

// Create navigators
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

// Sample drawer items (this list can grow dynamically)
const drawerItems = ["Item 1", "Item 2", "Item 3", "Item 4"];

// Profile Screen Component
function ProfileScreen({ route }) {
  return (
    <View style={styles.screen}>
      <Text style={styles.text}>{route.params.itemName} - Profile</Text>
    </View>
  );
}

// Settings Screen Component
function SettingsScreen({ route }) {
  return (
    <View style={styles.screen}>
      <Text style={styles.text}>{route.params.itemName} - Settings</Text>
    </View>
  );
}

// Bottom Tab Navigator for each drawer item
function ItemTabs({ route }) {
  const { itemName } = route.params; // Get item name from route params

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        initialParams={{ itemName }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        initialParams={{ itemName }}
      />
    </Tab.Navigator>
  );
}

// Main App Component
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        {drawerItems.map((item, index) => (
          <Drawer.Screen
            key={index}
            name={item}
            component={ItemTabs}
            initialParams={{ itemName: item }}
          />
        ))}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

// Styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f8ff",
  },
  text: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333",
  },
});