如何使用Bottom Tab Bar实现底部标签栏导航功能

通用实现逻辑 #

不管你使用什么框架开发，核心逻辑都是统一的：

• 维护一个状态变量记录当前激活的tab索引
• 给每个tab项绑定点击事件，点击时更新激活索引的取值
• 页面内容渲染区域根据当前激活索引，渲染对应位置的页面组件

以下是不同主流技术栈的具体实现示例：

1. React Native（基于@react-navigation/bottom-tabs） #

如果用官方生态的导航库实现，直接按如下配置即可自动处理跳转逻辑：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/Home';
import CategoryScreen from './screens/Category';
import CartScreen from './screens/Cart';
import MineScreen from './screens/Mine';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      {/* 四个标签分别绑定对应页面组件，点击自动切换 */}
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="分类" component={CategoryScreen} />
      <Tab.Screen name="购物车" component={CartScreen} />
      <Tab.Screen name="我的" component={MineScreen} />
    </Tab.Navigator>
  );
}

如果是自定义实现的BottomTabBar，只要在每个tab的点击回调里调用 navigation.navigate('对应页面路由名') 即可完成跳转。

2. Flutter #

基于官方BottomNavigationBar组件的实现示例：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 存储当前激活tab的索引
  int _selectedIndex = 0;
  // 四个tab对应的页面列表
  static const List<Widget> _pageList = <Widget>[
    HomePage(),
    CategoryPage(),
    CartPage(),
    MinePage(),
  ];

  void _onTabTap(int index) {
    // 点击tab时更新索引，触发页面重绘切换
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _pageList.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onTabTap,
      ),
    );
  }
}

3. 微信小程序 #

如果用原生小程序框架，直接在app.json里配置tabBar即可，框架会自动处理跳转逻辑：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

如果是自定义tabBar，点击时调用 wx.switchTab({url: '对应页面路径'}) 即可实现跳转。

注意事项 #

• 不要使用普通页面跳转API（比如RN的navigation.push、小程序的wx.navigateTo）处理tab跳转，会导致tabBar消失，必须使用框架专门提供的tab切换API
• 如果切换tab时需要传参，可以将参数存在全局状态中，对应页面激活时读取参数即可

内容的提问来源于stack exchange，提问作者G H Prakash