NativeScript Material Bottom Navigation Bar

遵循 Material Design 规范的 Android 和 iOS 底部导航栏的 Nativescript 插件

内容

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

先决条件/需求

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

安装

tns plugin add nativescript-material-bottomnavigationbar

新特性

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

用法

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

XML

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

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-material-bottomnavigationbar"
      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 '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigationTab, TabSelectedEventData } from 'nativescript-material-bottomnavigationbar';

// 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-material-bottomnavigationbar"
      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 中包含 NativeScriptMaterialBottomNavigationBarModule

import { NativeScriptMaterialBottomNavigationBarModule} from "nativescript-material-bottomnavigationbar/angular";

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

<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-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);

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

<GridLayout rows="*, auto">
    <StackLayout row="0">
        <label text="content"></label>
    </StackLayout>
    <MDBottomNavigationBar activeColor="red" inactiveColor="yellow" backgroundColor="black" @tabSelected="onBottomNavigationTabSelected" row="1">
        <MDBottomNavigationTab title="First" icon="ic_home" />
        <MDBottomNavigationTab title="Second" icon="ic_view_list" isSelectable="false" />
        <MDBottomNavigationTab title="Third" icon="ic_menu" />
    </MDBottomNavigationBar>
</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 设置的事件属性

底部导航栏

属性（可绑定）

通过 XML/HTML 设置的属性

String

底部导航栏背景的颜色

new Color('gray')

new Color('white')

方法

可通过JS/TS实例访问的方法

底部导航标签

属性（可绑定）

通过 XML/HTML 设置的属性