使用tns-template-drawer-navigation-ng模板的底部菜单显示问题咨询

Hey there! Let's break down the difference between the two navigation styles and walk you through how to get that bottom menu you want.

两者的核心差异 #

The template you used (tns-template-drawer-navigation-ng) is built around the RadSideDrawer component—this is a side-sliding drawer (triggered from the top/side) designed for apps that need to hide secondary navigation options until needed.

What you're looking for is a bottom tab navigation bar, which uses NativeScript's built-in TabView component. This style is ideal for apps with 3-5 core, frequently accessed features, keeping navigation visible and easy to reach at the bottom of the screen.

实现底部菜单的步骤 #

Here's how to convert your project to use bottom tab navigation:

1. Clean up the existing drawer code #

First, remove all references to the side drawer:

• In app.component.html, delete the entire RadSideDrawer structure (including the drawer content and main content sections).
• In app.component.ts, remove imports for RadSideDrawer, DrawerContentComponent, and any drawer-related logic (like the toggleDrawer() method or @ViewChild references to the drawer).
• Remove DrawerContentComponent from your app.module.ts declarations if it's there.

2. Add the TabView component #

Replace the content in app.component.html with a TabView setup. This example includes 3 tabs—adjust to match your app's needs:

<TabView selectedIndex="0" androidTabsPosition="bottom">
  <!-- Home Tab -->
  <TabViewItem title="首页" iconSource="res://home">
    <page-router-outlet name="home"></page-router-outlet>
  </TabViewItem>
  
  <!-- Messages Tab -->
  <TabViewItem title="消息" iconSource="res://message">
    <page-router-outlet name="messages"></page-router-outlet>
  </TabViewItem>
  
  <!-- Profile Tab -->
  <TabViewItem title="我的" iconSource="res://profile">
    <page-router-outlet name="profile"></page-router-outlet>
  </TabViewItem>
</TabView>

• The androidTabsPosition="bottom" ensures the tabs show at the bottom on Android (iOS defaults to bottom automatically).
• Replace the iconSource values with actual icon files you've added to your App_Resources folder (add icons to App_Resources/Android/drawable-* for Android and App_Resources/iOS/Images.xcassets for iOS).

3. Update your routing configuration #

Modify app-routing.module.ts to route each tab's content to the corresponding outlet:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";

import { HomeComponent } from "./home/home.component";
import { MessagesComponent } from "./messages/messages.component";
import { ProfileComponent } from "./profile/profile.component";

const routes: Routes = [
  { path: "", redirectTo: "/(home:home)", pathMatch: "full" },
  { path: "home", component: HomeComponent, outlet: "home" },
  { path: "messages", component: MessagesComponent, outlet: "messages" },
  { path: "profile", component: ProfileComponent, outlet: "profile" }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

4. Create your tab components #

If you don't already have them, generate the components for each tab using the NativeScript CLI:

tns generate component home
tns generate component messages
tns generate component profile

Once you've completed these steps, run your app again with tns run android or tns run ios—you'll see the bottom tab navigation you're aiming for!

内容的提问来源于stack exchange，提问作者user9699663