如何将背景设置为对 Nativescript webview 透明？

Question

我的 xml 文件中有一个简单的 webview 标签，如下所示：

<WebView src="{{ content }}"/>

我尝试在 css 文件中将背景颜色设置为 'transparent'，也使用内联 css，但我无法将 webview 背景设置为透明.

有关该项目的更多信息： - 本机版本：2.2.1 - 我在支持系统应用程序上有一张工单动向列表（比如特定案例的发生率）。这种移动通常是 html 电子邮件（带有图像、样式等）...那是因为我使用的是网络视图而不是 html 视图。正如您在图像中看到的，webview 的背景是白色的。

这是我的 xml 片段：

<!-- Repeat ticket's movs-->
<Repeater items="{{ movs }}">
    <Repeater.itemTemplate>
        <StackLayout>
            <StackLayout class="{{ movClass }}" visibility="{{ id != -1 ? 'visible' : 'collapsed' }}">
                <Label class="date" text="{{name + ' @' + dateValue}}"/>
                <WebView src="{{ content }}"/>
            </StackLayout>

        </StackLayout>
    </Repeater.itemTemplate>
</Repeater>

在 js 文件中，我从 url 中获取动作并填充数组。如果您需要更多信息，请告诉我，我会上传。

谢谢！

BACKGROUND-NOT-TRANSPARENT-WEBVIEW

Answer 1

要使 WebView 具有透明背景色，您可以使用本机代码。对于 Android，您可以对 Android 使用 setBackgroundColor 方法使背景颜色透明。对于 iOS，您应该使用 UIColor.clearColor() 来移除 webView 背景颜色。您可以查看下面附带的示例代码。关于这一点，您还应该在项目中添加 tns-platform-declarations 插件，这将允许您在打字稿代码中使用一些本机方法。

主要-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout rows="* 70 70" columns="*"  backgroundColor="green" >
    <WebView row="0"  loaded="wvloaded" id="wv" class="webviewStyle" src="
                  <html style='background-color: transparent;'>
                  <body style='background-color: transparent;'>

                  <h1>My First Heading</h1>
                  <p>My first paragraph.</p>

                  </body>
                  </html>" />
    <Label row="1" text="{{email}}" textWrap="true" />
    <Label row="2" text="{{password}}" textWrap="true" />


  </GridLayout>
</Page>

主要-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import {WebView} from "tns-core-modules/ui/web-view";
import {isIOS, isAndroid} from "tns-core-modules/platform"


var Observable = require("data/observable").Observable;

var user = new Observable({
    email: "user@domain.com",
    password: "password"
});

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;
    page.bindingContext = user;
}

export function wvloaded(args:EventData){
    var newwv:WebView =<WebView> args.object;
    if(isAndroid){
        newwv.android.setBackgroundColor(0x00000000);//android.graphics.Color.TRANSPARENT);//
        newwv.android.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null);
    }
    if(isIOS){
        newwv.ios.backgroundColor = UIColor.clearColor;
        newwv.ios.opaque=false;
    }

}

如何将背景设置为对 Nativescript webview 透明？

How to set the background transparent to a Nativescript webview?

webview

nativescript