我建立了一个基本的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>