Javascript 如何在React Native中呈现svg图像？

我尝试了react-native-remote-svg和react-native-svg-image；它们都无法呈现SVG文件

如何在React native中处理SVG

示例代码：

import SVGImage from 'react-native-svg-image'

const EmailLogo = require('../static/others/Email.svg');

// Render etc....

                        <ButtonContainer>
                            <Button bgColor={colors.darkTeal} txtColor={colors.whiteText}
                                    onPress={this.onSignInPress.bind(this)}>
                                LOG IN WITH
                            </Button>
                            <SVGImage
                                style={{ width: 80, height: 80 }}
                                source={EmailLogo}
                            />
                        </ButtonContainer>

结果：当它应该是一个电子邮件徽标时，它是一个白色的正方形

如何在React native中正确处理SVG？

并使用WebView呈现SVG文件，使其目前不支持本地文件。是它写的

---

用于从URL或静态文件以React Native呈现SVG图像。要使用react-native svg uri，还需要链接react-native svg。所以请仔细阅读文档。

我已经经历了这场斗争。react native svg图标帮了我的忙，但为了让它工作，我还需要做一些额外的事情

首先，这个库在下面使用了react原生svg。您需要将svg文件转换为该库能够理解的svg对象

如果您使用编辑器打开svg文件，它将如下所示

<svg xmlns="http://www.w3.org/2000/svg" viewBox="170.5 200.5 18.6 23">
  <defs>
    <style>.a{fill:#444;}.b{fill:#07b57a;}</style>
  </defs>
  <g transform="translate(171 201)">
    <path class="a" d="M18.1,22.5H-.5V-.5H18.1ZM.5,21.5H17.1V.5H.5Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 5.4)"/>
    <path class="b" d="M4.4,7.3,3,5.9l.7-.7.7.7L6.6,3.7l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 10.5)"/>
    <path class="b" d="M4.4,12.4,3,11l.7-.7.7.7L6.6,8.8l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 15.6)"/>
    <rect class="b" width="2.5" height="1" transform="translate(3.2 15.6)"/>
  </g>
</svg>

  entry: {
    svg: (
      <G transform="translate(171 201)">
        <Path fill="#444444" d="M-152.4-178H-171v-23h18.6V-178z M-170-179h16.6v-21H-170V-179z" />
        <Rect x="-161.5" y="-195.1" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-193.2l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-193.2z"
        />
        <Rect x="-161.5" y="-190" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-188.1l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-188.1z"
        />
        <Rect x="-161.5" y="-184.9" fill="#07B57A" width="5.4" height="1" />
        <Rect x="-167.3" y="-184.9" fill="#07B57A" width="2.5" height="1" />
      </G>
    ),
    viewBox: '0 0 18.6 23',
  }

你需要把它转换成这样的东西

<svg xmlns="http://www.w3.org/2000/svg" viewBox="170.5 200.5 18.6 23">
  <defs>
    <style>.a{fill:#444;}.b{fill:#07b57a;}</style>
  </defs>
  <g transform="translate(171 201)">
    <path class="a" d="M18.1,22.5H-.5V-.5H18.1ZM.5,21.5H17.1V.5H.5Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 5.4)"/>
    <path class="b" d="M4.4,7.3,3,5.9l.7-.7.7.7L6.6,3.7l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 10.5)"/>
    <path class="b" d="M4.4,12.4,3,11l.7-.7.7.7L6.6,8.8l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 15.6)"/>
    <rect class="b" width="2.5" height="1" transform="translate(3.2 15.6)"/>
  </g>
</svg>

  entry: {
    svg: (
      <G transform="translate(171 201)">
        <Path fill="#444444" d="M-152.4-178H-171v-23h18.6V-178z M-170-179h16.6v-21H-170V-179z" />
        <Rect x="-161.5" y="-195.1" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-193.2l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-193.2z"
        />
        <Rect x="-161.5" y="-190" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-188.1l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-188.1z"
        />
        <Rect x="-161.5" y="-184.9" fill="#07B57A" width="5.4" height="1" />
        <Rect x="-167.3" y="-184.9" fill="#07B57A" width="2.5" height="1" />
      </G>
    ),
    viewBox: '0 0 18.6 23',
  }

这是本机svg库组件中svg文件的表示形式。这里需要注意的一点是svg文件的viewbox。我不知道为什么，但大多数时候，它是“偏离中心”。我将在下面的截图中显示。因此，它也不能通过react native svg图标显示。要将其置于中心位置，您可以使用Adobe Illustrator或其他在线工具来编辑svg。我用过的是。因此，我上传了我的svg，重新居中并再次下载。并使用该svg文件在我的react本机代码中创建对象

这是我上传到服务的初始svg文件。如果缩小并按cmd+a或ctrl+a选择全部，它将高亮显示svg图标，如下面的屏幕截图所示。您应该将其定位到白色部分，方法是拖动它，或者将右上角的X和Y设置为0s。

这是居中时的外观

保存该svg文件后，使用它将其转换为带有react原生svg组件的javascript对象，可以找到有关该文件的更多信息

创建svg对象后，可以将其与本机svg图标一起使用。你将在我上面分享的链接中找到如何做到这一点

我知道，这是一个很大的痛苦和似乎过于复杂，我花了相当多的时间，使它的工作，但这是唯一的方式，我设法做到这一点

另一个选择是使用icomoon.com将SVG转换为字体图标，并与react原生矢量图标一起使用。但只有当SVG只使用一种颜色绘制时，它才会起作用，因为多色的SVG无法转换为字体

---

另外，我并没有尝试，但也许你们尝试使用的库可以使用我们从在线服务中获得的以svg为中心的文件。让我知道它是否有效，那么它也可以对其他用户有所帮助。

就是这样，您不能在React native中真正使用SVG图标吗？