ListView.itemTemplate und Bilder in NativeScript

Question

Ich versuche, eine Kontaktliste Typ POC für NativeScript zu erstellen. Und ich möchte ein Bild und einen Namen in einem Listenelement haben. Der Code, den ich für das Layout verwenden ist als Scheinbar

<Page loaded="pageLoaded"> 
    <ListView items="{{ myItems }}"> 
     <ListView.itemTemplate> 
      <Image src="{{ imageSrc }}" /> 
      <Label text="{{ title }}" /> 
     </ListView.itemTemplate> 
    </ListView> 
</Page> 

folgt, wird der Titel Wert Fein kommen, aber das Bild zeigt überhaupt nicht auf. Wenn ich versuche, denselben Bildcode in eine leere Seite zu schreiben, erstellt NativeScript die Seite mit Bild.

Kann mir jemand sagen, warum das Bild nicht in der Listview-Vorlage auftaucht? Und wie kann es angezeigt werden?

Danke

Answer 1

Ich testete dies; Sie müssen die inneren Elemente in ein Layout einfügen. Ich glaube das itemTemplate kann nur EIN Kind sein. Alle meine Tests scheinen darauf hinzuweisen, dass itemTemplate auf ein einzelnes Kind zeigt.

Das funktioniert also gut, da das einzelne Kind ein StackLayout ist, das dann Ihre zwei Elemente enthält.

XML:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded"> 
     <ListView id="listview" items="{{ myItems }}"> 
      <ListView.itemTemplate> 
       <StackLayout orientation="horizontal"> 
       <Label text="{{ title }}" /> 
       <Image src="{{ src }}" stretch="none" /> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
</Page> 

für Code-Vervollständigung (für jedermann auf diese in die Zukunft) die einfachste JS:

var observableArray = require("data/observable-array"); 
function onPageLoaded(args) { 
    var page = args.object; 
    var array = new observableArray.ObservableArray(); 

    array.push({title: "Title1", src: 'http://master-technology.com/images/Logo1.gif')}); 
    array.push({title: "Title2", src: 'http://master-technology.com/images/demos/Apps-TurnItOffLogo.gif')}); 

    page.bindingContext = {myItems: array}; 
} 
exports.onPageLoaded = onPageLoaded;