更改所选选项卡上的图标离子反应

Question

有没有办法更改所选选项卡上的离子图标？

.tsx

import { Redirect, Route } from "react-router-dom";
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import {
  homeOutline,
  notificationsOutline,
  personOutline,
  searchOutline,
} from "ionicons/icons";
import Tab1 from "./pages/Tab1";
import Tab2 from "./pages/Tab2";
import Tab3 from "./pages/Tab3";

/* 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";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
import "./theme/custom.css";

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <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" id="dbf8q1Q3hEY9HZnyJesy">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={homeOutline}></IonIcon>
            <IonLabel>Home</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={searchOutline}></IonIcon>
            <IonLabel>Search</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={notificationsOutline}></IonIcon>
            <IonLabel>Notifications</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab4" href="/tab4">
            <IonIcon icon={personOutline}></IonIcon>
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

在选定的（活动）选项卡上，它应该是： <IonIcon icon={home}></IonIcon> else <IonIcon icon={homeOutline}></IonIcon>

我只想玩图标。 解决方案，请！

我找到了一个 angular 解决方案： Get selected tab to switch icons Ionic 5

如何在反应中使用ionTabsDidChange ？

Answer 1

这是onIonTabsDidChange的反应。 你可以这样使用它：

<IonTabs onIonTabsDidChange={() => {...}}

但是如果你只是想在它被选中时更改图标，我自己使用 css 有一个更好的方法。 ionic append tab-selected class 到选定的选项卡，当您只想更改外观时使用它会更好。 这是一个例子：

<IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={home} className="selected"></IonIcon>
            <IonIcon icon={homeOutline} className="unselected"></IonIcon>
            <IonLabel>Home</IonLabel>
</IonTabButton>

然后在您定义类的任何地方（例如 variables.css）：

.tab-selected .unselected {
  display: none;
}

.tab-selected .selected {
  display: initial !important;
}

.selected {
  display: none;
}