Réagir Natif d'affichage à partir d'un fichier SVG

Comment puis-je afficher une image SVG que je require() à Réagir Natif.

Quelle est la meilleure façon d'afficher uniquement l'image (n'avez pas besoin de le manipuler).

Ou devrais-je être le convertir en png à la place?

Double Possible de SVG utilisation de Réagir Natif de projet

OriginalL'auteur Sledge Hammer | 2016-05-08

  1. 2

    La conversion en png est la solution la plus simple. SVG Images sont énumérés dans ProductPains comme une douleur au point et vous pouvez upvote, si vous voyez le besoin, mais pour l'instant il n'y a pas de solution pour les images svg.

    OriginalL'auteur Daniel Schmidt

  2. 1

    Vous pouvez pirater autour de ce à l'aide d'une webview. J'ai également eu à mettre mon SVGs comme des chaînes de caractères .js fichiers (ce qui n'est pas bon du tout). Mais ça fonctionne assez fiable. Il y a une fraction de seconde où ils apparaissent comme des blancs avant de les SVG charge, mais il est assez bon pour moi.

    À peu près quelque chose comme:

    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>
    Merci! J'ai publié un mécanisme national de prévention paquet pour cette à react-native-remote-svg

    OriginalL'auteur Sledge Hammer

  3. 1

    Vous pouvez afficher de petites SVG fichier de données à l'aide de cette bibliothèque,

    Note: de Grandes images SVG ne sont pas rendu correctement.

    mnp je réagis-native-à distance-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}}
/>

    Si vous souhaitez afficher n'importe quelle taille des images à distance avec au-dessus de la bibliothèque et ensuite ce faire,

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

    Mais si vous avez utilisé celui-ci pour afficher le local fichier svg, alors vous aurez quelques problèmes dans android quand vous le bundle et mettez la libération.

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

    ou vous pouvez utiliser Icomoon (Pour les petits SVG images/Icons),

    Recommandé: Utilisation Icomoon pour les Icônes et les Petites Images SVG

    Voir ce vidéo pour l'installation de l'icomoon à réagir natif

    Ne pas utiliser ce plugin react-native-remote-svg car il a de sérieux bug sur Android en mode de Production. iOS est très bien.
    ouais. Mais ce bug est seulement pour les images svg. Si vous utilisez à distance SVGs puis il fonctionne très bien.

    OriginalL'auteur Asbar Ali