Expo React Native中如何在TabBar添加触发自定义函数的非导航按钮

实现思路 #

通过自定义React Navigation的TabBar组件，在路由列表中插入一个占位路由，遇到该路由时渲染自定义按钮，其他路由保留正常导航功能。这种方式既保证原有Tab布局不受影响，又能完全控制中间按钮的点击行为。

完整代码示例 #

1. 基础导入与页面组件

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

// 替换为你实际的页面组件
const HomeScreen = () => <Text>首页</Text>;
const ProfileScreen = () => <Text>我的</Text>;
const SettingsScreen = () => <Text>设置</Text>;
const NotificationScreen = () => <Text>通知</Text>;

const Tab = createBottomTabNavigator();

2. 自定义TabBar组件

const CustomTabBar = ({ state, descriptors, navigation }) => {
  // 标记中间按钮对应的占位路由名称
  const CUSTOM_BUTTON_ROUTE = 'CustomAction';

  return (
    <View style={styles.tabBarWrapper}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const tabLabel = options.tabBarLabel || options.title || route.name;
        const isActive = state.index === index;

        // 渲染中间自定义按钮
        if (route.name === CUSTOM_BUTTON_ROUTE) {
          return (
            <TouchableOpacity
              key={route.key}
              style={styles.middleButton}
              onPress={() => {
                // 执行你的自定义逻辑，比如打开发布弹窗、触发API请求等
                alert('中间按钮被点击！');
                // 注释导航逻辑，避免跳转
                // navigation.navigate(route.name);
              }}
            >
              <Ionicons name="add-circle" size={42} color="#2563EB" />
              <Text style={styles.buttonLabel}>发布</Text>
            </TouchableOpacity>
          );
        }

        // 渲染常规导航Tab按钮
        const handleTabPress = () => {
          const tabPressEvent = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isActive && !tabPressEvent.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={handleTabPress}
            style={styles.tabItem}
            accessibilityRole="button"
            accessibilityState={isActive ? { selected: true } : {}}
          >
            <Ionicons
              name={isActive ? 'home' : 'home-outline'}
              size={24}
              color={isActive ? '#2563EB' : '#6B7280'}
            />
            <Text style={[styles.tabLabel, { color: isActive ? '#2563EB' : '#6B7280' }]}>
              {tabLabel}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

3. 配置TabNavigator

export default function App() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} />}
      screenOptions={{
        // 禁用默认TabBar的图标和标签，使用自定义组件
        tabBarIcon: () => null,
        tabBarShowLabel: false,
      }}
    >
      {/* 左侧Tab */}
      <Tab.Screen name="Home" component={HomeScreen} options={{ title: '首页' }} />
      <Tab.Screen name="Settings" component={SettingsScreen} options={{ title: '设置' }} />
      
      {/* 中间占位路由，不会实际跳转 */}
      <Tab.Screen
        name="CustomAction"
        component={() => null}
        options={{ tabBarButton: () => null }}
      />
      
      {/* 右侧Tab */}
      <Tab.Screen name="Notification" component={NotificationScreen} options={{ title: '通知' }} />
      <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: '我的' }} />
    </Tab.Navigator>
  );
}

4. 样式定义

const styles = StyleSheet.create({
  tabBarWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 65,
    backgroundColor: '#FFFFFF',
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
    paddingBottom: 8,
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabLabel: {
    fontSize: 12,
    marginTop: 3,
  },
  middleButton: {
    position: 'absolute',
    bottom: 12,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 35,
    padding: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5, // Android阴影效果
  },
  buttonLabel: {
    fontSize: 10,
    color: '#2563EB',
    marginTop: 2,
  },
});

关键细节说明 #

1. 布局问题解决：常规Tab按钮使用flex:1均匀分配空间，中间按钮通过position: absolute居中，不会挤压或偏移其他Tab的布局。
2. 触摸响应优化：给中间按钮添加阴影和elevation确保其处于视图层级最上层，避免被其他元素遮挡导致触摸不灵敏。
3. 导航阻止：中间按钮的点击事件仅执行自定义逻辑，注释掉navigation.navigate即可避免跳转。
4. 灵活扩展：可根据需求调整按钮的大小、颜色、图标，或添加长按事件等交互。

内容的提问来源于stack exchange，提问作者Usman