React Ionic Tabs 嵌套路由 Animación 无效

如何解决React Ionic Tabs 嵌套路由 Animación 无效

我尝试了不同的方法来使用 Tabs 创建嵌套路由，想法如下：

• WelcomePage->LoginPage->HomePage(Tab)->RecipePage

问题出在首页的入口动画和离开，如果Welcomepage到LoginPage有效，也会从recipepage倒退到homepage。

我知道问题在于 IonrouterOutlet 和 Route，因为它们是有组织的，但是我已经将我想到的组合做了我，并使用了几种方法来渲染路由中的组件，就像渲染一样，组件，也作为儿童。如果有人做过类似的事情并获得了最佳效果，或者可能发生了一些被忽视的事情，我将不胜感激，谢谢。

这是我的app.tsx（总结，除了/signup，我还有更多路由，大约50条路由）：

      <IonApp>
        <IonReactRouter>
          <IonContent> // This Content only makes sense here because,the white space
                         // which replaces the animation turns black,blank looks better.
            <IonRouterOutlet>
              <Route path="/home"> //La ruta de las tabs
                <Home />
              </Route>
              <Route path="/signUp" exact>
                <SignUp />
              </Route>
             </IonRouterOutlet>
          </IonContent>
        </IonReactRouter>
      </IonApp>

My Home.tsx（共 4 条路线）：

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/home/search" exact>
          <Search />
        </Route>
        <Route path="/home/explore" exact>
          <Explore />
        </Route>
        <Redirect exact path="/home" to="/home/search" />
      </IonRouterOutlet>
      <IonTabBar slot="bottom" className="py-1">
        <IonTabButton tab="search" href="/home/search">
          <IonIcon icon={searchOutline} />
          <IonLabel>{textos["page_buscar"]}</IonLabel>
        </IonTabButton>
        <IonTabButton tab="explore" href="/home/explore">
          <IonIcon icon={navigateOutline} />
          <IonLabel>{textos["page_explorar"]}</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

• 一个更图形化的示例，用于欣赏白屏，这应该是动画的地方，这是在 Android 上。

• 在 iPhone 上，PageRecipesList(/recipes) 到 PageRecipe(/recipe) 的动画（无标签）：

• 在iphone上PageHomeSearch(Tab home/search)的动画 PageRecipesList(/recipes):

• 如果去掉上面评论的内容，则如下所示：

谢谢！

编辑

和我想做的一样，但只有一个文件：

app.tsx：

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/login">
          <Login />
        </Route>
        <IonTabs>
          <IonRouterOutlet>
            <Route exact path="/tab1">
              <Tab1 />
            </Route>
            <Route exact path="/tab2">
              <Tab2 />
            </Route>
            <Route path="/tab3">
              <Tab3 />
            </Route>
            <Route exact path="/">
              <Redirect to="/tab1" />
            </Route>
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

想法是这样做：登录->tab1，然后tab1->登录。

解决方法

看看 Ionic 如何在他们的 Ionic React Conference Starter 应用程序中解决这个问题，特别是来自 App.tsx 的 this snippet 和来自他们的选项卡组件 MainTabs.tsx 的 this snippet。

从您的示例代码中，以下更改应该可以解决动画问题：

• 在 App.tsx 中，删除 IonContent
• 在 App.tsx 中，使用渲染方法 prop 而不是嵌套 Home 组件（例如，<Route path="/home" render={() => <Home />} /> 而不是 <Route path="/home"><Home /></Route>）
• 同理，使用 Home.tsx 中的 render 方法 prop，带标签的组件
• 在标签页的组件（在您的示例中为 Search 和 Explore）确保使用 IonPage，因为这是实现动画导航所必需的（请参阅 docs） ，例如

<IonPage>
  <IonHeader>...</IonHeader>
  <IonContent>...</IonContent>
</IonPage>

一般来说，按照他们的 docs 中的解释和他们的 example app 中演示的 Ionic 架构，它应该可以正常工作。