javascript - 如何在 React Native 中渲染 svg 图像？

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>

结果:当它应该是一个电子邮件 Logo 时，它是一个白色方 block 。

如何在 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 文件的 View 框。我不确定为什么，但大多数时候，它是“偏离中心”的。我将在下面的屏幕截图中显示。因此，它也无法通过 react-native-svg-icon 显示。要将其置于中心，您可以使用 Adob​​e Illustrator 或其他在线工具来编辑 svg。我使用的一个是 http://editor.method.ac/ .所以，我上传了我的 svg，重新居中并再次下载。并使用该 svg 文件在我的 React native 代码中创建对象。

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

这是居中时的样子

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

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

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

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

附言我没有尝试，但也许，您尝试使用的库可能适用于我们从在线服务获得的居中 svg 文件。让我知道它是否有效，然后它对其他用户也有帮助。