React Native自定义底部TabBar：如何用SVG实现适配中央悬浮按钮的弧形缺口边框

嘿，我刚好折腾过一模一样的需求！用react-native-svg来实现这个弧形缺口边框是最靠谱的方案，既能精准控制曲线形状，又能和你的悬浮按钮完美适配。下面我一步步给你拆解实现步骤：

第一步：先装依赖 #

首先得安装react-native-svg，这是React Native里处理SVG的官方库：

# npm
npm install react-native-svg

# 或者yarn
yarn add react-native-svg

如果是iOS项目，记得跑一下cd ios && pod install。

第二步：改造你的TabBar组件 #

首先，把原来styles.container里的borderTopWidth: 0.5删掉——咱们要用SVG来替代原生边框。然后在TabBar的容器里，添加一个绝对定位的SVG组件，用来绘制带缺口的边框线。

下面是修改后的完整MyTabBar.tsx核心代码：

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Dimensions } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import Colors from './your-colors-file'; // 替换成你的颜色文件路径

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const NOTCH_RADIUS = 30; // 缺口的圆弧半径，根据你的相机按钮大小调整
const CAMERA_TAB_CENTER = SCREEN_WIDTH / 2; // 中间相机按钮的中心位置

const MyTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
  const currentActiveIndex = state.index;

  const onPress = (index: number) => {
    const event = navigation.emit({
      type: 'tabPress',
      target: state.routes[index].key,
      canPreventDefault: true,
    });
    const isFocused = currentActiveIndex === index;

    if (!isFocused && !event.defaultPrevented) {
      navigation.navigate(state.routes[index].name);
    }
  };

  // 这里保留你原来的图标和文本逻辑
  const iconName = (index: number) => {
    // 你的图标选择逻辑
  };
  const accessibilityLabelText = (index: number) => {
    // 你的文本内容逻辑
  };

  return (
    <View style={styles.container}>
      {/* 带缺口的SVG边框 */}
      <Svg style={styles.borderSvg} width={SCREEN_WIDTH} height={1}>
        <Path
          d={`
            M0,0 
            L${CAMERA_TAB_CENTER - NOTCH_RADIUS},0 
            A${NOTCH_RADIUS},${NOTCH_RADIUS} 0 0 1 ${CAMERA_TAB_CENTER + NOTCH_RADIUS},0 
            L${SCREEN_WIDTH},0
          `}
          stroke={Colors.GrayBlue}
          strokeWidth={0.5}
          fill="none"
        />
      </Svg>

      {/* 原有Tab按钮区域 */}
      {state.routes.map((route, index) => {
        const isFocused = currentActiveIndex === index;
        const isCameraButton = index === 2;
        return (
          <TouchableOpacity
            key={route.key}
            onPress={() => onPress(index)}
            style={isCameraButton ? styles.btnCameraContainer : styles.btnContainer}
            accessibilityRole="button"
          >
            <View style={[
              styles.borderButton,
              isFocused && styles.borderActive,
              !isCameraButton && styles.borderButtonWithText
            ]}>
              <Icon 
                name={iconName(index)} 
                size={30} 
                color={isFocused ? Colors.BlueCrayola : Colors.GrayBlue} 
              />
            </View>
            {!isCameraButton && (
              <Text style={[styles.labelText, isFocused && styles.labelTextActive]}>
                {accessibilityLabelText(index)}
              </Text>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'rgba(247, 247, 247, 0.9)',
    height: 85 + getBottomSpace(),
    paddingHorizontal: 10,
    justifyContent: 'space-around',
    alignItems: 'center',
    position: 'relative', // 让SVG绝对定位基于这个容器
  },
  borderSvg: {
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 1, // 确保边框在按钮下方
  },
  btnContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 85 + getBottomSpace(),
    paddingTop: 10,
    paddingBottom: getBottomSpace() + 5,
    zIndex: 2, // 按钮层级高于边框
  },
  btnCameraContainer: {
    // 自定义悬浮相机按钮的位置
    position: 'absolute',
    top: -20, // 往上偏移让按钮悬浮在缺口上方
    left: CAMERA_TAB_CENTER - 35, // 35是按钮宽度的一半，根据实际按钮尺寸调整
    width: 70,
    height: 70,
    zIndex: 3, // 相机按钮层级最高
    justifyContent: 'center',
    alignItems: 'center',
  },
  // 保留你原有的其他样式...
});

export default MyTabBar;

第三步：调整参数适配你的按钮 #

• NOTCH_RADIUS：控制缺口圆弧的大小，比如相机按钮直径是60，就设30刚好贴合按钮边缘
• CAMERA_TAB_CENTER：如果你的TabBar不是完全均匀分布，可能需要微调这个值来对齐按钮中心
• btnCameraContainer里的top和left：调整悬浮按钮的位置，确保它刚好卡在缺口正上方

为什么选SVG方案？ #

用渐变、阴影这类模拟方案要么精度不够，要么在不同设备上容易错位。SVG可以完全控制曲线的形状、粗细和颜色，性能也很稳定，适配性拉满。如果你的项目还没用到react-native-svg，安装成本极低，完全值得尝试。

内容来源于stack exchange