Импортировать строку и конвертировать в JSX в Экспо - PullRequest
Новая
       30

Импортировать строку и конвертировать в JSX в Экспо

0 голосов
/ 20 февраля 2019

Я хотел бы импортировать файл в виде строки.Отредактируйте это.Затем преобразуйте его в элемент 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>

Динамически?

1 Ответ

0 голосов
/ 20 февраля 2019

Отличный вопрос.Я никогда не думал о том, чтобы реагировать с родными.Я знаю, с реакцией вы можете сделать 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 }}
/>
...