如何将 expo 选项卡嵌套在材料顶部选项卡内

Question

我是原生反应新手，是在世博标签正式发布时开始的（我什至不确定）。我有顶部选项卡导航，是用选项卡材料创建的，因为当前的博览会选项卡仅支持底部导航。

我想在每个顶部选项卡中嵌套底部选项卡，所以假设社交顶部选项卡有自己单独的底部选项卡，在上面的屏幕截图中，您可以看到社交顶部选项卡有底部选项卡猫和狗，但它们仅在不应显示的社交底部选项卡。

我知道我的文件路由错误（我猜）。在主 toptabs 布局文件中，我定义了顶级材质选项卡，对于每个选项卡屏幕（在本例中为社交选项卡屏幕），我正在渲染 AppLayout，它在社交目录（即猫和狗）中呈现选项卡。

这是里面的主要布局文件（toptabs），它渲染顶部选项卡组件，第一个 Tab.Screen 渲染 AppLayout，它渲染顶部选项卡内社交目录内的底部选项卡。

import FontAwesome from "@expo/vector-icons/FontAwesome";
import {
  useColorScheme
} from "react-native";
import Colors from "../../constants/Colors";
import {
  createMaterialTopTabNavigator
} from "@react-navigation/material-top-tabs";
import MarketplaceHome from "./marketplace";
import ChatHome from "./chat";
import AppLayout from "./social/(tabs)/_layout";

const Tab = createMaterialTopTabNavigator();

function TabBarIcon(props: {
  name: React.ComponentProps < typeof FontAwesome > ["name"];
  color: string;
}) {
  return <FontAwesome size = {
    28
  }
  style = {
    {
      marginBottom: -3
    }
  } { ...props
  }
  />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return ( <
    Tab.Navigator screenOptions = {
      {
        tabBarActiveTintColor: Colors[colorScheme ? ? "light"].tint,
      }
    } >
    <
    Tab.Screen name = "Social"
    component = {
      AppLayout
    }
    options = {
      {
        tabBarIcon: ({
          color
        }) => < TabBarIcon name = "home"
        color = {
          color
        }
        />,
      }
    }
    /> <
    Tab.Screen name = "Marketplace"
    component = {
      MarketplaceHome
    }
    options = {
      {
        tabBarIcon: ({
          color
        }) => < TabBarIcon name = "feed"
        color = {
          color
        }
        />,
      }
    }
    /> <
    Tab.Screen name = "Chat"
    component = {
      ChatHome
    }
    options = {
      {
        tabBarIcon: ({
          color
        }) => < TabBarIcon name = "female"
        color = {
          color
        }
        />,
      }
    }
    /> <
    /Tab.Navigator>
  );
}

这是toptabs内social目录中的AppLayout，理想情况下，猫和狗应该在Social顶部选项卡中渲染，问题是甚至其他目录也渲染为底部选项卡，即聊天，市场和社交，现在猫和狗是仅显示在社交顶部选项卡内的社交底部选项卡中

import {
  Tabs
} from "expo-router";
import {
  Text
} from "react-native";

export default function AppLayout() {
  return ( <
    Tabs screenOptions = {
      {
        headerShown: false,
      }
    } >
    <
    Tabs.Screen name = "cats"
    options = {
      {
        title: "Cats",
        tabBarIcon: () => < Text > 🐱 < /Text>,
      }
    }
    /> <
    Tabs.Screen name = "dogs"
    options = {
      {
        title: "Dogs",
        tabBarIcon: () => < Text > 🐶 < /Text>,
      }
    }
    /> <
    /Tabs>
  );
}

有人可以解释一下实现此目的的正确路由文件结构吗？

Answer 1

这里有一篇博客文章，展示了如何使用 expo router 来实现它：

• https://reactnativepro.dev/posts/expo-router-top-tabs

// app/(top-tabs)/_layout.tsx
import {
  MaterialTopTabNavigationEventMap,
  MaterialTopTabNavigationOptions,
  createMaterialTopTabNavigator,
} from "@react-navigation/material-top-tabs";
import { withLayoutContext } from "expo-router";
import { ParamListBase, TabNavigationState } from "@react-navigation/native";

const { Navigator } = createMaterialTopTabNavigator();

export const MaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(Navigator);

export default function TabLayout() {
  return (
    <MaterialTopTabs>
      <MaterialTopTabs.Screen name="index" options={{ title: "Tab One" }} />
      <MaterialTopTabs.Screen name="two" options={{ title: "Tab Two" }} />
    </MaterialTopTabs>
  );
}