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