native 脚本 : Android new navigation bar

Question

根据谷歌新的 Material Design guidelines ，导航栏应该在底部。我该如何实现它(如果有办法)？目前，我使用的是 Tabview，默认情况下在 Android 上，它位于页面顶部。谢谢你

Answer 1

对于这种情况，我创建了一个自定义 Nativescript 组件。这真的很基础，但我希望它会对你有所帮助。

• app/components/bottom-navigation.ts

import gridLayoutModule = require("ui/layouts/grid-layout");
import {Label} from "ui/label";
import dependencyObservableModule = require("ui/core/dependency-observable");
import {EventData} from "data/observable";
import frameModule = require("ui/frame");

export class BottomNavigation extends gridLayoutModule.GridLayout {
    public static selectedItemProperty = new dependencyObservableModule.Property(
        "selectedItem",
        "BottomNavigation",
        new dependencyObservableModule.PropertyMetadata(undefined, dependencyObservableModule.PropertyMetadataSettings.None,
        function(data: dependencyObservableModule.PropertyChangeData) {
            if (data.newValue) {
                let instance = <BottomNavigation>data.object;
                instance.setSelectedItem(data.newValue);
            }
        }));

    public get selectedItem() {
        return this._getValue(BottomNavigation.selectedItemProperty);
    }
    public set selectedItem(value: string) {
        this._setValue(BottomNavigation.selectedItemProperty, value);
    }

    private _items = [
        { code: "TAB_1", icon: 0xe90a, label: "Tab 1" },
        { code: "TAB_2", icon: 0xe90b, label: "Tab 2"},
        { code: "TAB_3", icon: 0xe90c, label: "Tab 3"}];

    constructor() {
        super();

        this.createUi();
    }

    public setSelectedItem(selectedItem: string) {
        this.selectedItem = selectedItem;

        let icon = this.getViewById(selectedItem + "_ICON");
        icon.className = icon.className.replace("icon-unselected", "icon-selected");

        let label = this.getViewById(selectedItem + "_LABEL");
        label.className = "label-selected";
    }

    private createUi() {
        this.removeChildren();

        this.className = "bottom-navigation";

        this.addColumn(new gridLayoutModule.ItemSpec(1, "star"));
        this.addColumn(new gridLayoutModule.ItemSpec(1, "star"));
        this.addColumn(new gridLayoutModule.ItemSpec(1, "star"));

        for (let i = 0; i < this._items.length; i++) {
            let currentItem = this._items[i];

            let icon = new Label();
            icon.id = currentItem.code + "_ICON";
            icon.text = String.fromCharCode(currentItem.icon);
            icon.className = "material-icon icon-unselected";
            icon.on("tap", args => this.onNavigate(args, currentItem.code));
            this.addChild(icon);
            gridLayoutModule.GridLayout.setColumn(icon, i);

            let label = new Label();
            label.id = currentItem.code + "_LABEL";
            label.text = currentItem.label;
            label.className = "label-unselected";
            label.on("tap", args => this.onNavigate(args, currentItem.code));
            this.addChild(label);
            gridLayoutModule.GridLayout.setColumn(label, i);
        }
    }

    private onNavigate(args: EventData, code: string) {
        let selectedLabel = <Label>args.object;

        if (selectedLabel.className.indexOf("icon-selected") > -1) {
            return;
        }

        let destinationUrl = "";

        switch (code) {
            case "TAB_1":
                destinationUrl = "views/tab-1/tab-1";
                break;
            case "TAB_2":
                destinationUrl = "views/tab-2/tab-2";
                break;
            case "TAB_3":
                destinationUrl = "views/tab-3/tab-3";
                break;
        }

        frameModule.topmost().navigate({
            animated: false,
            backstackVisible: false,
            moduleName: destinationUrl
        });
    }
}

• 我的 View .xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:bn="components/bottom-navigation">
  <GridLayout rows="*, auto">
    <GridLayout>
      <!-- Your view here -->
    </GridLayout>
    <bn:BottomNavigation row="1" selectedItem="TAB_1" />
  </GridLayout>
</Page>

编辑:这是相关的 SASS 样式

.bottom-navigation {
    background-color: $primary-color;
    height: 56;
    color: $primary-color-text;

    .icon {
        horizontal-align: center;
        font-size:46;
    }

    .icon-selected {
        @extend .icon;
    }

    .icon-unselected {
        @extend .icon;
        vertical-align: center;
    }

    .label {
        horizontal-align: center;
        vertical-align: bottom;
        margin-bottom: 4;
    }

    .label-unselected {
        @extend .label;
        visibility: collapse;
    }

    .label-selected {
        @extend .label;
        visibility: visible;
    }
}