Блог

Я пытаюсь создать плагин пользовательского представления, который экспортирует один или несколько элементов пользовательского интерфейса.

Я следовал инструкциям здесь: https://blog.nativescript.org/create-a-custom-view-plugin-marquee-label/index.html

а также здесь: https://v7.docs.nativescript.org/angular/plugins/angular-plugin

Когда я пытаюсь использовать registeredElement «AZPAgerContainer», приложение зависает или вылетает при загрузке.

az-pager-plugin/ui/pager-container.ios.ts

 import { AZPagerContainerBase } from "./pager-container.common";

declare var MarqueeLabel: any;

export class AZPagerContainer extends AZPagerContainerBase {
    createNativeView() {
        return MarqueeLabel.alloc().init();
    }

    initNativeView() {
        const nativeView = <typeof MarqueeLabel>this.nativeView;
        nativeView.fadeLength = 10;
        nativeView.scrollDuration = 8;
    }
}
 

az-pager-plugin/ui/pager-container.common.ts

 import { View } from "@nativescript/core";

export abstract class AZPagerContainerBase extends View {
}
 

az-pager-plugin/index.ios.ts
export * from "./ui/pager-container";

az-pager-plugin/angular/az-pager-plugin.module.ts

 import { NgModule } from "@angular/core";
import { registerElement } from "@nativescript/angular";

import { DIRECTIVES } from "./az-pager-plugin.directives";

import { AZPagerContainer } from "../";

@NgModule({
    declarations: [DIRECTIVES],
    exports: [DIRECTIVES],
})
export class AZPagerPluginModule { }

registerElement("AZPagerContainer", () => AZPagerContainer);
 

Затем добавляется плагин tns plugin add

И импортируется в app.module.ts

 // Framework
import { ErrorHandler, NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "@nativescript/angular";
import { HttpClient } from "@angular/common/http";
// Plugins
import { AZPagerPluginModule } from "az-pager-plugin/angular";
// Project modules
import { AppRoutingModule } from "./app-routing.module";
import { ShareModule } from "./modules/share/share.module";
// Components
import { AppComponent } from "./app.component";
import { NativescriptBottomNavigationComponent } from "./components/nativescript-bottom-navigation/nativescript-bottom-navigation.component";

@NgModule({
    declarations: [
        AppComponent,
        NativescriptBottomNavigationComponent,
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        ShareModule,
        AZPagerPluginModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule {}
 

Раскомментирование метки ниже предотвращает сбой, и приложение работает нормально, поэтому проблема явно связана с использованием пользовательского компонента.

 <AZPagerContainer row="1" text="Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view."></AZPagerContainer>
<!--<Label row="1" text="Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view."></Label>-->
 

Любая помощь приветствуется