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

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