NativeScript Material 底部导航栏

为 NativeScript 提供的 Material Design 底部导航组件。

内容

1. 安装
2. 变更日志
3. 常见问题解答
4. 用法
   • 原生 NativeScript
   • Angular
   • Vue
   • CSS 样式化
5. API
   • BottomNavigationBar
   • BottomNavigationTab

安装

支持 NativeScript 7.0+

• tns plugin add @nativescript-community/ui-material-bottomnavigationbar

支持 NativeScript 6.x

• tns plugin add nativescript-material-bottomnavigationbar

添加插件后，请务必运行新的构建以避免任何问题。

变更日志

常见问题解答

用法

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

原生 NativeScript

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

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="@nativescript-community/ui-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-community/ui-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-community/ui-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-community/ui-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-community/ui-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);

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

<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

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

底部导航栏

属性（可绑定）

通过 XML/HTML 设置的属性

属性（内部）

通过 JS/TS 实例访问的属性

事件

通过 XML/HTML 设置的事件属性

方法

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

底部导航标签

属性（可绑定）

通过 XML/HTML 设置的属性