ListView.itemTemplate và Hình ảnh trong NativeScript

Question

Tôi đang cố gắng tạo Danh sách POC Danh sách Liên hệ cho NativeScript. Và tôi muốn có một hình ảnh và tên trong một mục danh sách. Mã mà tôi đang sử dụng cho bố cục như sau:

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

Rõ ràng, giá trị tựa đề sắp xuất hiện, nhưng hình ảnh không hiển thị. Khi tôi cố gắng đặt cùng một mã Hình ảnh vào một trang trống, NativeScript xây dựng trang có hình ảnh.

Bất kỳ ai có thể cho tôi biết lý do hình ảnh không xuất hiện trong mẫu danh sách xem? Và làm thế nào nó có thể được hiển thị?

Cảm ơn

Answer 1

Tôi đã thử nghiệm điều này; Bạn cần phải đặt các mục bên trong trong một bố trí. Tôi tin rằng itemTemplate chỉ có thể là MỘT đứa trẻ. Tất cả các bài kiểm tra của tôi dường như chỉ ra rằng itemTemplate trỏ đến một đứa trẻ.

Vì vậy, điều này làm việc tốt khi đứa trẻ duy nhất là một StackLayout mà sau đó chứa hai mục của bạn.

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> 

Đối hoàn thành mã (cho bất cứ ai nhìn vào này trong tương lai) JS đơn giản nhất:

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;