如何在React Native中创建带圆角的三角形？

你用border绘制三角形的方式没法实现顶点圆角，因为border-radius是作用在元素边框的四个角，而非三角形的三个顶点。这里给你两种实用的实现方案：

方案一：使用react-native-svg（推荐） #

这是最灵活的方式，能精准控制三角形的圆角和形状。

1. 先安装依赖：

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

Expo项目直接执行：

expo install react-native-svg

2. 实现带圆角的三角形组件：

import Svg, { Path } from 'react-native-svg';

const RoundedTriangle = () => {
  return (
    <Svg width="32" height="20" viewBox="0 0 32 20" style={{ position: 'absolute', right: 15, top: -15 }}>
      {/* 路径参数说明：M=起点，Q=贝塞尔曲线（控制圆角），L=连线，Z=闭合路径 */}
      <Path
        d="M16,0 Q18,0 18,2 L30,2 Q32,2 32,4 L16,20 Q14,20 14,18 L2,18 Q0,18 0,16 L14,2 Q14,0 16,0 Z"
        fill="#7B1B67"
      />
    </Svg>
  );
};

你可以调整d属性里的数值修改圆角大小和三角形尺寸，比如Q18,0 18,2的最后一个数字2就是顶部圆角的半径，按需调整即可。

方案二：视图叠加模拟（无需额外库） #

如果不想引入SVG库，可用三个基础视图拼接出带圆角的三角形：

import { View } from 'react-native';

const RoundedTriangle = () => {
  const cornerRadius = 2; // 圆角大小
  return (
    <View style={{ position: 'absolute', right: 15, top: -15, width: 32, height: 20 }}>
      {/* 顶部左侧圆角 */}
      <View style={{
        position: 'absolute',
        left: 14,
        top: 0,
        width: cornerRadius * 2,
        height: cornerRadius * 2,
        backgroundColor: '#7B1B67',
        borderTopLeftRadius: cornerRadius,
        borderTopRightRadius: cornerRadius,
      }} />
      {/* 顶部右侧圆角 */}
      <View style={{
        position: 'absolute',
        right: 14,
        top: 0,
        width: cornerRadius * 2,
        height: cornerRadius * 2,
        backgroundColor: '#7B1B67',
        borderTopLeftRadius: cornerRadius,
        borderTopRightRadius: cornerRadius,
      }} />
      {/* 中间梯形区域 */}
      <View style={{
        width: 32,
        height: 20,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderLeftWidth: 14,
        borderRightWidth: 14,
        borderBottomWidth: 18, // 减去圆角高度
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: '#7B1B67',
        marginTop: cornerRadius,
      }} />
    </View>
  );
};

这种方式需要微调尺寸匹配圆角效果，不如SVG精准，但无需额外依赖。

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