Невозможно получить прозрачный WebView в NativeScript 6 Angular (установите программное обеспечение backgroundColor transparent & layertype) - PullRequest
Новая
       27

Невозможно получить прозрачный WebView в NativeScript 6 Angular (установите программное обеспечение backgroundColor transparent & layertype)

2 голосов
/ 06 ноября 2019

Я настроил базовый проект HelloWorld и добавил два WebView, где, как ожидалось, верхний должен иметь прозрачный фон, а другой WebView просвечивает: текст должен быть наложен на примерную сцену ThreeJS (просто тестирование). Вместо этого верхний WebView имеет белый фон. Я вижу, что другой WebView также регистрируется в журнале.

К событию pageLoaded, прикрепленному к странице WebView, относится функция, которая меняет цвет фона на прозрачный, а тип слоя на «программный», как рекомендуется в других ответах.

Наложение 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>

1 Ответ

0 голосов
/ 09 ноября 2019

Предполагается, что вы используете пространство имен 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;
    }
}

Пример игровой площадки

...