Question

如何在React Native中显示我require()的SVG图像。

https://github.com/brentvatne/react-native-svgkit未进行积极开发。
https://github.com/magicismight/react-native-svg无法弄清楚如何加载文件。
WebView（或Bridged WebView）无法弄清楚如何加载所需文件。

显示图片的最佳方式是什么（不需要操作图片）。

或者我应该将其转换为png而不是？

Answer 1

转换为png是最简单的解决方案。 SVG图像作为一个痛点点在ProductPains中列出，如果你认为有需要，你可以对它进行投票，但是现在没有开箱即用的svg图像解决方案。

Answer 2

你可以使用webview来解决这个问题。我还必须将我的SVG作为字符串放在.js文件中（这根本不好）。但它的工作非常可靠。有一瞬间它们在SVG加载之前显示为白色，但它对我来说足够好。

粗略地说：

import React, { View, WebView } from 'react-native'
import s from 'string'

const firstHtml = '<html><head><style>html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>'
const lastHtml = '</body></html>'
export default (props) =>
  <View style={props.containerStyle}>
    <WebView
      style={[{ width: 200, height: 100, backgroundColor: props.backgroundColor }, normalizeStyle(props.style)]}
      scrollEnabled={false}
      source={{ html: `${firstHtml}${props.svgContent}${lastHtml}` }}
    />
  </View>

Answer 3

您可以使用此库将小的SVG文件显示为数据，

注意：大型SVG图片无法正确呈现。

npm我反应本地远程svg

import Image from 'react-native-remote-svg'

<Image
 source={{
uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 
width="100px" height="100px"  viewBox="0 0 100 100">
     <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" 
fill="green"  stroke="#00FF00" stroke-width ="2" />
   </svg>`
}}
style={{ width: 100, height: 100}}
/>

如果要使用上述库远程显示任何大小的图像，然后执行此操作，

<Image
  source={{ uri: 'https://example.com/my-pic.svg' }}
  style={{ width: 200, height: 532}}
/>

但是，如果您使用此文件来显示本地svg文件，则在捆绑并放入发行版时会在android中遇到一些问题。

import Image from 'react-native-remote-svg'
<Image source={require('./image.svg')} />

或者您可以使用Icomoon（用于小型SVG图像/图标）

推荐：将Icomoon用于图标和SVG小图片

参见此video，以在React Native中设置icomoon

从文件中反应Native显示SVG

3 个答案: