nativescript
met behulp van native widget

SurfaceView gebruiken in ng2-TNS-Android: stap voor stap

U wilt bijvoorbeeld SurfaceView in ng2-nativescript gebruiken. Omdat we surfaceView niet hebben in nativescript moeten we placeholder .

eerst moeten we de vereisten importeren:

import {Component} from "@angular/core";
import placeholder = require("ui/placeholder");
let application= require("application");

voeg vervolgens de tijdelijke aanduiding toe aan uw html-bestand:

<Placeholder (creatingView)="creatingView($event)"></Placeholder>

Voeg deze methode toe aan je klas:

public creatingView(args: any) {
  var nativeView = new android.view.SurfaceView(application.android.currentContext);
  args.view = nativeView;
}

typescript weet niet wat android en we moeten platform-declaratiebestanden toevoegen. Volg dit antwoord om ze toe te voegen.

vanwege een probleem in de huidige versie van ng2-nativescript moeten we wat extra werk doen:

verander de tijdelijke aanduiding in:

<Placeholder  *ngIf="init" (creatingView)="creatingView($event)"></Placeholder>

OnInit importeren:

import {Component,OnInit} from "@angular/core";

uw klas moet OnInit implementeren

export class AppComponent implements OnInit

en voeg deze lijnen toe aan je klas:

public init: boolean = false;
ngOnInit() {
    this.init = true;
}

nu heb je een SurfaceView in je nativescript-app :)

Oproepmethoden van SurfaceView

U wilt bijvoorbeeld getHolder() aanroepen:

voeg een variabele en geladen gebeurtenis als volgt toe aan uw tijdelijke aanduiding:

  <Placeholder  #surface *ngIf="init" (creatingView)="creatingView($event)" (loaded)="onLoaded(surface)"></Placeholder>

en voeg de methode onLoaded toe aan je klas:

 onLoaded(element){
  let mSurface = element.android;
  let holder =  mSurface.getHolder();
}

LET OP :

Het is niet gegarandeerd dat de eigenschap android ( element.android ) beschikbaar zal zijn in ngAfterViewInit dus gebruikten we de loaded gebeurtenis in plaats daarvan.

SurfaceView gebruiken in ng2-TNS-Android: heel klaar voorbeeld

app.component.ts:

import {Component,OnInit} from "@angular/core";
import placeholder = require("ui/placeholder");
let application= require("application");

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit{

  public creatingView(args: any) {
    var nativeView = new android.view.SurfaceView(application.android.currentContext);
    args.view = nativeView;
  }

  onLoaded(element){
    let mSurface = element.android;
    let holder =  mSurface.getHolder();
  }

  public init: boolean = false;
    ngOnInit() {
        this.init = true;
    }
}

app.component.html:

<StackLayout>
   <Placeholder  #surface *ngIf="init" (creatingView)="creatingView($event)" (loaded)="onLoaded(surface)"></Placeholder>
</StackLayout>