如何在react-native中显示SVG文件

Question

我想从 illustrator 生成的 SVG 文件中渲染图像，我使用的是react-native 0.59、react-native-svg和react-native-svg-uri，这是我的jsx：

  <View style={styles.aboutSection}>
              <SvgUri
                width="150"
                height="150"
                source={require('../../assets/images/logo_blue.svg')}
              />
    </View>

和我的 SVG 文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2A327B;}
</style>
<g>
    <g transform="translate(-320.000000, -1983.000000)">
        <g transform="translate(40.000000, 1680.000000)">
            <path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
                 M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
                s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
        </g>
    </g>
</g>
</svg>

并且在调试时没有显示我缺少的内容以及是否有更好的方法来显示 SVG 文件中的图像？使用 SVGR将它们转换为 jsx是更好的方法还是还有其他方法可以做到这一点。

Answer 1

由于该包似乎不再被维护，经过一段时间的搜索后，我最终在react-native-icons的帮助下使用了自定义Web字体：

\n\n

\n
1. （可选）最小化 SVG 的大小，我为此使用了SVG minizer
\n
2. 使用icomoon转换字体
\n
3. 将生成的字体添加到根目录（或任何其他路径）的asset/fonts文件夹中
\n
4. 在packages.json中添加链接器
\n

\n\n

    "rnpm": {\n        "assets": [\n        "./assets/fonts/"\n        ]\n    }\n

\n\n

\n
5. 并使用链接它react-native link
\n
6. 为了创建一个自定义图标组件，我\xe2\x80\x99使用了react-native-icons，它\n有一个createIconSetFromIcoMoon函数来渲染从IcoMoon生成的字体，以及从Fontello生成的字体
\n

\n\n

在我的自定义组件 MyIcon.js 中，我还添加了生成的 Selection.json。

\n\n

import { createIconSetFromIcoMoon } from \'react-native-vector-icons\';\nimport MyIconConfig from \'../../../selection.json\';\n\nconst MyIcon = createIconSetFromIcoMoon(MyIconConfig, \'MyIcon-icons\', \'MyIcon-icons.ttf\');\n //name of font I used in the website to generate font and name of ttf files generated\nexport default MyIcon;\n

\n\n

我在我的组件中使用它，我在 demo.html 中找到了它们的图标名称：

\n\n

<MyIcon\n style={styles.customStyle}\n name="previous"\n size={18}\n color=\xe2\x80\x99red\xe2\x80\x99\n/>\n

\n\n

注意：确保您使用的版本> 6.3.0的react-native-icons，并通过运行以下链接链接您的资源：

\n\n

react-native link ./assets/fonts/\n

\n