使用 ng2+Natiivescript 的 Nativescript-fresco

Question

我按照指南将 nativescript-fresco 与 ng2+nativescript 一起用于我的 android 应用程序，因为每次我向下滚动多次然后向上滚动时它都会崩溃。我在其中使用它的组件是一个显示 20 个在线图像的列表视图。这些 url 是通过有效的 @Input 指令从父组件传递的。然而，当我切换到 FrescoDrawee 时，列表视图被渲染但图像没有。

这是组件html

<GridLayout columns="*,*,*,*,*,*,*,*,*" height="100" class="item"
            xmlns:nativescript-fresco="nativescript-fresco">
    <ios>
        <Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="ios-product-image" (tap)="details(data)"></Image>
    </ios>
    <android>
        <!--<Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="android-product-image" (tap)="details(data)"></Image>-->
        <nativescript-fresco:FrescoDrawee width="100" height="100"
                                          [imageUri]="data.imageUrl"
        ></nativescript-fresco:FrescoDrawee>
    </android>

    <StackLayout row="0" col="3" colSpan="5" (tap)="details(data)">
        <Label [text]="data.name" class="product-name"></Label>
        <Label [text]="data.description" textWrap="true" class="product-description"></Label>
        <GridLayout columns="*,*,*,*,*,*,*,*,*,*" class="increment-decrement" style="width: 100%; height: 20%; vertical-align: bottom">
            <Label [text]="data.price" class="product-price" col="0" colSpan="5"></Label>
            <ios>
                <Button text="-" col="5" colSpan="1" (tap)="dec()"></Button>
                <Label [text]="count" col="6" colSpan="3" class="product-amount" ></Label>
                <Button text="+" col="9" colSpan="1" (tap)="inc()"></Button>
            </ios>
            <android>
                <Label text="-" col="5" colSpan="1" class="inc-dec" (tap)="dec()"></Label>
                <Label [text]="count" col="6" colSpan="3" class="product-amount"></Label>
                <Label text="+" col="9" colSpan="1" class="inc-dec" (tap)="inc()"></Label>
            </android>

        </GridLayout>
    </StackLayout>


    <ios>
        <Button col="11" class="cart" colSpan="1"></Button>
    </ios>


    <android>
        <Label col="11" class="cart" colSpan="1"></Label>
    </android>

    <Image src="~/media/ic_add_shopping_cart_white_24dp.png" col="11"
           style="height: 20%; width: 20%;" (tap)="addToCart()"></Image>

</GridLayout>

这是打字稿

import { Component, OnInit, Input} from "@angular/core";
import LabelModule = require("ui/label");
import application = require("application");
import { RouterExtensions } from "nativescript-angular/router";
import { PublicVariables } from "../../shared/publicVariables";


@Component({
  selector:'product-list',
  templateUrl: 'pages/products/product_list.html',
  styleUrls: ['pages/products/product_list-common.css',      'pages/products/product_list.css']
})

export class ProductListComponent implements OnInit {
   @Input() data: any;
   private count=0;

constructor(private routerExtensions: RouterExtensions) {}

ngOnInit() {

}
details() {
    this.routerExtensions.navigate(["/product/:id"]);
    PublicVariables.currentProduct = this.data;
}
inc() {
    ++this.count;
}
dec() {
    if(this.count>0) {
        --this.count;
    }
}
}

我对本机脚本比较陌生，所以我的代码可能不是最干净的。我已经将 nativescript-fresco 插件添加到我的项目中，在 AppModule 中导入并初始化它。我不知道的是，除了 FrescoDrawee 标签之外，我是否需要向组件本身添加任何内容，因为我在文档中没有看到任何指示。

请帮我看看我的代码有什么问题？

Answer 1

我认为问题出在前缀上，您可以将其用作：

<FrescoDrawee width="100" height="100" [imageUri]="data.imageUrl"></FrescoDrawee>

为了完整起见，这是在与 Angular 一起使用时需要添加到 app.module.ts 中的内容：

import { TNSFrescoModule } from "nativescript-fresco/angular";
import fresco = require("nativescript-fresco");
import application = require("application");

if (application.android) {
  application.onLaunch = function (intent) {
    fresco.initialize();
  };
}

@NgModule({
  imports: [
    TNSFrescoModule

使用 ng2+Natiivescript 的 Nativescript-fresco

Nativescript-fresco with ng2+Natiivescript

android

cross-platform

nativescript

fresco

angular2-nativescript