react-native-svg - 标记/线标记结束在 Android 上不起作用

Question

简单地尝试使用以下代码绘制箭头线

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Svg, { Defs, Line, Marker, Path } from "react-native-svg";

export default function App() {
  return (
     <Svg>
        <Defs>
          <Marker
            id="arrow"
            refX={0}
            refY={3}
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <Path d="M 0 0 L 6 3 L 0 6 z" fill={"red"} stroke={"red"} strokeWidth="2" />
          </Marker>
        </Defs>
        <Line
          x1={80}
          y1={80}
          x2={220}
          y2={220}
          stroke={"green"}
          strokeWidth="2"
          markerEnd="url(#arrow)"
        />
      </Svg>
  );
}

上面的代码在iOS上画了一条带箭头的线，但在Android上根本不起作用，它在Android中画了一条简单的线，没有markerEnd。

这是一个错误，还是我做错了什么？

这里有一个实时示例 https://snack.expo.dev/@vedexpo/d2ed3c 清楚地表明它在 Android 上不起作用。

谢谢。

Answer 1

谢谢@sandarshnaroju 我一直在寻找的技巧，但是，它仅适用于固定值。这是我的解决方案，我动态绘制箭头，这可能会帮助任何人寻找类似的解决方案。

import React, { Component } from 'react';
import Svg, { Line, Polygon } from 'react-native-svg';

export default class App extends Component {

drawHead=(x0, y0, x1, y1, h, w)=> {
    var L = Math.sqrt(Math.pow((x0 - x1), 2) + Math.pow((y0 - y1), 2));

    //first base point coordinates
    var base_x0 = x1 + (w / 2) * (y1 - y0) / L;
    var base_y0 = y1 + (w / 2) * (x0 - x1) / L;

    //second base point coordinates
    var base_x1 = x1 - (w / 2) * (y1 - y0) / L;
    var base_y1 = y1 - (w / 2) * (x0 - x1) / L;

    var dx = 0;
    var dy = 0;
    var head_x = 0;
    var head_y = 0;

    if (x1 == x0) {
      dx = 0;
      dy = h;
      if (y1 < y0) {
       dy = -h;
      }
    } else if (y1 == y0) {
      dx = h;
      dy = 0;
      if (x1 < x0) {
        dx = -h;
      }
    } else {
      if (x1 < x0) {
         h = -h;
      }
    var slope = (y1 - y0) / (x1 - x0);
    dx = h / Math.sqrt(1 + Math.pow(slope, 2));
    dy = dx * slope;
}

//head_points
head_x = x1 + dx;
head_y = y1 + dy;

return `${base_x0},${base_y0} ${base_x1},${base_y1} ${head_x},${head_y}`;
}

  render(){
      var x1=50
      var y1=80
      var x2=150
      var y2=30

      var arrowPoints = this.drawHead(x1,y1,x2,y2,8,10)

      return (
        <Svg width={300} height={300}>
          <Line
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke={'green'}
            strokeWidth="2"
            markerEnd="url(#arrow)"
          />
          <Polygon
            points={arrowPoints}
            fill="green"
          />
        </Svg>
      );
  }
}

看这里直播

希望它对某人有帮助。

干杯。

Answer 2

在我的项目中遇到了这个问题，经过无数个小时的尝试寻找解决方案但失败了。我放弃了并使用了

Polygon

。它适用于 Android 和 IOS

<Polygon
        points="215,225, 225,215, 228,228"
        fill="green"
       
      />

修改了你的零食代码，你可以查看这里