带有React的Ionic 6-页面导航上没有动画

zte4gxcn 于 2023-11-15 发布在 Ionic

关注(0)|答案(2)|浏览(181)

我正在构建一个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钩子，像这样：

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

型
它确实会进入个人资料页面，但根本没有动画。我在他们的网站上找不到任何东西，但基本的例子。

ionic-framework

来源：https://stackoverflow.com/questions/71094332/ionic-6-with-react-no-animation-on-page-navigation

2条答案

按热度按时间

w80xi6nr1#

有点晚了，但这可能对某人有帮助。
我也面临着同样的问题，使用类似的路由结构。使用React的useContext和@ionic/react的IonRouterContext对我来说很有效：
路线：

<IonApp>
  <IonReactRouter>
    <IonRouterOutlet>
      <Route exact path="/home">
        <Home />
      </Route>
      <Route exact path="/component1">
        <Component1 />
      </Route>
      <Route exact path="/component2">
        <Component2 />
      </Route>
      <Route exact path="/">
        <Redirect to="/home" />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

字符串
App.js:

import React, { useContext } from "react";
import {
  ...
  IonRouterContext,
} from "@ionic/react";

...

const ionRouterContext = useContext(IonRouterContext),
navigate = (url) => {
    // second argument (other than "none") is essential for the transition
    ionRouterContext.push(url, "forward");
};

型
示例用法：

<IonButton onClick={() => navigate("/yourUrlHere")}>Navigate</IonButton>

型
Related Github discussion.

赞(0）回复(0）举报 2023-11-15

q35jwt9p2#

根据官方示例，请确保包含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';

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

带有React的Ionic 6-页面导航上没有动画

2条答案

相关问题

热门标签

最新问答