Reaccionar visualización nativa SVG desde un archivo
html svg tooltip (2)
La conversión a un png es la solución más fácil. Las imágenes SVG se enumeran en ProductPains como un punto de inflexión y, si lo ves necesario, puedes votar mejor , pero por ahora no hay una gran solución lista para usar para las imágenes svg.
¿Cómo se muestra una imagen SVG que require() en React Native?
- https://github.com/brentvatne/react-native-svgkit No está en desarrollo activo.
- https://github.com/magicismight/react-native-svg No se puede averiguar cómo cargar un archivo.
- WebView (o WebView con puente) No se puede encontrar la forma de cargar un archivo requerido.
Cuál es la mejor manera de mostrar la imagen (no es necesario manipularla).
¿O debería simplemente convertirlo a un png?
Puede hackear esto utilizando una vista web. También tuve que poner mis archivos SVG como cadenas en archivos .js (lo cual no es nada bueno). Pero funciona bastante confiable. Hay una fracción de segundo donde se muestran blancos antes de que se cargue SVG, pero es lo suficientemente bueno para mí.
Aproximadamente algo así como:
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>