Ionic 4：侧边菜单（ion-menu）在 IOS 中没有正确关闭

Question

我正在使用 IONIC 4 为 android 和 IOS 开发应用程序。

我添加了一个侧边菜单（ion-menu），它在 android 上完美运行。

但在 IOS 中它给我带来了问题，菜单完美打开。但是当我想关闭菜单时。以图形方式关闭菜单，但当我尝试与应用程序交互时，只有侧边菜单中的选项被激活。

只有侧边菜单项有用，应用程序的其余部分被取消。

这是过程。

主页正常：

我打开侧边菜单：

我关闭菜单：

所有这些选项都被阻止：

但是这个选项仍然被激活，即使菜单已经被隐藏了。

这只发生在IOS，我的规范：

我的代码：

<ion-menu side="start" content-id="main-content">
      <ion-header class="headermenu">
            <div class="spacioemenuleft">


            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                <img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;"   src="{{pictureusuariomenu}}" >
                </div>  </div>  </div>
            </div>
            <div class="spacioemenuright">
            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">


                <div class="textsaldo2" [innerHTML]="fullname"></div>
                <div class="bloque">

                <div style="float:left; width:70%; height:100%" class="textsaldo2"> 

                <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                PIN: {{pinusuario}}
                </div>  </div>  </div>



                </div>
                <div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()"> 
                    <img alt="logo" style="width:100%; height:100%"   src="assets/imgs/compartir-b.png" >
                </div>





                </div>
                    <span class="error ion-padding" style="color:white; font-weight:bold;  margin-top:1em; padding-top:0em;" *ngIf="registrado">
            PIN COPIADO!!!
                </span>

                </div>
</div>
            </div>


      </ion-header>
      <ion-content >


      <div class="ion-padding">
      <div class="espacio2 margenboton" routerLink="/recargarsaldo">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                Recargar Saldo
            </div>  </div>  </div>
        </div>  



        <ion-list>
          <ion-item>

            <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/perfil.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Mi perfil
        </div>  </div>  </div>  
            </div>


          </ion-item>
          <ion-item>

           <div style="float:left; width:20%; height:100%;  padding:0.8em;" routerLink="/notificaciones">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/11notificaciones.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Notificaciones
        </div>  </div>  </div>  
            </div>


          </ion-item>
          <ion-item>

               <div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >


            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/6dolares.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Mis retiros
        </div>  </div>  </div>  
            </div>



          </ion-item>
          <ion-item>

               <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/11historial.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Historial
        </div>  </div>  </div>  
            </div>

          </ion-item>

                  <ion-item>


   <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/contact5.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Contáctanos
        </div>  </div>  </div>  
            </div>         


         </ion-item>

        <ion-item>

            <div style="float:left; width:20%; height:100%;  padding:0.8em;">
                    <img alt="logo"  style="width:2.7vh; height:2.6vh;"  src="assets/imgs/7cerrar.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2">

            <div style="display:table;width:100%;height:100%;">
                <div style="display:table-cell;vertical-align:middle;">
                <div style="text-align:left;" (click)="cerrarsession();"  >

                    Cerrar sesión
                    </div>  </div>  </div>  
            </div>


        </ion-item>



       </ion-list>

      </div>
       <div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">

        <div style="display:table;width:100%;height:100%;">
                <div style="display:table-cell;vertical-align:middle;">
                <div style="text-align:center;"  >


                <div style="float:left; width:40%; height:100%;" >

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:right;">

            <p class="textblue2" style="font-weight:bold;">En alianza con:</p>  
        </div>  </div>  </div>  
            </div>


                    <div style="float:left; width:60%; height:100%; padding:0.1em;     padding-top: 0.6em;" >
            <img alt="logo" style="width:80%; height:auto"   src="assets/imgs/Grupo517.png" >


            </div>



        </div>  </div>  </div>



       </div>


      </ion-content>

</ion-menu>

有什么想法吗？

Answer 1

<IonContent>
... other page components
{ authenticated ? <Menu/> : null }
</IonContent>

或者我在示例中所做的甚至没​​有在用户未通过身份验证时呈现包含菜单的路由器代码

if (!authInfo || !authInfo.initialized) {
    return (
      <IonApp>
        <IonLoading isOpen={true} />
      </IonApp>
    );
  } else {
    return (
      <IonApp>
        <>
          {authInfo?.loggedIn === true ? (
            <IonReactRouter>
              <IonSplitPane contentId="main">
                <Menu />
                <IonRouterOutlet id="main">
                  <Route path="/page/:name" component={Page} exact />
                  <Route path="/tabs" component={TabRootPage} />
                  <Redirect from="/" to="/tabs" exact />
                </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          ) : (
            <IonReactRouter>
              <Route
                path="/create-account"
                component={CreateAccountPage}
                exact
              />
              <Route path="/login" component={LoginPage} exact />
              <Redirect from="/" to="/login" exact />
            </IonReactRouter>
          )}
        </>
      </IonApp>
    );
  }

在此处查看完整的应用程序和源代码：https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter