Nativescript 透明操作栏

Question

我搜索了 Whosebug 看到这里：https://whosebug.com/search?q=nativescript+transparent+actionbar 但是所有的评论似乎都是针对 Nativescript IOS 透明的 Actionabar。我不想创建自定义 Actionabar 我知道我可以做到；我只想知道如何使常用的 Actionbar 透明，但仍使文本可见。

Answer 1

试试这个，我最初是在 Angular 上写的，但它可以适用于任何风格，你需要相应地调整语法。

HTML

<ActionBar title="Home" class="action-bar" android:backgroundColor="transparent" (loaded)="onActionBarLoaded($event)" (layoutChanged)="onLayoutChanged($event)">
</ActionBar>

<StackLayout class="page" (loaded)="onLoaded($event)" [paddingTop]="fromTop">
    <Label class="h2" text="Hello!"></Label>
</StackLayout>

TS

    fromTop: number = 0;

    onLoaded(event: EventData) {
        const layout = <GridLayout>event.object,
            page = layout.page;

        if (page.android) {
            page.android.removeRowAt(0);
        }
    }

    onActionBarLoaded(event: EventData) {
        const actionBar = <ActionBar>event.object;
        if (actionBar.ios) {
            (<any>actionBar).updateFlatness = function (navBar) {
                actionBar.ios.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
                actionBar.ios.translucent = true;
            };
        }
    }

    onLayoutChanged(event: EventData) {
        const actionBar = <ActionBar>event.object;
        if (actionBar.android) {
            this.fromTop = layout.toDeviceIndependentPixels(actionBar.getMeasuredHeight());
        }
    }

使用核心事件绑定语法 - 例如 (loaded)="onLoaded($event)" 将变为 loaded="{{ onLoaded }}"，您将在视图模型中定义回调。同样对于属性绑定，在视图模型中定义 fromTop 并在 XML.

中绑定它

Playground Sample

Nativescript 透明操作栏

Nativescript transparent actionbar

android

nativescript