Question

我想将文件导入为字符串。编辑它。然后将其转换为JSX元素。具体来说，一种用例是导入svg文件。编辑它，使其与React Native兼容。然后将其转换为可以重复使用的JSX元素。

我似乎无法从导入.svg文件中得到一个字符串，并且我不希望不要将其更改为.txt，因为其他项目已经在使用这些文件，并且我们还需要保持干燥。

我该如何导入：

<svg xmlns="http://www.w3.org/2000/svg" width="24.25" height="26.52">
  <defs>
    <style>
      .circle, .line {
        stroke: #77bc1f;
        stroke-linecap: round;
        stroke-width: 3.48px;
      }
      .circle {
        fill: none;
      }
      .line {
        fill: #9f9;
      }
    </style>
  </defs>
  <title>Logo Icon</title>
  <path class="circle" fill="none" d="m19.12166,7a10.27,10.27 0 1 1 
    -14,0"/>
  <line class="line" fill="#9f9" x1="12.06166" y1="1.74" 
    x2="12.06166" y2="14.88"/>
</svg>

并将其转换为此：

  <Svg width={24.25} height={26.52}>
    <Path
      class="circle"
      fill="none"
      d="m19.12166,7a10.27,10.27 0 1 1 -14,0"
      stroke="#77bc1f"
      strokeLinecap="round"
      strokeWidth="3.48px"
    />
    <Line
      class="line"
      stroke="#77bc1f"
      strokeLinecap="round"
      strokeWidth="3.48px"
      fill="#000"
      x1="12.06166"
      y1="1.74"
      x2="12.06166"
      y2="14.88"
    />
  </Svg>

动态地？

Answer 1

很好的问题。我从来没有想过用原生的反应我知道您可以做dangerouslySetInnerHTML。请让我知道这是否适合rwact-native。如果不是，请尝试从 https://medium.com/@remarkablemark/an-alternative-to-dangerously-set-innerhtml-64a12a7c1f96

现在要导入svg，有多种选择选项1.使用react-native-remote-svg 例如

import Image from 'react-native-remote-svg';

const SVGComponent = '<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect></svg>';

<Image
  source={{
   uri: "data:image/svg+xml;utf8," + SVGComponent
}}/>

选项2：使用WebView

<WebView
  source={{ html: svgstring }}
/>

导入String并在Expo中转换为JSX

1 个答案: