Question

我建立了一个基本的HelloWorld项目，并添加了两个WebView，其中最上面的一个应该具有透明的背景，而另一个WebView则要透明地显示：文本应该覆盖在threeJS示例场景上（只是测试）。而是顶部的WebView具有白色背景。我可以看到其他WebView也正在记录。

附加到WebView pageLoaded事件的功能是将背景颜色更改为透明，并将图层类型更改为“软件”，如其他答案所建议。

重叠的html页面还将样式背景颜色设置为透明

使用NativeScript 6

home.component.html：

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
    <!-- Add your page content here -->
    <WebView row="0" col="0" id="WebView0" src="http://threejs.org/examples/#webgl_clipping_stencil"></WebView>
    <WebView row="0" col="0" id="webView" (loadFinished)="vwloaded" src="myServerName.com/transparent1.html"></WebView>
</GridLayout>

home.component.ts：

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

import { isIOS, isAndroid } from "tns-core-modules/platform";
import { EventData } from "tns-core-modules/data/observable";
import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";

@Component({
    selector: "Home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
    }
}

export function wvloaded(args: LoadEventData){
    var newwv:WebView =<WebView> args.object;
    if(isAndroid){
        //console.log("new WV ", newwv.android);
        //newwv.android.setBackgroundColor(0x00000000);
        newwv.android.setBackgroundColor(newwv.android.graphics.Color.TRANSPARENT);//
        newwv.android.setLayerType(newwv.android.view.View.LAYER_TYPE_SOFTWARE, null);

    }
    if(isIOS){
        //console.log(newwv.ios);
        newwv.ios.backgroundColor = newwv.ios.UIColor.clearColor;
        newwv.ios.opaque=false;
    }
}

重叠的html页面如下：

<!doctype html>
<html style="background-color: transparent;">
<head>
</head>
<body style="background-color: transparent;">
<p>kjhgfdsdfghjhgfdsdfghjuhytrfdesdf
<br>
ghjhytrdfgbnhgtfdfghgtfhgtfrdghgtfrcvbhgfdcv
<br>
nhgfdshytreszgfres
<br>fgfdsds
<br>
nsdfgtre
</p>
</body>
</html>

Answer 1

您应该使用android名称空间，而不是本机实例。

declare var android, UIColor;

....

onLoaded(event) {
    const view = event.object;
    if (view.android) {
        view.android.setBackgroundColor(android.graphics.Color.TRANSPARENT);
    }
    if (view.ios) {
        view.ios.opaque = false;
        view.ios.backgroundColor = UIColor.clearColor;
        view.ios.scrollView.backgroundColor = UIColor.clearColor;
    }
}

Playground Sample

无法在NativeScript 6 Angular中获得透明的WebView（设置backgroundColor透明和layertype软件）

1 个答案: