当与 RadSideDrawer 一起使用时，NativeScript page-router-outlet 在 iOS 上总是占据 100% 的高度

Question

在 NativeScript 中使用带页面路由器出口的 RadSideDrawer 时，似乎没有办法不让页面路由器出口填充 100% 的高度 iOS。在 Android 上，它工作正常。我之所以运行陷入这个问题是因为我试图在我的路由器插座下方添加一个 BottomNavigationBar。下图显示了 iOS 和 Android 上的行为：

这是我的代码：

<RadSideDrawer>
    <FlexboxLayout tkDrawerContent>
        <Button text="Test"></Button>
    </FlexboxLayout>
    <GridLayout class="main-grid" tkMainContent rows="*, auto">
        <StackLayout row="0">
            <page-router-outlet></page-router-outlet>
        </StackLayout>
        <BottomNavigationBar activeColor="white" inactiveColor="gray" backgroundColor="black" row="1">
            <BottomNavigationTab title="First"></BottomNavigationTab>
            <BottomNavigationTab title="Second"></BottomNavigationTab>
            <BottomNavigationTab title="Third"></BottomNavigationTab>
        </BottomNavigationBar>
    </GridLayout>
</RadSideDrawer>

如果我移除 page-router-outlet 并将任何东西放在它的位置，它将在 iOS 和 Android 上正常运行。另外，如果我离开 page-router-outlet 并移除 RadSideDrawer，它也能正常工作。

有什么建议吗？谢谢！

编辑：似乎只有当有两个 page-router-outlets 嵌套在这个示例操场中时才会出现此问题： https://play.nativescript.org/?template=play-ng&id=Z2a5Z7

也许 page-router-outlets 不应该被嵌套？现在我的 app.component 中有一个 page-router-outlet，它可以延迟加载并在 login.component 和我的主应用程序 pages.component 之间切换。 pages.component 包含 RadSideDrawer 和另一个 page-router-outlet。我这样做是为了延迟加载我的授权页面和常规应用程序内容页面。这有错吗？

Answer 1

在我的例子中，我在侧抽屉上方有一个全高宽度的模态页面，所以我创建了如下所示的结构。希望对你有帮助。

<GridLayout rows="" columns="" [class.dialogOpen]="dialogOpen">
  <StackLayout>
    <RadSideDrawer tkExampleTitle tkToggleNavButton drawerContentSize="320">
      <StackLayout tkDrawerContent>
        <app-sidenav></app-sidenav>
        // my side drawer data
      </StackLayout>
      <GridLayout tkMainContent class="app" rows="auto,*,auto">
        <GridLayout row="0" columns="*" rows="auto,auto" *ngIf="data.navbar" class="gradient">
          // custom header
        </GridLayout>
        <!-- main content -->
        <FlexboxLayout row="1">
          <StackLayout #container>
            <StackLayout [ngClass]="{'full': data.full }">
              <ng-content></ng-content>
            </StackLayout>
          </StackLayout>
        </FlexboxLayout>
        <!-- Footer -->
        <FlexboxLayout row="2" *ngIf="data.footer" class="app__footer" verticalAlignment="bottom">
          // bottom tabs for my app
        </FlexboxLayout>
      </GridLayout>
    </RadSideDrawer>
  </StackLayout>
  <StackLayout verticalAlignment="center" horizontalAlignment="center" height="100%" class="dialog__wrapper">
    <AbsoluteLayout height="100%" backgroundColor="#FFFFFF" verticalAlignment="center" horizontalAlignment="center">
      <!-- EDIT POPUP -->
      <StackLayout class="dialog__container">
        // cusotm dialog data
      </StackLayout>
    </AbsoluteLayout>
  </StackLayout>
</GridLayout>

Answer 2

这似乎是 RadSideDrawer 插件 (v8.0.0) 的问题，该插件未开源，因此最好的方法是在 nativescript-ui-feedback and I see you have done that already - #1362.

中提出问题

我有一个解决方法似乎可以解决我这边的问题。

主要组件

constructor(page: Page) {
    page.once(Page.navigatedToEvent, () => {
        page.frame.requestLayout();
    });
}

页面加载后请求重新布局。

Updated Playground

当与 RadSideDrawer 一起使用时，NativeScript page-router-outlet 在 iOS 上总是占据 100% 的高度

NativeScript page-router-outlet always taking up 100% height on iOS when used with RadSideDrawer

ios

nativescript

angular