快捷導(dǎo)航

React實(shí)現(xiàn)TabBar切換與高亮功能

更新時(shí)間：2026年05月09日 09:32:13 作者：xiwahub

文章介紹了通過React Router的Route組件的exact屬性實(shí)現(xiàn)精確匹配路由路徑,并在路由切換時(shí)執(zhí)行菜單高亮邏輯,通過componentDidUpdate生命周期方法判斷路由地址是否切換來實(shí)現(xiàn)菜單項(xiàng)的高亮效果,需要的朋友可以參考下

渲染 TabBar.Item

// TabBar 數(shù)據(jù)
const tabItems = [
  {
    title: "首頁",
    icon: "icon-ind",
    path: "/home",
  },
  {
    title: "找房",
    icon: "icon-findHouse",
    path: "/home/list",
  },
  {
    title: "資訊",
    icon: "icon-infom",
    path: "/home/news",
  },
  {
    title: "我的",
    icon: "icon-my",
    path: "/home/profile",
  },
];

// 渲染 TabBar.Item
  renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        // 默認(rèn)圖標(biāo)
        icon={<i className={`iconfont ${item.icon}`} />}
        // 選中圖標(biāo)
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        // 是否選中
        selected={this.state.selectedTab === item.path}
        // 點(diǎn)擊菜單項(xiàng)時(shí)，進(jìn)行路由切換
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });

          // 路由切換
          this.props.history.push(item.path);
        }}
      />
    ));
  }

內(nèi)容通過路由來實(shí)現(xiàn)切換渲染

noRenderContent={true}

exact 是 React Router 中 Route 組件的一個(gè)屬性。

功能： 精確匹配路由路徑。

當(dāng) exact 屬性存在時(shí)，只有當(dāng)訪問的路徑與 /home 完全匹配時(shí)，才會(huì)渲染 [Index](javascript:void(0)) 組件。如果沒有 exact，訪問 /home/news、/home/list 等路徑時(shí)，也會(huì)匹配到 /home 路由并渲染 Index 組件。

render() {
    // console.log(this.props.location.pathname)
    return (
      <div className="home">
        {/* 2.3 渲染子路由 */}
        <Route path="/home/news" component={News} />
        <Route exact path="/home" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/profile" component={Profile} />
        {/* TabBar */}

        <TabBar tintColor="#21b97a" noRenderContent={true} barTintColor="white">
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    );
  }

思路：在路由切換時(shí)，也執(zhí)行菜單高亮的邏輯代碼

1 添加 componentDidUpdate 鉤子函數(shù)

2 在鉤子函數(shù)中判斷路由地址是否切換（因?yàn)槁酚傻男畔⑹峭ㄟ^ props 傳遞給組件的，所以，通過比較更新前后的兩個(gè)props）

3 在路由地址切換時(shí)，讓菜單高亮

// 組件接收到新的props（此處，實(shí)際上是路由信息）就會(huì)觸發(fā)該鉤子函數(shù)
  componentDidUpdate(prevProps) {
    // prevProps 上一次的props，此處也就是上一次的路由信息
    // this.props 當(dāng)前最新的props，此處也就是最新的路由信息
    // 注意：在該鉤子函數(shù)中更新狀態(tài)時(shí)，一定要在 條件判斷 中進(jìn)行，否則會(huì)造成遞歸更新的問題
    if (prevProps.location.pathname !== this.props.location.pathname) {
      // 此時(shí)，就說明路由發(fā)生切換了
      this.setState({
        selectedTab: this.props.location.pathname,
      });
    }
  }

默認(rèn)選中的TabBar菜單項(xiàng)

state = {
    // 默認(rèn)選中的TabBar菜單項(xiàng)
    selectedTab: this.props.location.pathname,
  };

是否選中

selected={this.state.selectedTab === item.path}

點(diǎn)擊菜單項(xiàng)時(shí)，進(jìn)行路由切換

onPress={() => {
          this.setState({
            selectedTab: item.path,
          });

          // 路由切換
          this.props.history.push(item.path);
        }}

首頁路由處理

import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import Home from "./pages/Home";
import CityList from "./pages/CityList";

function App() {
  return (
    <Router>
      <div className="App">
        <Route
          path="/"
          exact
          render={() => <Redirect to="/home" />}
        />
        <Route path="/home" component={Home} />
        <Route path="/city" component={CityList} />
      </div>
    </Router>
  );
}

export default App;

到此這篇關(guān)于React實(shí)現(xiàn)TabBar切換與高亮功能的文章就介紹到這了,更多相關(guān)React TabBar切換與高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: