问题描述
我有一个自定义 Transition,它从 https://www.damirscorner.com/blog/posts/20200501-CustomizingPageTransitionsInIonic5.html 滑入我的页面路线。我注意到如果我想访问 sideMenu 上的页面(因为我实现了 sidemenu + tab),它看起来好像呈现页面两次。所以动画会尝试滑入,同时,我已经看到了页面
演示:
这仅发生在包含在侧边菜单中的页面上,没有侧边菜单或注册页面的登录页面不会这样做。我尝试在 sideMenu 中创建另一个页面,它做了同样的事情。所以,我不知道也许是 sideMenu 这样做了
路线设置
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<SideMenu />
<IonRouterOutlet id="main">
<MainTabs />
<Route exact path="/" component={Index} />
<Route exact path="/get-started" component={GetStarted} />
<Route exact path="/login" component={Login} />
<Route exact path="/search" component={Search} />
<Route exact path="/profile" component={Profile} />
<Route exact path="/settings" component={Login} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
SideMenu.tsx
<IonMenu contentId="main" type="overlay" className="side-menu">
<IonContent>
<div className="ion-padding d-flex justify-center align-center">
<div className="round bg-gray p-1 w-xs">
<IonAvatar
onClick={() => {
navigate("/profile","forward"); // Navigation
}}
className="cursor ion-activatable ripple-parent"
>
<img src={Man} alt="avatar" />
<IonRippleEffect type="bounded"></IonRippleEffect>
</IonAvatar>
</div>
<div className="ml-4">
<IonText>
<h4 className="bold deep-dark-text fs-lg-1 mb-1">John Doe</h4>
</IonText>
<IonText>
<h4 className="fw-light grey-text deep-dark-text mb-2 mt-0 fs-md-1">
@Johnny01
</h4>
</IonText>
<IonText>
<h4 className="bold deep-dark-text mt-3 fs-md-1">
50k <span className="grey-text fw-light">Subscribers</span>
</h4>
</IonText>
</div>
</div>
<div className="divider"></div>
<div className="ion-padding pt-0">
<IonList>
<IonItem
lines="none"
className="pb-3"
button
onClick={() => {
navigate("/settings","forward") // Navigation
}}
>
<div slot="start" className="mt-2">
<RiSettings4Line color="#7a8fa6" size="24" />
</div>
<IonLabel className="fw-reg deep-dark-text">
<p className="fs-md-2 deep-dark-text">Settings</p>
</IonLabel>
</IonItem>
</IonList>
</div>
</IonContent>
</IonMenu>
即使显示白色背景我也不介意,但在实际页面中滑动之前不要显示页面内容。 IonReactRouter 可能是什么原因?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)