在React原生中实现自定义底部选项卡栏弯曲突出

import React, { useState } from 'react';
import { FaHome, FaUser, FaSettings } from 'react-icons/fa';

const Tab = ({ icon, label, selected, onClick }) => {
  return (
    <div
      className={`tab ${selected ? 'selected' : ''}`}
      onClick={onClick}
    >
      {icon}
      <span>{label}</span>
    </div>
  );
};

const BottomTabBar = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabClick = (index) => {
    setSelectedTab(index);
  };

  return (
    <div className="bottom-tab-bar">
      <Tab
        icon={<FaHome />}
        label="Home"
        selected={selectedTab === 0}
        onClick={() => handleTabClick(0)}
      />
      <Tab
        icon={<FaUser />}
        label="Profile"
        selected={selectedTab === 1}
        onClick={() => handleTabClick(1)}
      />
      <Tab
        icon={<FaSettings />}
        label="Settings"
        selected={selectedTab === 2}
        onClick={() => handleTabClick(2)}
      />
    </div>
  );
};

export default BottomTabBar;