Question

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

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

我尝试将背景颜色设置为“透明＆＃39;在css文件中，也使用内联css，但我无法将webview背景设置为透明。

有关该项目的更多信息： - nativescript版本：2.2.1 - 我在支持系统应用程序上列出了票证的动作（例如关于特定案例的事件）。这种动作通常是HTML电子邮件（带有图像，样式等等）......这是因为我使用的是webview而不是htmlview。正如您在图像中看到的那样，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透明？

1 个答案: