Nativescript RadSideDrawer 冻结

Posted 2023-04-13

【中文标题】Nativescript RadSideDrawer 冻结

【英文标题】：Nativescript RadSideDrawer Freezes

【发布时间】：2018-04-15 13:46:54

【问题描述】：

我的 Nativescript 应用程序的许多页面中都有 RadSideDrawer。主应用程序组件有一个page-router-outlet，所有其他页面都通过导航加载到该组件中。带有抽屉的页面包含围绕页面内容的 RadSideDrawer 组件。

问题是 RadSideDrawer 在页面之间导航时冻结。你可以在这里看到它：

RadSideDrawer 过渡不平滑。但是当我安装有角度的nativescript ui samples angular application 抽屉时，过渡非常平滑：

【问题讨论】：

发布 RadSideDrawer 的 html 以及与之交互的任何代码隐藏 - 寻找过度使用 Angular 结构指令（如 *ngIf）并尽量减少它们的使用（例如使用可见性）跨度>

RadSideDrawer html 代码非常小，只有一个 ngFor。主要的性能问题是几乎所有导航到的页面都包含一个元素列表。 Nativescript 需要渲染列表 ui，它会使应用程序冻结一小段时间。我在从服务器接收到的数据和设置为 ui 之间设置了 100 毫秒的延迟，这样 ui 将在页面导航后 100 毫秒开始呈现。在那个时候 RadSideDrawer 顺利关闭。

我觉得 Nativescript 渲染 UI 的时间太长了。

@zarax 如果您在页面加载/导航上渲染大量数据，您是否尝试过将加载移动到工作人员（如果可能）或只加载项目的子集？我发现对于这样的事情，Nativescript 并不比 native 慢（注意：我做的是 nativescript vanilla 而不是 angular，所以你的里程可能会有所不同）

@Roland 我不会渲染太多数据。只是一个项目列表。准备该列表时没有 cpu 密集型操作。我只是从服务器中取出并显示它。我已经使用 RadListView。据我所知，它只渲染屏幕中可见的项目。因此，即使列表包含 50 个项目，它也会呈现其中的 5 或 6 个。但正如您所见，列表项不仅仅是文本项。它们包含一些标签。

【参考方案1】：

我认为最好的方法是延迟对渲染组件内数据的访问，以便 RadSideDrawer 的导航（和动画）可以完成。然后当数据可访问时，开始渲染组件。

如果您将 RxJS 延迟运算符（假设您使用 Observable 获取数据）与 ActivityIndi​​cator 混合使用 - 您可以获得非常好的结果。

以下是许多可能的解决方案之一。

TS 文件：

import  Component, OnInit  from "@angular/core";
import  Observable  from "rxjs";
import  EventItem  from "../../../../models/event-item.model";
import  AppStateFacadeService  from "../../../../services/app-state-facade.service";
import  delay  from "rxjs/operators";

@Component(
    selector: "Test",
    moduleId: module.id,
    templateUrl: "./test.component.html",
    styleUrls: ["./test.component.css"]
)
export class TestComponent implements OnInit 
    events$: Observable<Array<EventItem>>;

    constructor(private appStateFacade: AppStateFacadeService) 

    ngOnInit(): void 
        this.events$ = this.appStateFacade.getEvents().pipe(delay(400));
    

HTML 文件：

<StackLayout *ngIf="events$ | async as events; else nocontent">
    <ListView class="list-group" [items]="events">
        <ng-template let-event="item">
            <EventItem [eventItem]="event"></EventItem>
        </ng-template>
    </ListView>
</StackLayout>
<ng-template #nocontent>
    <ActivityIndicator row="1" #activityIndicator busy="true"   class="activity-indicator">
    </ActivityIndicator>
</ng-template>