React Native半圆样式实现求助：如何用React实现示例效果？

Hey there! Let's break down how to create a semicircle in React—there are a few straightforward ways to do this, depending on your needs. I'll walk you through the most common methods with code examples you can drop right into your components.

Method 1: Using CSS border-radius (Simplest for Solid Color Semicircles) #

This is the go-to approach if you just need a solid-colored semicircle. You can control whether it's a top, bottom, left, or right semicircle by tweaking the border-radius values.

Here's a quick functional component example:

import React from 'react';
import './Semicircle.css';

const Semicircle = () => {
  return (
    <div className="semicircle-top"></div>
  );
};

export default Semicircle;

And the corresponding CSS file (Semicircle.css):

.semicircle-top {
  width: 200px;
  height: 100px; /* Exactly half the width */
  background: #4285F4;
  border-radius: 100px 100px 0 0; /* Top-left, top-right, bottom-right, bottom-left */
}

• For a bottom semicircle: Use border-radius: 0 0 100px 100px
• For a left semicircle: Swap width/height (width: 100px, height: 200px) and use border-radius: 100px 0 0 100px
• For a right semicircle: Swap width/height and use border-radius: 0 100px 100px 0

Method 2: Using CSS clip-path (Great for Background Images/Gradients) #

If you want a semicircle with a background image or gradient, clip-path gives you way more flexibility. You can define a custom shape to clip your element to.

Component example:

import React from 'react';
import './SemicircleClip.css';

const SemicircleClip = () => {
  return (
    <div className="semicircle-clip"></div>
  );
};

export default SemicircleClip;

CSS file (SemicircleClip.css):

.semicircle-clip {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #4285F4, #34A853); /* Or use a background image */
  /* Clip to the top half of a circle */
  clip-path: circle(50% at 50% 0%);
}

• Bottom semicircle: clip-path: circle(50% at 50% 100%)
• Left semicircle: clip-path: circle(50% at 0% 50%)
• Right semicircle: clip-path: circle(50% at 100% 50%)

Method 3: Using SVG (Best for Scalability & Interactivity) #

SVG is perfect if you need the semicircle to scale perfectly without losing quality, or if you want to add animations or interactivity directly to the shape. You can write SVG directly in your React component:

import React from 'react';

const SemicircleSVG = () => {
  return (
    <svg width="200" height="100" viewBox="0 0 200 100">
      {/* Top semicircle: draws a line across the bottom, then an arc back to the start */}
      <path 
        d="M 0 100 L 200 100 A 100 100 0 0 1 0 100 Z" 
        fill="#4285F4"
      />
    </svg>
  );
};

export default SemicircleSVG;

To make a bottom semicircle, adjust the path's d attribute to:
M 0 0 L 200 0 A 100 100 0 0 0 0 0 Z

Bonus: Reusable Dynamic Semicircle Component #

If you want a component you can reuse across your app with different sizes, colors, and positions, here's how to make it props-driven:

import React from 'react';

const DynamicSemicircle = ({ size = 200, color = '#4285F4', position = 'top' }) => {
  const isHorizontal = position === 'top' || position === 'bottom';
  const borderRadius = {
    top: `${size/2}px ${size/2}px 0 0`,
    bottom: `0 0 ${size/2}px ${size/2}px`,
    left: `${size/2}px 0 0 ${size/2}px`,
    right: `0 ${size/2}px ${size/2}px 0`
  };

  return (
    <div 
      style={{
        width: isHorizontal ? `${size}px` : `${size/2}px`,
        height: isHorizontal ? `${size/2}px` : `${size}px`,
        background: color,
        borderRadius: borderRadius[position],
        margin: '1rem'
      }}
    ></div>
  );
};

export default DynamicSemicircle;

Use it like this:

<DynamicSemicircle size={300} color="#FBBC05" position="bottom" />
<DynamicSemicircle size={150} color="#EA4335" position="left" />

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