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의 일부입니다 난 단지 아이폰 OS 시뮬레이터와 iOS 장비에서이를 테스트 한 - 아니 안드로이드 테스트.

RadListView ListViewStaggeredLayout의 성능을 향상시키고 원격 이미지와 함께 사용할 수 있습니까? 아니면이 이미지를 로컬 파일 시스템에 저장하고 거기에서 참조해야합니까? 고마워.

Answer 1

nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcement으로 업그레이드 했습니까? 이 구성 요소의 슬러시 UI를 수정합니다. 업그레이드하려면 다음을 수행 업그레이드하려면 모든

먼저 몇 단계입니다

:

1. NPM은 -g nativescript @ 최신
2. NPM 설치 TNS-코어 모듈을 설치 @ 최신 --save 또는
을
3. 앱 디렉토리의 루트로 이동하고 tns를 최신으로 업그레이드하십시오.
안드로이드에 대한

:

1. TNS 플랫폼 제거 안드로이드
2. TNS 플랫폼 iOS 용 안드로이드

를 추가 (전에 필요에 따라 자산을 백업) :

1. TNS를 플랫폼은 ios (이전에 필요에 따라 자산 백업)를 제거합니다.
2. TNS 플랫폼은 그럼 당신은 TNS 정보를 입력 할 수 있습니다 IOS

을 추가하고 모든 귀하의 의견 jessiPP에 대한