1

我看到这篇文章：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配置：

{
  "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>

其他详情

  • React Native 版本：0.57.8
  • 针对 Android 8.0

有人可以帮助我吗？

4

0 回答 0