React Native中如何实现特殊形状的View组件？

针对你需要的右上角内凹、露出底层蓝色背景的白色View，这里给几个实用的实现方案，覆盖不同平台和场景：

方案1：使用ClipPath（推荐，性能最优） #

不管是Android、iOS还是Web前端，几乎都原生支持通过路径裁剪实现自定义形状，性能开销小，适配性强。

Android示例 #

// 自定义ClipPath实现裁剪逻辑
class ConcaveCornerClipPath : ClipPath() {
    override fun getClipPath(width: Float, height: Float, path: Path) {
        path.reset()
        // 按顺序绘制路径：左上→左下→右下→右上角内凹起点→圆弧→左上闭合
        path.moveTo(0f, 0f)
        path.lineTo(0f, height)
        path.lineTo(width, height)
        path.lineTo(width, 40f) // 40f是内凹的垂直高度，可按需调整
        // 绘制内凹圆弧，半径30f，可调整
        path.arcTo(RectF(width - 60f, 0f, width, 60f), 0f, -90f, true)
        path.lineTo(0f, 0f)
    }
}

// 给白色View应用裁剪
val clipPath = ConcaveCornerClipPath()
whiteView.apply {
    clipToOutline = true
    outlineProvider = clipPath
}

Web前端（CSS）示例 #

.white-view {
    background: #fff;
    /* 用polygon绘制多边形+圆弧，参数可按需调整 */
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 40px, calc(100% - 30px) 0, 0 0);
    /* 更精确的圆弧可用path函数： */
    /* clip-path: path('M0 0 L0 100% L100% 100% L100% 40 A30 30 0 0 0 70 0 L0 0 Z'); */
}

方案2：用背景Drawable快速实现（适合静态UI） #

如果不需要动态调整内凹参数，可以直接做一个带内凹效果的背景图或Drawable，给白色View设置即可，无需写逻辑代码。

Android示例（LayerDrawable） #

<!-- res/drawable/concave_white_bg.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层白色矩形 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
    <!-- 右上角叠加蓝色椭圆，模拟内凹（和底层卡片蓝色一致） -->
    <item android:right="0dp" android:top="0dp">
        <shape android:shape="oval">
            <solid android:color="#your_card_blue_color"/>
            <size android:width="60dp" android:height="60dp"/>
        </shape>
    </item>
</layer-list>

把这个Drawable设为白色View的背景，调整椭圆大小就能控制内凹的弧度和深度。

方案3：自定义View绘制（适合复杂交互） #

如果需要动态调整内凹参数、或者在形状上做交互，直接自定义View，在onDraw里绘制路径。

Android示例 #

class ConcaveCornerView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val whitePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.WHITE
    }
    private val path = Path()
    // 可通过自定义属性暴露这些参数
    private val concaveRadius = 30f
    private val concaveHeight = 40f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        path.reset()
        // 绘制带内凹的路径
        path.moveTo(0f, 0f)
        path.lineTo(0f, h.toFloat())
        path.lineTo(w.toFloat(), h.toFloat())
        path.lineTo(w.toFloat(), concaveHeight)
        path.arcTo(RectF(w - 2*concaveRadius, 0f, w.toFloat(), 2*concaveRadius), 0f, -90f, true)
        path.lineTo(0f, 0f)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawPath(path, whitePaint)
    }
}

方案选择建议 #

• 优先用ClipPath方案：原生支持，代码简洁，性能最好，跨平台逻辑一致。
• 快速实现选背景Drawable：零代码逻辑，适合静态UI场景。
• 复杂交互/动态调整用自定义View绘制：灵活性拉满，但需要额外维护View代码。

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