reactnavigation V6 嵌套路由

---

前言

最近在写RN项目，浅浅记录一下react navigation的嵌套路由实现
大概实现效果如下

与一般的APP不同的是没有底部Tab而是换成了顶部菜单。

一、安装相关包

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/native-stack

二、编写菜单组件 Menu

import React from "react"
import { View, Image, Text, ScrollView } from "react-native"
import { getFocusedRouteNameFromRoute } from "@react-navigation/native"

import { LinkButton } from "./LinkButton"

export const Menu = React.memo(({ route }) => {
  const routeName = getFocusedRouteNameFromRoute(route) ?? "Home"

  return (
    <View className="flex-row items-center bg-blue-light text-white pt-36">
      <Image source={require("../images/logo.png")} style={{ width: 50, height: 40 }} resizeMode={"cover"} />
      <Text className={"text-white text-lg font-bold mx-10 mr-20"}>桌面管理系统</Text>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} directionalLockEnabled={true} bounces={false} scrollsToTop={false}>
        <View className={routeName === "Home" ? "bg-blue h-full flex-row items-center p-12" : " p-12"}>
          <LinkButton to={{ screen: "Home", params: { id: "jane" } }} icon={"home"}>
            首页
          </LinkButton>
        </View>
        <View className={routeName === "Workbench" ? "bg-blue h-full flex-row items-center p-12" : "p-12"}>
          <LinkButton to={{ screen: "Workbench", params: { id: "jane" } }} icon={"laptop"}>
            工作台
          </LinkButton>
        </View>
        <View className={routeName === "Members" ? "bg-blue h-full flex-row items-center p-12" : "p-12"}>
          <LinkButton to={{ screen: "Members", params: { id: "jane" } }} icon={"team"}>
            用户管理
          </LinkButton>
        </View>
        <View className={routeName === "Order" ? "bg-blue h-full flex-row items-center p-12" : "p-12"}>
          <LinkButton to={{ screen: "Order", params: { id: "jane" } }} icon={"table"}>
            订单管理
          </LinkButton>
        </View>
        <View className={routeName === "Settings" ? "bg-blue h-full flex-row items-center p-12" : "p-12"}>
          <LinkButton to={{ screen: "Settings", params: { id: "jane" } }} icon={"setting"}>
            设置
          </LinkButton>
        </View>
      </ScrollView>
    </View>
  )
})

三、配置路由

import React from "react"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

import { Menu } from "../components"
import Home from "../pages/Home"
import Members from "../pages/members"
import Order from "../pages/orders"
import Settings from "../pages/settings"
import Workbench from "../pages/workbench"

const Stack = createNativeStackNavigator()
const Routes = () => {
  function ChildStack() {
    return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Workbench" component={Workbench} />
        <Stack.Screen name="Members" component={Members} />
        <Stack.Screen name="Order" component={Order} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    )
  }
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#234EC3",
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
        headerTitleAlign: "center",
        statusBarColor: "#234EC3",
      }}
    >
      <Stack.Screen
        name="Index"
        component={ChildStack}
        options={{
          header: ({ route }) => <Menu route={route} />,
        }}
      />
    </Stack.Navigator>
  )
}
export default Routes

四、在app.js中引用路由

import React from "react"
import { NavigationContainer } from "@react-navigation/native"
import { SafeAreaProvider } from "react-native-safe-area-context"

import Routes from "./src/router/Routes"

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Routes />
      </NavigationContainer>
    </SafeAreaProvider>
  )
}