背景をNativescript Webviewに透過的に設定するにはどうすればよいですか？

私はこのように、私のxmlファイルに簡単なのWebViewタグを持っている：背景をNativescript Webviewに透過的に設定するにはどうすればよいですか？

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

「私はまた、インラインCSSを使用して、CSSファイルの「透明」に背景色を設定しようとしましたが、私はすることができますwebviewの背景を透明に設定します。

- nativescript version：2.2.1 - 私はサポートシステムアプリでチケットの動きのリスト（特定のケースに関する発生率など）を持っています。この動きは、通常、HTML形式の電子メール（画像、スタイルなど）です... htmlviewの代わりにwebviewを使用しているためです。あなたがイメージで見ることができるように、webviewの背景は白です。

私のXMLスニペットあります：JSファイルで

<!-- 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>

、私は、URLからの動きをフェッチし、配列を移入します。詳細が必要な場合は教えてください。アップロードしてください。

ありがとうございます！

BACKGROUND-NOT-TRANSPARENT-WEBVIEW

出典

2016-09-07 Pablo Sanguinetti

、あなたのプロジェクトについて、あなたのケースについていくつかの詳細情報を与えてもらえますか？ –

はい。私は説明を更新しました。 –

あなたはネイティブコードを使用することができます透明の背景色でのWebViewを作ること。 Androidの場合、setBackgroundColorのAndroid用のメソッドを使用すると、背景色を透明にすることができます。 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: "[email protected]", 
    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; 
    } 

}

出典

2016-09-09 13:47:41

ありがとうNikolay！わたしにはできる。 –

背景をNativescript Webviewに透過的に設定するにはどうすればよいですか？

答えて

関連する問題