NativeScript/Angular2 Telerik-UI RadListView問題顯示來自遠程URL的圖像

Question

我有兩個問題，我想用RadListView中的ListViewStaggeredLayout指令解決。 1）我想使用loadMode =「async」爲了平滑初始加載圖像。這與ListViewLinearLayout很好地協作，但與ListViewStaggeredLayout完全不同。沒有loadMode =「異步」交錯佈局圖像顯示，但初始加載不平滑。 2）我想在這個列表視圖中顯示來自遠程URL的圖像，並且再次顯示線性佈局，但不是交錯排列的2列。 這個問題是這個previously asked SO question的延續，我收到了有用的信息，但現在我更深入地瞭解了應用程序開發。

這裏是我的HTML的一部分：

  <!-- pictures is an ObservableArray of objects like this: 
       {"title": "Dried Meat with Spices", "author": "Nice to Meat You", "photo": "res://listview/layouts/paleo1.jpg", "category": "paleo"} --> 
      <div *ngIf="isLinearActive && useLocalPhotos"> 
       <RadListView [items]="pictures"> 
        <template tkListItemTemplate let-item="item"> 
         <GridLayout (tap)="viewImage(item)"> 
          <Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image> 
         </GridLayout> 
        </template> 
        <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout> 
       </RadListView> 
      </div> 
      <div *ngIf="!isLinearActive && useLocalPhotos"> 
       <RadListView [items]="pictures"> 
        <template tkListItemTemplate let-item="item"> 
         <GridLayout (tap)="viewImage(item)"> 
          <Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image> 
         </GridLayout> 
        </template> 
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout> 
       </RadListView> 
      </div> 

      <!-- photosURL is an ObservableArray of objects like this used to reference remote url: 
       {"photo": "https://lh3.googleusercontent.com/za3LhYb5Nzve0BcgVCIgAwL9ETcUEpOoZVdo9KNnqi_WsowVpOXXzC-L4s9ZcGAL080GVw3YWDLboDuoR3F8"} --> 
      <div *ngIf="isLinearActive && !useLocalPhotos"> 
       <RadListView [items]="photosURL"> 
        <template tkListItemTemplate let-item="item"> 
         <GridLayout (tap)="viewImage(item)"> 
          <Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image> 
         </GridLayout> 
        </template> 
        <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout> 
       </RadListView> 
      </div> 
      <div *ngIf="!isLinearActive && !useLocalPhotos"> 
       <RadListView [items]="photosURL"> 
        <template tkListItemTemplate let-item="item"> 
         <GridLayout (tap)="viewImage(item)"> 
          <Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image> 
         </GridLayout> 
        </template> 
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout> 
       </RadListView> 
      </div> 

以下是完整的Github repo：我只測試了這個在iOS模擬器和iOS設備 - 沒有Android的測試。

如何提高RadListView ListViewStaggeredLayout的性能，並且可以將它用於遠程圖像還是需要將這些圖像保存到本地文件系統以及從那裏引用？謝謝。

Answer 1

您是否升級到nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcement。它修復了這個組件的糟糕的用戶界面。要升級：

全部升級完成後的第一個是一對夫婦的步驟：

1. NPM安裝-g nativescript @最新
2. NPM安裝TNS核心模塊@最新--save 或
3. 導航到您的應用程序目錄的根目錄，並做最新的升級。

對於安卓

1. TNS平臺刪除的Android（如前需要備份的資產）
2. TNS平臺添加的Android

對於iOS設備上：

1. TNS平臺刪除ios（根據需要備份資產）
2. TNS平臺添加IOS

然後，您可以鍵入TNS信息，並確認一切說v2.4.x