React Native 自定义Tab Bar实现技巧：如何制作带周边缺口的中间按钮

核心实现思路 #

• 替换默认标签栏：不使用导航库自带的默认标签栏组件，自行编写自定义标签栏容器，设置position: 'absolute'固定在页面底部，宽高按设计稿定义即可
• 缺口效果实现：有两种成熟方案可选，第一种是用react-native-svg绘制带凹陷缺口的自定义路径作为标签栏背景，缺口尺寸和中间按钮完全对齐；第二种是通过样式拼接实现，将中间按钮的zIndex设置为高于标签栏，在按钮下方对应位置放置两个和页面背景同色的小半圆角块，遮挡住标签栏的上边缘即可模拟缺口效果，后者适配难度更低，适合快速落地需求
• 中间凸起按钮处理：单独抽离中间按钮组件，按设计稿设置上下偏移量，点击事件单独绑定对应路由跳转逻辑即可
• 路由状态适配：如果使用@react-navigation/bottom-tabs这类导航库，直接将自定义组件传入tabBar属性即可，内部通过导航实例的state拿到当前激活的路由，控制标签项的选中状态

实用技巧 #

• 全面屏适配：统一用react-native-safe-area-context的useSafeAreaInsets获取设备底部安全高度，加到标签栏的paddingBottom属性中，避免内容被全面屏的手势条遮挡
• 点击热区优化：给中间按钮外层的点击容器设置hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}，扩大可点击区域，避免按钮凸起导致的点击手感差问题
• 多端阴影兼容：iOS端直接用shadowColor/shadowOffset等属性给标签栏加阴影，Android端如果阴影渲染异常可以用elevation属性替代，或者直接给svg背景添加阴影路径
• 切换动效优化：如果需要标签切换的平滑动效，可以用Animated原生API或者react-native-reanimated绑定路由的focus状态，实现图标缩放、文字颜色渐变等动画效果

核心代码片段示例 #

import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';

const CustomTabBar = ({ state, navigation }) => {
  const insets = useSafeAreaInsets();
  // 标签配置可按实际需求调整
  const tabs = [
    { name: '首页', icon: 'home-outline', activeIcon: 'home' },
    { name: '分类', icon: 'grid-outline', activeIcon: 'grid' },
    { name: '发布', icon: 'add-circle', isCenter: true },
    { name: '消息', icon: 'chatbox-outline', activeIcon: 'chatbox' },
    { name: '我的', icon: 'person-outline', activeIcon: 'person' },
  ];

  return (
    <View style={[styles.tabBar, { paddingBottom: insets.bottom }]}>
      {/* 缺口模拟块，颜色和页面背景色保持一致 */}
      <View style={styles.leftGap} />
      <View style={styles.rightGap} />
      {tabs.map((tab, index) => {
        const isFocused = state.index === index;
        if (tab.isCenter) {
          return (
            <TouchableOpacity
              key={index}
              style={styles.centerBtn}
              onPress={() => navigation.navigate(tab.name)}
              hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
            >
              <Ionicons name={tab.icon} size={32} color="#2196F3" />
            </TouchableOpacity>
          )
        }
        return (
          <TouchableOpacity
            key={index}
            style={styles.tabItem}
            onPress={() => navigation.navigate(tab.name)}
          >
            <Ionicons 
              name={isFocused ? tab.activeIcon : tab.icon} 
              size={24} 
              color={isFocused ? "#2196F3" : "#999"} 
            />
          </TouchableOpacity>
        )
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 60,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  leftGap: {
    position: 'absolute',
    top: -10,
    left: '50%',
    marginLeft: -40,
    width: 20,
    height: 20,
    borderBottomRightRadius: 20,
    backgroundColor: '#f5f5f5', // 替换为实际页面背景色
  },
  rightGap: {
    position: 'absolute',
    top: -10,
    left: '50%',
    marginLeft: 20,
    width: 20,
    height: 20,
    borderBottomLeftRadius: 20,
    backgroundColor: '#f5f5f5', // 替换为实际页面背景色
  },
  centerBtn: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: -30,
    zIndex: 99,
  },
  tabItem: {
    flex: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  }
})

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