Nativescript 材料设计底部导航栏

遵循材料设计指南的 Android 和 iOS 底部导航栏的 NativeScript 插件。

重要：本包将弃用，这是本仓库的最后一个版本，该组件将迁移到 nativescript-material-components

内容

1. 安装
2. 使用 JavaScript
3. 使用 Angular
4. 使用 Vue
5. CSS 样式
6. API

先决条件 / 要求

您需要 NS6 或更高版本才能使用此插件。

安装

tns plugin add nativescript-bottom-navigation

如果您想使用 NS5 及以上版本的插件，请使用版本 1.5.1

tns plugin add nativescript-bottom-navigation@1.5.1

重大变更

• BottomNavigation 类现在为 BottomNavigationBar
• NativescriptBottomNavigationModule 现为 NativeScriptBottomNavigationBarModule
• res:// 应用于引用标签中的图标
• 事件接口的 On 前缀已移除
  • 例如： OnTabPressedEventData 现为 TabPressedEventData
• 移除了 CSS 属性的 tab 前缀
  • 例如： tab-active-color 现为 active-color
• 文档已更新，请查看：D

新功能

• Badge 现支持使用方法： showBadge(index, value)
  • 注意：如果您想显示一个带有红点的徽章，则不应向函数传递值。

用法

在开始使用插件之前，您需要将 android 和 iOS 的图标添加到您的 App_Resources 目录中。

XML

您可以使用 tabs 属性设置选项卡

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-bottom-navigation"
      loaded="pageLoaded"
      class="page">
    <GridLayout rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          tabs="{{ tabs }}"
          activeColor="green"
          inactiveColor="red"
          backgroundColor="black"
          tabSelected="tabSelected"
          row="1"
        ></mdc:BottomNavigationBar>
    </GridLayout>
</Page>

import { EventData } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
import {
  BottomNavigationTab,
  TabSelectedEventData,
} from 'nativescript-bottom-navigation';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  page.bindingContext = {
    tabs: [
      new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
      new BottomNavigationTab({
        title: 'Second',
        icon: 'res://ic_view_list',
        isSelectable: false,
      }),
      new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }),
    ],
  };
}

export function tabSelected(args: TabSelectedEventData) {
  console.log('tab selected ' + args.newIndex);
}

或者您可以直接在 xml 视图中添加选项卡

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-bottom-navigation"
      loaded="pageLoaded"
      class="page">
    <GridLayout rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          activeColor="green"
          inactiveColor="red"
          backgroundColor="black"
          tabSelected="tabSelected"
          row="1"
        >
          <mdc:BottomNavigationTab title="First" icon="res://ic_home" />
          <mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
          <mdc:BottomNavigationTab title="Third" icon="res://ic_menu" />
        </mdc:BottomNavigationBar>
    </GridLayout>
</Page>

Angular

首先，您需要在您的 app.module.ts 中包含 NativeScriptBottomNavigationBarModule

import { NativeScriptBottomNavigationBarModule} from "nativescript-bottom-navigation/angular";

@NgModule({
    imports: [
        NativeScriptBottomNavigationBarModule
    ],
    ...
})

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    [tabs]="tabs"
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    (tabSelected)="onBottomNavigationTabSelected($event)"
    (tabPressed)="onBottomNavigationTabPressed($event)"
    row="1"
  ></BottomNavigationBar>
</GridLayout>

或者您可以直接在 html 中声明 BottomNavigationTab

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    (tabSelected)="onBottomNavigationTabSelected($event)"
    (tabPressed)="onBottomNavigationTabPressed($event)"
    row="1"
  >
    <BottomNavigationTab
      title="First"
      icon="res://ic_home"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title="Second"
      icon="res://ic_view_list"
      [isSelectable]="false"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title="Third"
      icon="res://ic_menu"
    ></BottomNavigationTab>
  </BottomNavigationBar>
</GridLayout>

Vue

如果您想使用 Vue，请在您的 app.js 或 main.js 中这样做

import BottomNavigationBar from 'nativescript-bottom-navigation/vue';

Vue.use(BottomNavigationBar);

这将安装并注册 BottomNavigationBar 和 BottomNavigationTab 组件到您的 Vue 实例中，现在您可以使用插件如下

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    @tabSelected="onBottomNavigationTabSelected"
    row="1"
  >
    <BottomNavigationTab title="First" icon="ic_home" />
    <BottomNavigationTab
      title="Second"
      icon="ic_view_list"
      isSelectable="false"
    />
    <BottomNavigationTab title="Third" icon="ic_menu" />
  </BottomNavigationBar>
</GridLayout>

有关如何使用 Vue 与 NativeScript 插件的更多信息，请参阅这里！

CSS 样式

您还可以使用您的 css 文件来设置或更改底部导航栏的 activeColor，inactiveColor 和 backgroundColor。

.botom-nav {
  active-color: green;
  inactive-color: black;
  background-color: blue;
}

API

1. BottomNavigationBar
2. BottomNavigationTab

• 属性（可绑定）：通过 XML/HTML 设置的属性
• 属性（内部）：通过 JS/TS 实例可访问的属性
• 事件：通过 XML/HTML 设置的事件属性

底部导航栏

属性（可绑定）

属性（内部）

事件

方法

底部导航标签

属性（可绑定）