NativeScript/Angular2 Telerik-UIリモートURLから画像を表示するRadListViewの問題

Question

RadListViewのListViewStaggeredLayoutディレクティブで解決しようとしている2つの問題があります。 1）loadMode = "async"を使用してイメージのスムーズな初期読み込みをしたいと思います。 ListViewLinearLayoutではうまく動作しますが、ListViewStaggeredLayoutではまったく動作しません。 なしloadMode = "async"スタッガードレイアウトイメージは表示されますが、初期ロードはスムーズではありません。 2）リモートURLの画像をこのリストビューに表示したいのですが、直線的なレイアウトが機能しますが、2列のレイアウトがずれることはありません。 この質問は私が参考にした情報を受け取ったpreviously asked SO questionの続きですが、今ではアプリの開発に深く関わっています。ここで

  <!-- 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である：ここで

は私のHTMLの一部である私が唯一のiOSシミュレータとiOSデバイス上でこれをテストしている - がないAndroidのテスト。

RadListView ListViewStaggeredLayoutのパフォーマンスを向上させるにはどうすればよいですか？リモートイメージで使用することはできますか？または、これらのイメージをローカルファイルシステムに保存してそこから参照する必要がありますか？どうも。

Answer 1

nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcementにアップグレードしましたか？これは、このコンポーネントのスラッシュのUIを修正します。アップグレードするには：

をアップグレードするにはまず第一に行われていることはカップルの手順です：-g nativescript @最新

NPMは、最新の--save または

@ TNS-コアモジュールをインストール

1. NPMをインストール
2. あなたのappディレクトリのルートに移動し、最新のtnsをアップグレードしてください。
Android用

：

1. TNSプラットフォーム削除アンドロイド
2. TNSプラットフォームはiOSのアンドロイド

を追加します（前に、必要に応じて資産をバックアップ）：

1. TNSをプラットフォームはios（前に必要に応じて資産をバックアップ）を削除します
の
2. TNSプラットフォームは、次にあなたがTNS情報を入力することができ、IOS

を追加し、すべてがあなたの入力jessiPPため