将 onPress 添加到 svg 路径时出错答案

【问题标题】：Getting error when adding onPress to svg path将 onPress 添加到 svg 路径时出错
【发布时间】：2020-12-25 14:49:45
【问题描述】：

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import { Text } from 'native-base';
import { SvgCss } from 'react-native-svg';

const PaintObject = ({ svg, objData }) => {
  const [color, setcolor] = useState(objData.initial_color);
  const [svgfile, setsvgfile] = useState('');

  useEffect(() => {
    Axios.get(svg).then(({ data }) => {
      setsvgfile(data);
    });
  }, []);

  if (svgfile !== '') {
    return (
      <SvgCss
        width={`${objData.width}%`}
        height={`${objData.width}%`}
        fill="grey"
        style={{
          color,
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
        }}
        xml={[...svgfile].join('').replace('currentcolor"', 'currentColor" onPress={() => setcolor("#000")}')}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;

在添加 onPress 部分后，我从上面的代码中得到了这个错误。有谁知道如何解决这个问题或添加 onPress 的替代方法。

错误：预期 > (8:58)。如果这是有效的 SVG，则可能是一个错误。请提出问题

        <path fill="currentColor" onPress={() => setcolor("#000")} d="M450.647 74.66c-152.612 0-276.307 123.709-276.307 276.307h232.585a43.723 43.723 0 0 1 87.445 0h232.585c0-152.598-123.71-276.307-276.308-276.307z" transform="rotate(14 -112.125 652.114) rotate(-14 175.917 551.333)"/>

【问题讨论】：

标签： react-native react-native-svg

【解决方案1】：

你应该使用Pressable（React Native 0.63+）或TouchableOpacity。因此：

<Pressable onPress={setBlue}>
  <Svg />
</Pressable>

【讨论】：

svg 有多个路径，我希望其中只有一个可以按下。