reactjs - Ionic 6 with React - 页面导航上没有动画

Question

我正在构建一个 Ionic React(使用 Ionic 6 和 Capacitor)应用程序。我有两个页面，Home 和 Profile。我想在主页和个人资料页面之间导航，它可以正常工作，但 iOS 模拟器上没有推送动画。

这是我的路由器(在 App.tsx 上):

 <IonApp>
     <IonRouterOutlet>
      <IonReactRouter>
        <Route exact path="/home" component={Home} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonReactRouter>
    </IonRouterOutlet>
 </IonApp >

Home 和 Profile 当然有 IonPage 作为根元素。

return (
        <IonPage>
            ...
            ...
       </IonPage>
);

我使用 useIonRouter 钩子(Hook)，像这样:

 const router = useIonRouter();
 const displayProfile = () => {
    router.push('/profile', 'forward', 'push');
};

它确实转到了个人资料页面，但根本没有动画。除了基本示例，我在他们的网站上找不到任何东西。

Answer 1

Per the official example , 请务必包含 CSS

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';