如何解决Ionic React:自从添加Ionic以来,选项卡之间的切换非常慢
我刚刚将Ionic添加到我现有的React应用程序中,然后实现了@ ionic / react-router。
但是在修改导航选项卡之后,当我在两个选项卡之间切换时,我注意到延迟的巨大差异:
- 使用ReactRouter 0.5 0.5秒
- 使用IonicReactRouter 2 2秒
(我可以提供视频证明)
我的代码:
<IonTabs>
<IonRouterOutlet animated={false}>
<Redirect exact path="/tab" to="/tab/home" />
<Route exact path={`/tab/home`} render={() => <Home />} />
<Route exact path={`/tab/user`} render={() => <User />} />
<Route exact path={`/tab/ranking`} render={() => <Ranking />} />
<Route exact path={`/tab/settings`} render={() => <Settings />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="home" href="/tab/home">
<IonIcon className='icon icon-home' />
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton tab="user" href={`/tab/user`}>
<IonIcon className='icon icon-team' />
<IonLabel>Club</IonLabel>
</IonTabButton>
<IonTabButton tab="ranking" href={`/tab/ranking`}>
<IonIcon className='icon icon-ribbon' />
<IonLabel>Phases</IonLabel>
</IonTabButton>
<IonTabButton tab="settings" href={`/tab/settings`}>
<IonIcon className='icon icon-ranking' />
<IonLabel>Ranking</IonLabel>
</IonTabButton>
</IonTabBar>
我注意到,如果我从标签中删除所有内容,则“切换时间”还可以,但是我不希望空标签?
<IonRouterOutlet >
<Route exact path={`/tab/home`} render={() => <IonPage>Home is empty</IonPage>} />
...
我做错了吗?
PS:当然,我可以优化选项卡的内容,但这不能解释为什么它比react browserRouter慢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。