SVG на React Native: реакция-native-svg-uri у меня не работает - PullRequest
Новая
       44

SVG на React Native: реакция-native-svg-uri у меня не работает

1 голос
/ 21 марта 2019

Я вижу этот пост: https://stackoverflow.com/a/48245827/9775054

Это было извлечено из здесь , где написано react-native-svg-uri.

Но я не могу заставить его работать... Я сделал все шаги, но всегда говорит мне, что "Path './test.svg' could not be found.".Я не понимаю почему, потому что путь к файлу правильный.Я правильно установил react-native-svg, react-native-svg-uri, babel-plugin-inline-import и поставил конфигурацию на .babelrc.

.babelrc config: 

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".svg"
      ]
    }]
  ]
}

Использование файла SVG : 

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Пример файла SVG 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
    <g id="Navigation">
        <g>
            <path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
                C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
                C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
                C75.8,65.6,74.3,64.2,72.6,64.2z"/>
        </g>
    </g>
</g>
</svg>

Прочие сведения

  • Реакция Родная версия: 0.57.8
  • Ориентация на Android 8.0

Кто-нибудь может мне помочь, пожалуйста?

...