从文件反应本机显示SVG [英] React Native display SVG from a file
本文介绍了从文件反应本机显示SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在React Native中显示我require()的SVG图像.
How do I display an SVG image that I require() in React Native.
- https://github.com/brentvatne/react-native-svgkit 是没有积极发展.
- https://github.com/magicismight/react-native-svg 可以没有弄清楚如何加载文件.
- WebView(或桥接WebView)无法弄清楚如何加载所需的文件.
- https://github.com/brentvatne/react-native-svgkit Is not under active development.
- https://github.com/magicismight/react-native-svg Can't figure out how to load a file.
- WebView (or Bridged WebView) Can't figure out how to load a required file.
仅显示图像(无需操作)的最佳方法是什么.
What's the best way to just display the image (don't need to manipulate it).
还是我应该将其转换为png?
Or should I just be converting it to a png instead?
推荐答案
您可以使用网络视图来解决这个问题.我还不得不将我的SVG作为字符串放在.js文件中(一点也不好).但是它工作可靠.有一瞬间，它们在SVG加载之前显示为白色，但这对我来说已经足够了.
You can hack around this using a webview. I also had to put my SVGs as strings in .js files (which is not good at all). But it works pretty reliably. There is a split second where they show up as white before the SVG loads, but it's good enough for me.
大致类似:
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>
这篇关于从文件反应本机显示SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
