benutzerdefinierte Android-Ansicht in nativescript mit Typoskript

Question

Ich möchte eine native Android-UI-Komponente (wie eine Schaltfläche oder eine Leinwand) in meiner nativescript-App mit Typoskript anzeigen. Als Beispiel mag ich mit folgendem Typoskript Code eine Android-Taste verlängern:

//custom.js 
export class NativeComponent extends android.widget.Button{ 
    constructor(context){ 
     super(context); 
     this.setText("test"); 
    } 
} 

und dann versuchte ich es in meiner XML-Ansicht zu laden:

Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"> 
    <StackLayout> 
    <Label text="Tap the button" class="title"/> 
    <Button text="TAP" tap="{{ tapAction }}" /> 
    <Label text="{{ message }}" class="message" textWrap="true"/> 
    <custom:NativeComponent /> 
    </StackLayout> 
</Page> 

... aber immer abstürzt. Die Unterlagen dazu sind sehr schlecht/ich habe noch nichts gefunden.

Answer 1

Damit Sie das benutzerdefinierte Steuerelement verwenden können, müssen Sie einen XML-Namespace hinzufügen, damit das Framework weiß, von wo die Dateien geladen werden sollen. So sollten Sie Ihre XML wie folgt aussehen:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:custom="./path/to/custom.js" loaded="pageLoaded"> 
    <StackLayout> 
    <Label text="Tap the button" class="title"/> 
    <Button text="TAP" tap="{{ tapAction }}" /> 
    <Label text="{{ message }}" class="message" textWrap="true"/> 
    <custom:NativeComponent /> 
    </StackLayout> 
</Page> 

Auch der JS-Code eine spezifische Struktur folgen müssen, wie, dass Sie eine öffentliche Funktion _createUI() für Android haben müssen, wo Sie die native Komponente Schöpfung legen sollte. Für iOS wird dies im Konstruktor gemacht. Werfen Sie einen Blick auf https://docs.nativescript.org/plugins/ui-plugin.html für weitere Details.