Nativescript-fresco с ng2+Natiivescript

Я следовал рекомендациям по использованию 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, потому что я не видел ничего, указывающего на это в документации.

Пожалуйста, помогите мне понять, в чем проблема с моим кодом?


nativescript android cross-platform angular2-nativescript fresco
person G-John    schedule 07.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что проблема с префиксом, вы можете использовать его как:

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

И для полноты вот что нужно добавить в app.module.ts при использовании с Angular:

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
person Eddy Verbruggen    schedule 07.02.2017
comment
Спасибо Эдди. То, что вы предложили, это именно то, что мне нужно было сделать. Я внес изменения именно так, как вы советовали, и теперь мое приложение работает. Вы сэкономили мне часы попыток решить проблему. Спасибо еще раз - person G-John; 08.02.2017
comment
Я заметил, что это решение вызвало проблемы с приложением iOS, поскольку nativescript-fresco инициализируется только для Android. Тег FrescoDrawee ломает приложение для iOS, даже если оно заключено в теги ‹android›. Мне пришлось добавить *ngIf=isAndroid и соответствующую функцию, чтобы указать iOS игнорировать элемент. Просто подумал, что я должен добавить, что для тех, кто использует это решение - person G-John; 08.02.2017
comment
Да, пришлось сделать что-то подобное. Я обнаружил, что в моем случае лучше всего использовать 2 разных шаблона (для каждой платформы). - person Eddy Verbruggen; 08.02.2017