首页 > 网络编程 > JavaScript > javascript类库 > React > React TabBar切换与高亮

React实现TabBar切换与高亮功能

2026-05-09 09:32:13 作者：xiwahub

文章介绍了通过React Router的Route组件的exact属性实现精确匹配路由路径,并在路由切换时执行菜单高亮逻辑,通过componentDidUpdate生命周期方法判断路由地址是否切换来实现菜单项的高亮效果,需要的朋友可以参考下

渲染 TabBar.Item

// TabBar 数据
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}
        // 默认图标
        icon={<i className={`iconfont ${item.icon}`} />}
        // 选中图标
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        // 是否选中
        selected={this.state.selectedTab === item.path}
        // 点击菜单项时，进行路由切换
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });

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

内容通过路由来实现切换渲染

noRenderContent={true}

exact 是 React Router 中 Route 组件的一个属性。

功能： 精确匹配路由路径。

当 exact 属性存在时，只有当访问的路径与 /home 完全匹配时，才会渲染 [Index](javascript:void(0)) 组件。如果没有 exact，访问 /home/news、/home/list 等路径时，也会匹配到 /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>
    );
  }

思路：在路由切换时，也执行菜单高亮的逻辑代码

1 添加 componentDidUpdate 钩子函数

2 在钩子函数中判断路由地址是否切换（因为路由的信息是通过 props 传递给组件的，所以，通过比较更新前后的两个props）

3 在路由地址切换时，让菜单高亮

// 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
  componentDidUpdate(prevProps) {
    // prevProps 上一次的props，此处也就是上一次的路由信息
    // this.props 当前最新的props，此处也就是最新的路由信息
    // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
    if (prevProps.location.pathname !== this.props.location.pathname) {
      // 此时，就说明路由发生切换了
      this.setState({
        selectedTab: this.props.location.pathname,
      });
    }
  }

默认选中的TabBar菜单项

state = {
    // 默认选中的TabBar菜单项
    selectedTab: this.props.location.pathname,
  };

是否选中

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

点击菜单项时，进行路由切换

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;

到此这篇关于React实现TabBar切换与高亮功能的文章就介绍到这了,更多相关React TabBar切换与高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！