使用自定义操作栏 NativeScript

在 NativeScript 应用中，操作栏是用户能够使用的主要导航元素之一。 默认情况下，每个页面都有一个操作栏，其中包含标题和任何与该页面相关的操作。

然而，在某些情况下，您可能希望自定义操作栏以满足您的应用程序需求。 在这个教程中，我们将通过以下步骤了解如何使用NativeScript 创建自定义操作栏。

步骤1：准备工作

在开始创建自定义操作栏之前，您需要确保已安装 NativeScript 以及运行 native-script doctor 命令进行配置。

步骤2：创建新的 NativeScript 应用

首先，让我们使用 NativeScript CLI 创建一个新的应用。 打开您的终端或控制台并运行以下命令：

tns create myApp --ng

步骤3：安装 NativeScript UI 插件

接下来，您需要安装 NativeScript UI 插件。 该插件支持许多常见的 UI 控件，包括操作栏。

运行以下命令进行安装：

tns install @nativescript/ui --save

步骤4：创建自定义操作栏

接下来，我们将创建一个自定义操作栏。 首先，在您的应用程序根目录中创建一个名为“shared”(共享)的文件夹。 在 shared 文件夹中，创建一个名为“app.css”的新文件。

在 app.css 文件中，您可以定义应用程序的全局样式。 为了创建自定义操作栏，将以下代码添加到 app.css 文件中：

.action-bar-custom {
    background-color: #c62020;
    color: #fff;
}

该代码为操作栏设置了自定义样式。 可以通过将 action-bar-custom 类添加到操作栏标记中来应用此样式。 在下面的代码示例中，我们将在 app.component.html 文件中创建自定义操作栏。

打开 app.component.html 文件并添加以下代码：

<ActionBar title="My App" class="action-bar-custom">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onTap()"></NavigationButton>
</ActionBar>

<StackLayout class="page">
    <Label class="h2 text-center" textWrap="true" text="Welcome to NativeScript!"></Label>
</StackLayout>

在这里，我们设置了操作栏的标题为“我的应用程序”，并将自定义类“action-bar-custom”添加到操作栏中。 在操作栏下面，我们添加了一个名为“page”的 StackLayout，并向其添加了一个简单的标签。

这就创建了一个自定义操作栏！

步骤5：设置 NavigationButton （导航按钮）

但是，我们的操作栏并没有实现任何实用功能。 为此，我们将在操作栏中添加一个导航按钮。 这个按钮可以用来执行特定的操作，比如打开侧栏菜单。

在 app.component.html 文件中，将以下代码添加到 ActionBar 标记内：

<NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onTap()"></NavigationButton>

这将向操作栏添加一个名为“导航按钮”的新元素，并为其设置图标。

步骤6：实现导航按钮的操作

现在我们已经制定了导航按钮，但我们需要实现它的操作。 在这里，我们将打开应用程序的侧边菜单。

在 app.component.ts 文件中添加以下代码：

import { Component } from "@angular/core";
import * as app from "@nativescript/core/application";
import * as frame from "@nativescript/core/ui/frame";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
})
export class AppComponent {
    onTap() {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }
}

在这里，我们使用 RadSideDrawer 控件打开应用程序的侧边栏菜单。 要使用此功能，你需要安装 nativescript-ui-sidedrawer 并在 app.module.ts文件中导入 NativeScriptUISideDrawerModule。

import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [AppComponent],
    schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

步骤7：测试应用程序

现在，您可以重新启动应用程序并测试导航按钮的功能。 点击导航按钮应打开应用程序的侧边栏菜单。

结论

在这个教程中，我们学习了如何创建一个自定义操作栏，向其添加导航按钮，并为其设置操作。 您现在可以用自己的样式和操作创建自定义操作栏并为您的 NativeScript 应用程序添加更多功能。