在“react-native-svg”中按下后消失

Question

我使用react-native-svg中的SvgCss来显示和更改几个外部svg的颜色。

我把onPress放在上面，它在大多数情况下都能像预期的那样工作。但我注意到一些svgs在按下后会有奇怪的行为。例如，按下后，下面的svg将消失！

这里有什么问题？

<svg xmlns="http://www.w3.org/2000/svg" width="188" height="195" viewBox="0 0 188 195">
    <defs>
        <clipPath id="sjkzt87o0a">
            <path fill="none" stroke="#707070" d="M0 0H188V195H0z" transform="translate(277 228)"/>
        </clipPath>
    </defs>
    <g clip-path="url(#sjkzt87o0a)" transform="translate(-277 -228)">
        <g>
            <path fill="currentColor" d="M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z" transform="rotate(14 -112.125 652.114) rotate(-14 269.633 431.384)"/>
            <path d="M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z" transform="rotate(14 -112.125 652.114) translate(636.09 1316.532)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
        </g>
    </g>
</svg>

我还尝试了SvgXml、SvgUri、SvgCssUri，没有任何变化。

代码如下：

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}%`}
        style={{
          color,
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
        }}
        xml={[...svgfile].join('')}
        onPress={()=> setcolor('green')}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;

Answer 1

最好将SVG封装到TouchableOpacity或TouchableWithoutFeedback中。

我使用这个site将svg转换为react-native-svg。

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

export const Mic = (props: SvgProps) => (
  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
    <Path
      d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
      fill={props.fill ? props.fill : '#000'}
      fillOpacity={props.fill ? 1 : 0.6}
    />
  </Svg>
);