Question

看起来好像一团糟，我试过"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？

Answer 1

我经历过这场斗争。 react-native-svg-icon帮助了我，但我还有一些额外的事情需要做，以使其发挥作用。

首先，此库使用下面的react-native-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',
  }

这是react-native-svg库组件中svg文件的表示。这里需要注意的一件事是svg文件的viewbox。我不知道为什么，但大多数时候，它是'偏离中心'。我将在下面的屏幕截图中显示。因此，react-native-svg-icon也无法显示它。要将其置于中心，您可以使用Adobe Illustrator或其他一些在线工具来编辑svg。我使用的是http://editor.method.ac/。所以，我上传了我的svg，重新登录并再次下载。并使用该svg文件在我的反应本机代码中创建对象。

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

这是居中时的样子

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

创建svg对象后，可以将其与react-native-svg-icon一起使用。您将在我上面分享的链接中找到如何做到这一点。

我知道，这很痛苦，看起来过于复杂，我花了很多时间才能让它发挥作用，但这是我设法完成它的唯一方法。

另一个选择是使用icomoon.com将svgs转换为字体图标，并将其与react-native-vector-icons一起使用。但它只有在你的svgs只用一种颜色绘制时才有效，因为多色的那些不能转换为字体

P.S。我没试过，但也许你尝试使用的库可能与我们从在线服务获得的中心svg文件一起工作。让我知道它是否有效，那么它也可以对其他用户有所帮助。

Answer 2

react-native-svg-image和react-native-svg-image使用WebView呈现SVG文件，因此目前不支持本地文件。它写成docs。

使用react-native-svg-uri从URL或静态文件中呈现React Native中的SVG图像。要使用react-native-svg-uri，您还需要关联react-native-svg。所以仔细阅读文档。

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

2 个答案: