首页 文章

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

提问于
浏览 次
0

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

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

我已经尝试在css文件中将background-color设置为'transparent'，也使用内联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

webview nativescript

1 回答

  • 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 "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import {WebView} from "ui/web-view";
import {isIOS, isAndroid} from "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;
    }

}
    回复于

相关问题