NativeScript / NativeScript/angular

Outlets freeze when navigate to a nested route from another tab, only on Android

未关闭
#60 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

bug-pending-triage
主要语言
TypeScript
星标
55
派生
13
平均合并
16 分钟
30 天内合并 PR
1

描述

Issue Description

Outlets freeze when we navigate to a nested route from another TabView only on Android. We have 5 tabs and 2 of them has nested routes. We use page-router-outlet and native/core TabView component.

Steps to reproduce:
Go to Tab 5 -> drill down 3 levels to the nested route -> click the button to navigate to Tab 2, which takes you to Tab 2 w/o any issues-> Go back to Tab 5, you are on the last screen (nested route) but it freezes. You can't go back or can't do anything on the screen. However on iOS, instead of freezing, it goes all the way back to the main outlet.
So apparently the iOS behavior is the intentional behavior of tabView, because tabView keeps only 1 view alive and it's the main outlets in our case?

Our tabView has the androidTabsPosition="bottom" option and we realized that this sets androidOffscreenTabLimit to 1 automatically, so it means only the current tab is alive. I tried adding the androidOffscreenTabLimit="3" option to the tabView (because we have max 3 level nested navigation on Tab 5) , the tabs are not frozen anymore, BUT now the interface jumps back to the main outlet (just like iOS). Any idea how to solve this ?

Also a side note, this started happening after NativeScript 8 upgrade. We were using bottomnavigationbar with NS7 but we had to change to tabView with NS8. We didn't have any freezing or jumping back to the main outlet issues before the update.

Any insight will be appreciated, thanks so much!

Reproduction

No response

Relevant log output (if applicable)

No response

Environment
node: 14.15.0
npm: 7.6.1
nativescript: 8.1.2

### Dependencies

```json
"dependencies": {
  "@angular/animations": "~13.1.1",
  "@angular/common": "~13.1.1",
  "@angular/compiler": "~13.1.1",
  "@angular/core": "~13.1.1",
  "@angular/forms": "~13.1.1",
  "@angular/platform-browser": "~13.1.1",
  "@angular/platform-browser-dynamic": "~13.1.1",
  "@angular/router": "~13.1.1",
  "@nativescript-community/ui-material-bottomnavigationbar": "^6.2.5",
  "@nativescript/angular": "^13.0.0",
  "@nativescript/core": "~8.1.1",
  "@nativescript/email": "^2.0.5",
  "@nativescript/geolocation": "^8.0.2",
  "@nativescript/theme": "~3.0.1",
  "@nstudio/nativescript-cardview": "^2.0.1",
  "@nstudio/nativescript-floatingactionbutton": "^3.0.4",
  "moment": "^2.29.1",
  "nativescript-mapbox-sdk": "file:../well-finder-smartphone-app-.nativescript-mapbox-sdk/src",
  "nativescript-ripple": "^4.0.1",
  "nativescript-ui-sidedrawer": "^10.0.2",
  "nativescript-windowed-modal": "^7.0.0",
  "rxjs": "~7.4.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~13.1.1",
  "@angular/compiler-cli": "~13.1.1",
  "@nativescript/android": "8.1.1",
  "@nativescript/debug-ios": "^1.0.0",
  "@nativescript/ios": "8.1.0",
  "@nativescript/types": "~8.1.1",
  "@nativescript/webpack": "~5.0.0",
  "@ngtools/webpack": "~13.1.1",
  "@types/geojson": "^7946.0.8",
  "node-sass": "^7.0.1",
  "typescript": "~4.4.4"
}
Please accept these terms

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先,使用 NativeScript 8.1.2、原生/core TabView、page-router-outlet、五个标签页以及 Android 上的嵌套路由,复现报告中的流程。比较 androidOffscreenTabLimit 为 1 和 3 时的情况,然后验证从 Tab 2 返回嵌套的 Tab 5 路由时既不会冻结,也不会意外返回 main outlet。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, mobile-dev
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。