NativeScript page-router-outlet всегда занимает 100% высоты при iOS при использовании с RadSideDrawer

Question

При использовании RadSideDrawer с пейджером-маршрутизатором в NativeScript кажется, что нет способа не заполнить пейджер-маршрутизатор на 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>

Если я удаляю страницу-маршрутизатор-розетку и помещаю что-либо на ее место, она будет правильно работать как на iOS, так и на Android. Кроме того, если я покину страницу-маршрутизатор-розетку и удалю RadSideDrawer, он также будет работать правильно.

Есть предложения? Спасибо!

РЕДАКТИРОВАТЬ: Кажется, что эта проблема возникает, только когда есть две страницы-маршрутизаторы, вложенные, как в этом примере игровой площадки: https://play.nativescript.org/?template=play-ng&id=Z2a5Z7

Возможно страницы-маршрутизаторы-выходы не должны быть вложенными тогда? Прямо сейчас у меня есть app-router-outlet в моем app.component, который лениво загружает и переключается между login.component и моим основным app pages.component. pages.component содержит RadSideDrawer и другую страницу-маршрутизатор-выход. Я сделал это, чтобы я мог лениво загружать свои страницы авторизации и обычные страницы контента приложения. Это неправильно?

Answer 1

Похоже, что проблема с плагином RadSideDrawer (v8.0.0), плагин не является открытым исходным кодом, поэтому лучшим подходом было бы поднять проблему в nativescript-ui-feedback , и я вижу, что у вас есть уже сделал - # 1362 .

У меня есть обходной путь, который, похоже, решает проблему с моей стороны.

MainComponent

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

Запрос на ретрансляцию после загрузки страницы.

Обновленная игровая площадка

Answer 2

В моем случае у меня есть модальная страница полной ширины над боковым ящиком, поэтому я создал структуру, как показано ниже. Надеюсь, это поможет вам.

<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>