NativeScript 处理后退按钮事件

Question

我正在尝试处理 NativeScript 应用程序中的硬件后退按钮。我正在使用带有 Angular.

的 NativeScript 版本 2.3.0

这是我在 main.ts 文件中的内容

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule,Component,enableProdMode } from "@angular/core";
import { AppComponent } from "./app.component";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { routes, navigatableComponents } from "./app.routing";
import { secondComponent } from "./second.component";
import {AndroidApplication} from "application";
@Component({
    selector: 'page-navigation-test',
    template: `<page-router-outlet></page-router-outlet>`
})
export class PageNavigationApp {
}
@NgModule({
    declarations: [AppComponent,PageNavigationApp,secondComponent
        // ...navigatableComponents
        ],
    bootstrap: [PageNavigationApp],
    providers:[AndroidApplication],
    imports: [NativeScriptModule,
        NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
    ],
})
class AppComponentModule {

    constructor(private androidapplication:AndroidApplication){
        this.androidapplication.on("activityBackPressed",()=>{
            console.log("back pressed");

        })
    }

}

enableProdMode();

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

我正在使用

导入应用程序

import {AndroidApplication} from "application";

然后在 appComponentModule 的构造函数中，我正在为 activityBackPressed 注册事件，并且只是做一个 console.log.

这行不通。

我在这里错过了什么？

Answer 1

通常你应该有一个 android activity 并在 activity 上声明 backpress 函数。仅使用 AndroidApplication 是不够的。试试这个代码：

import {topmost} from "ui/frame";
import {AndroidApplication} from "application";

let activity = AndroidApplication.startActivity ||
            AndroidApplication.foregroundActivity ||
            topmost().android.currentActivity ||
            topmost().android.activity;

activity.onBackPressed = function() {
    // Your implementation
}

你也可以看看这个snippet例如

Answer 2

我也在 Angular 中使用 NativeScript，这对我来说似乎很有效：

import { RouterExtensions } from "nativescript-angular";
import * as application from "tns-core-modules/application";
import { AndroidApplication, AndroidActivityBackPressedEventData } from "tns-core-modules/application";

export class HomeComponent implements OnInit {
  constructor(private router: Router) {}
    
  ngOnInit() {
    if (application.android) {
      application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
        if (this.router.isActive("/articles", false)) {
          data.cancel = true; // prevents default back button behavior
          this.logout();
        }
      });
    }
  }
}

请注意，挂接到 backPressedEvent 是一个全局问题，因此您需要根据上面的示例检查您所在的页面并采取相应的行动。

Answer 3

import { Component, OnInit } from "@angular/core";
import * as Toast from 'nativescript-toast';
import { Router } from "@angular/router";
import * as application from 'application';

@Component({
  moduleId: module.id,
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  tries: number = 0;
  constructor(
    private router: Router
  ) {
    if (application.android) {
      application.android.on(application.AndroidApplication.activityBackPressedEvent, (args: any) => {
        if (this.router.url == '/main') {
          args.cancel = (this.tries++ > 0) ? false : true;
          if (args.cancel) Toast.makeText("Press again to exit", "long").show();
          setTimeout(() => {
            this.tries = 0;
          }, 2000);
        }
      });
    }
  }
}

Answer 4

据我所知，NativeScript 对此有内置支持，但根本没有记录。使用 onBackPressed 回调，您可以处理视图组件（例如框架、页面、底部导航）的后退按钮行为。

示例：

function pageLoaded(args) {
  var page = args.object;
  page.onBackPressed = function () {
    console.log("Returning true will block back button default behaviour.");
    return true;
  };
  page.bindingContext = homeViewModel;
}

exports.pageLoaded = pageLoaded;

这里的棘手之处在于找出哪个视图处理应用程序中的后退按钮按下操作。在我的例子中，我使用了一个包含页面的 TabView，但 TabView 本身处理了事件而不是当前页面。

NativeScript 处理后退按钮事件

NativeScript handling back button event

back-button

nativescript

angular2-nativescript