Question

我按照指南使用带有ng2 + nativescript的nativescript-fresco为我的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>

这是Type-script

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

1 个答案: