NativeScriptのListViewで画像が表示されないときに確認したいこと

外部URLから画像を読み込んで表示する画像一覧をListViewで作ったら、iOSで画像が全く表示されない。
ちなみにAndroidでは全く問題なく表示される。

上手く動かないコード

(NativeScript 3.1.1 + Angular4 + TypeScript)

Image.src属性に item.image_path で指定されているURLをセットするというもの。

list.html

  <ListView>
    <ng-template let-item="item" let-i="index">
      <StackLayout>
        <Image src="{{ item.image_path }}"></Image>
      </StackLayout>
    </ng-template>
  </ListView>

※繰り返しますが、Androidではまったく問題なく動きます。

原因

iOSは、非同期で画像を読み込んだ時に画像のサイズを初期では 0 x 0 として扱うため
読み込まれても画面上は表示されていない。

ということで、

width, height を適切に設定することで問題なく表示されます。↓

<Image src="{{ item.image_path }}" width="320" height="320" stretch="aspectFill"></Image>

参考) https://github.com/NativeScript/NativeScript/issues/696

NativeScriptはネイティブコンポーネントをTypeScriptから使えるのが大きな特賞ですが、
iOS,AndroidのAPI、仕様の違いを知っていることが所々で重要になってきますね。
ただパフォーマンスの違いは圧倒的です。
Ionic3のVirtualListなど、DOMのリサイクルを行うようなパフォーマンス重視の部品とくらべても
比較にならないヌルヌル感。
一度体験してしまうと、もうハイブリッドWebViewアプリには戻れないと思う今日このごろです。