reactnavigation V6 嵌套路由

最新推荐文章于 2024-07-23 16:38:04 发布

小雪Margain

最新推荐文章于 2024-07-23 16:38:04 发布

阅读量531

点赞数

分类专栏：学习文章标签： react.js react native javascript

本文链接：https://blog.csdn.net/qq_42862581/article/details/126156630

版权

本文详细介绍了如何在React Native项目中使用reactnavigation V6创建顶部菜单的嵌套路由。通过安装相关包，编写菜单组件，配置路由，并在app.js中引用，实现了不同于常规底部Tab的顶部菜单导航效果。

摘要由CSDN通过智能技术生成

前言

最近在写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}