反应原生如何曲线三角形绘制[重复]答案

【问题标题】：React native how to curve triangle draw [duplicate]反应原生如何曲线三角形绘制[重复]
【发布时间】：2021-07-29 18:25:17
【问题描述】：

您好，我想使用 View 或其他东西绘制如下曲线三角形，但白色区域必须是透明的，它应该只看起来是红色的，我该怎么做谢谢您的建议

【问题讨论】：

在这里结帐可能会有所帮助you
谢谢，我看到了，但不适合我

标签： reactjs react-native jsx

【解决方案1】：

<View style={{ flex: 1, paddingTop: 50, backgroundColor: 'orange' }}>
      <View style={{
        height: 300,
        width: "100%",
        backgroundColor: 'red'
      }}/>

      <View
        style={{
          height: 300,
          width: 300,
          borderRadius: 150,
          backgroundColor: 'white',
          bottom: 300
        }}
      />
    </View>

我能想到两种可能：

您可以将View 作为一个白色圆圈并使用绝对位置，您可以通过使用红色矩形View 来定位它，白色的位于红色的顶部（但这里是屏幕其余部分的外观非常重要
通过使用像这样绘制的 svg 三角形（您可以使用 react-native-svg）

  <Svg style={{
      height: '100%',
      width: '100%',
      backgroundColor: 'red'
    }}>
      <Path

        stroke={2}
        fill={'white'}
        d={'M 100 126 l -101 -1 l 0 100 l -1 -2 l 1 2 q 13 -88 103 -99'}
      />
    </Svg>

【讨论】：

感谢您的建议，我尝试了您说的第一种情况但不起作用，白色区域像这样绘制不透明
哦，我明白了。因此，您需要该形状的 svg
我使用 svg 编辑器 (yqnn.github.io/svg-path-editor) 来获得该形状，并通过更改前两个坐标 M 100 126 您可以将弯曲的三角形移动到任何您想要的地方
这个 svg 不是我想要的，谢谢

【解决方案2】：

实现这一点的最佳方法是圆形视图而不是方形视图。

设置位置：父视图（父视图）的绝对位置
设置位置：方形视图的相对位置（父级的子级）
设置位置：相对于圆形视图（父级的子级）

【讨论】：

我不能像这样失去白色