如何在React Native应用中添加底部带圆形的可折叠工具栏？

嘿，我来帮你搞定这个带圆形底部的工具栏！这里有两种实用的实现方式，都是React Native原生就能搞定的，你可以根据需求选：

方法一：纯View叠加+borderRadius实现（无额外依赖） #

这种方法适合简单的场景，不用装任何第三方库，靠几个View的定位和圆角就能实现效果。核心思路是：先做一个带弧形底部的工具栏背景，再在中间放一个半露在外面的圆形按钮，看起来就像和工具栏融合在一起了。

直接上代码：

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';

const ToolbarWithRoundBottom = () => {
  return (
    <View style={styles.container}>
      {/* 带弧形底部的工具栏背景 */}
      <View style={styles.toolbarBackground} />
      {/* 中间的圆形操作按钮 */}
      <TouchableOpacity style={styles.roundButton} onPress={() => console.log('按钮点击')}>
        <Text style={styles.buttonText}>+</Text>
      </TouchableOpacity>
      {/* 工具栏上的其他内容（比如标题、图标） */}
      <View style={styles.toolbarContent}>
        <Text style={styles.toolbarText}>我的工具栏</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: 60,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  toolbarBackground: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 20, // 留出圆形按钮的位置
    backgroundColor: '#fff',
    borderBottomLeftRadius: 12,
    borderBottomRightRadius: 12,
  },
  roundButton: {
    position: 'absolute',
    bottom: -20, // 让按钮一半在工具栏外
    left: '50%',
    transform: [{ translateX: -25 }], // 水平居中
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    // 阴影效果
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5, // 安卓专属阴影
  },
  buttonText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  toolbarContent: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
  },
});

export default ToolbarWithRoundBottom;

关键点说明： #

• toolbarBackground通过borderBottomLeftRadius和borderBottomRightRadius做出两侧的圆角，同时缩短高度留出中间圆形的位置
• 圆形按钮用绝对定位bottom: -20，让一半露在工具栏外面，营造出融合的视觉效果
• 最后用toolbarContent承载工具栏的其他内容，保证内容在最上层显示

方法二：SVG绘制自定义形状（适合复杂需求） #

如果你的设计要求更精细的弧形（比如不是对称的圆角，或者有特殊曲线），可以用react-native-svg来绘制完全自定义的工具栏背景。

第一步：安装依赖 #

npm install react-native-svg
# 或者用yarn
yarn add react-native-svg

第二步：实现代码 #

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const ToolbarWithRoundBottom = () => {
  return (
    <View style={styles.container}>
      {/* SVG绘制的自定义背景 */}
      <Svg style={styles.svgBackground} viewBox="0 0 375 60">
        <Path
          d="M0,0 L375,0 L375,40 C375,40 320,40 320,50 C320,60 255,60 255,50 C255,40 120,40 120,50 C120,60 55,60 55,50 C55,40 0,40 0,40 Z"
          fill="#fff"
          stroke="#e0e0e0"
          strokeWidth="1"
        />
      </Svg>
      {/* 中间圆形按钮 */}
      <TouchableOpacity style={styles.roundButton} onPress={() => console.log('按钮点击')}>
        <Text style={styles.buttonText}>+</Text>
      </TouchableOpacity>
      {/* 工具栏内容 */}
      <View style={styles.toolbarContent}>
        <Text style={styles.toolbarText}>我的工具栏</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: 60,
  },
  svgBackground: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
  roundButton: {
    position: 'absolute',
    bottom: -20,
    left: '50%',
    transform: [{ translateX: -25 }],
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  toolbarContent: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
  },
});

export default ToolbarWithRoundBottom;

关键点说明： #

• 用SVG的Path元素绘制完全自定义的形状，你可以用Figma、Sketch等设计工具画好形状后导出路径代码（就是d属性里的内容），这样能完美匹配你的设计稿
• viewBox是SVG的画布尺寸，这里用375（iPhone SE宽度）和60（工具栏高度）作为示例，你可以根据自己的屏幕尺寸调整

小提示 #

• 安卓设备记得用elevation实现阴影，iOS用shadow相关属性
• 可以根据设计需求调整颜色、圆角大小、按钮尺寸这些参数
• 如果是顶部工具栏，只需要把按钮的bottom改成top，调整背景的圆角方向就行

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