2016-03-31 13 views
5

Ich versuche, ein NativeScript <ListView> transparent auf iOS zu bekommen und ich scheitern. Ich habe einen alten Thread zum Thema unter https://groups.google.com/forum/#!topic/nativescript/-MIWcQo-l6k gefunden, aber wenn ich die Lösung versuche, funktioniert es nicht für mich. Hier ist meine komplette Code:Machen Sie eine NativeScript ListView transparent auf iOS

/* app.css */ 
Page { background-color: black; } 

<!-- main-page.xml --> 
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded"> 
    <ListView id="list-view" items="{{ items }}" itemLoading="itemLoading"> 
    <ListView.itemTemplate> 
     <Label text="{{ name }}" /> 
    </ListView.itemTemplate> 
    </ListView> 
</Page> 

// main-page.js 
var ios = require("utils/utils"); 
var Observable = require("data/observable").Observable; 
var ObservableArray = require("data/observable-array").ObservableArray; 

var page; 
var items = new ObservableArray([]); 
var pageData = new Observable(); 

exports.loaded = function(args) { 
    page = args.object; 
    page.bindingContext = pageData; 

    // Toss a few numbers in the list for testing 
    items.push({ name: "1" }); 
    items.push({ name: "2" }); 
    items.push({ name: "3" }); 

    pageData.set("items", items); 
}; 

exports.itemLoading = function(args) { 
    var cell = args.ios; 
    if (cell) { 
    // Use ios.getter for iOS 9/10 API compatibility 
    cell.backgroundColor = ios.getter(UIColor.clearColor); 
    } 
} 

Jede Hilfe würde geschätzt. Vielen Dank!

Antwort

9

Sie nicht die Listenansicht zu transparent setzen vergessen, scheint

ListView{ 
     background-color: transparent; 
    } 
+1

Um für zukünftige Googler zu klären, verwenden Sie diesen 'TJ' 'itemLoading'' Code, um den iOS ListView Hintergrund verschwinden zu lassen. Du brauchst beides. – Todd

1

Zeit eine Hintergrundfarbe selbst mit NativeScript haben 2.4 die folgenden Werke

var cell = args.ios; 
if (cell) { 
    cell.selectionStyle = UITableViewCellSelectionStyleNone 
} 

Und wenn Sie möchten, um die Auswahl ändern Highlight-Farbe hier ist ein einfacher Ansatz, ich habe die Leistung nicht getestet, aber es funktioniert gut auf einem iPhone 6.

import { Color } from 'color'; 
cell.selectedBackgroundView = UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0)); 
let blue = new Color('#3489db'); 
cell.selectedBackgroundView.backgroundColor = blue.ios 
+0

Wie kann ich auf UITableViewCellSelectionStyleNone zugreifen? Es kommt von UITableViewCellSelectionStyle, aber ich finde keinen passenden Import mit Webstorm. Danke für deine Antwort. Mit freundlichen Grüßen, David. –

0

Nicht sicher, ob es bessere Möglichkeiten gibt, dies zu tun, aber das ist, was mit NativeScript 2.4 unter iOS für beide funktionierte: A) den ListView-Hintergrund transparent machen und B) die Farbe ändern, wenn ein Element angetippt wird:

let lvItemLoading = (args) => { 
    let cell = args.ios; 
    if (cell) { 
     // Make the iOS listview background transparent 
     cell.backgroundColor = ios.getter(cell, UIColor.clearColor); 

     // Create new background view for selected state 
     let bgSelectedView = UIView.alloc().init(); 
     bgSelectedView.backgroundColor = new Color("#777777").ios; 
     bgSelectedView.layer.masksToBounds = true; 
     cell.selectedBackgroundView = bgSelectedView; 
    } 
};