时间戳

首页 > 解决方案 > 与 RadSideDrawer 一起使用时，NativeScript page-router-outlet 在 iOS 上总是占据 100% 的高度

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

问题描述

在 NativeScript 中将 RadSideDrawer 与 page-router-outlet 一起使用时，似乎无法在 iOS 上不让 page-router-outlet 填充 100% 的高度。在 Android 上，它运行良好。我遇到这个问题的原因是因为我试图在我的路由器插座下方添加一个 BottomNavigationBar。下图显示了 iOS 和 Android 上的行为：

iOS

安卓

这是我的代码：

<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，它也可以正常工作。

有什么建议么？谢谢！

编辑：似乎这个问题只发生在有两个嵌套的页面路由器出口时，如这个示例游乐场： https ://play.nativescript.org/?template=play-ng&id=Z2a5Z7

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

标签： iosangularnativescript

解决方案

这似乎是 RadSideDrawer 插件（v8.0.0）的问题，该插件不是开源的，所以最好的方法是在nativescript-ui-feedback中提出问题，我看到你已经这样做了 - #1362。

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

主要组件

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

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

更新游乐场

推荐阅读