Nativescript

Question

在 Nativescript 应用程序中，当用户单击 material/soft 后退按钮时，我需要为 Android 实现自定义导航方案。

为简单起见，从登录选项卡模板 (https://github.com/ADjenkov/login-tabs-ng) 开始，我想实现一个导航，例如 Instagram、Facebook、WhatsApp、Pinterest 等等...

这是登录选项卡模板的示例，当我从“球员”选项卡导航到“球队”选项卡，然后点击后退按钮时，我想 return 回到“球员”选项卡（在我的页面上留在此选项卡中）。

今天，由于 Teams 选项卡出口的导航历史记录为空且根出口的导航历史记录为空，应用程序关闭。如果我在 return 进入“玩家”选项卡后点击后退按钮并且“玩家”选项卡的导航历史记录为空，我希望它能关闭。

我希望一切都清楚，如果不是这样请告诉我。有没有办法实现这种行为？

Answer 1

您需要在 data.service 中保存选定的选项卡，当用户返回 tabs.component.html 时，您可以使用 selectedIndex。在这种情况下，您也可以跳过收听 activityBackPressed。

在你的 tabs.component.html

<TabView (selectedIndexChanged)="onSelectedIndexChanged($event)" [(ngModel)]="selectedTabIndex" width="100%">

在你的 tabs.component.ts constructor( private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute, private _dataService: DataService ) { this.selectedTabIndex = this._dataService.selectedTabIndex; } 和

onSelectedIndexChanged(args: SelectedIndexChangedEventData) { const tabView = <TabView>args.object; const selectedTabViewItem = tabView.items[args.newIndex]; this._dataService.selectedTabIndex = args.newIndex; }

Answer 2

最终我实现了一个受@Manoj 的响应启发的解决方案。

我听 activityBackPressed event 并设置 args.cancel = true 以防止默认行为。

在每次选项卡更改时，我都会保存之前访问过的选项卡。然后在每个 activityBackPressed event 我检查当前插座是否可以使用 this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }) 返回。

如果不是，如果访问的选项卡列表不为空，我将 return 以编程方式转到上一个选项卡。如果访问的选项卡列表为空，我设置 args.cancel = false 退出应用程序。

如果this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }) return true 我干脆回去: this.routerExtension.back({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute });

注意：当应用程序进入后台时，您必须删除侦听器，否则您将有多个侦听器（一个通过恢复）：

application.on(application.exitEvent, (args) => {
            if (args.android) {
                application.android.off(application.AndroidApplication.activityBackPressedEvent);
            }
        });

感谢您的帮助

Nativescript - Android TabView 后退按钮自定义导航

Nativescript - Android TabView back button custom navigation

tabview

nativescript-angular

router-outlet