在 Expo 中导入字符串并转换为 JSX

Question

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

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

如何导入：

<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 }}
/>