javascript - read - react-native-vector-icons

¿Cómo mostrar el archivo SVG en React Native?

Question

Quiero mostrar archivos svg (tengo un montón de imágenes svg) pero lo que no pude encontrar la forma de mostrar. Intenté usar los componentes Image y Use de react-native-svg pero no funcionan con eso. Y traté de hacerlo de manera nativa, pero es realmente difícil mostrar solo la imagen svg.

Código de ejemplo:

import Svg, {
  Use,
  Image,
} from ''react-native-svg'';

<View>
  <Svg width="80" height="80">
     <Image href={require(''./svg/1f604.svg'')} />
  </SvgRn>
</View>

También sé que el nativo de reacción no es compatible con svg básicamente, pero creo que alguien solucionó este problema de manera complicada (con / sin react-native-svg)

Answer 1

Consulte mi tutorial sobre cómo agregar iconos SVG a su aplicación React Native.

Answer 2

Después de probar muchas formas y bibliotecas, decidí crear una nueva fuente (con Glyphs o este tutorial ) y agregarle mis archivos SVG, luego usar el componente "Texto" con mi fuente personalizada.

Espero que esto ayude a cualquiera que tenga el mismo problema con SVG en react-native.

Answer 3

Nota: Svg no funciona para las versiones de lanzamiento de Android, así que no lo tengas en cuenta para Android. Funcionará solo para Android en modo de depuración. Pero funciona bien para iOS.

Utilice https://github.com/vault-development/react-native-svg-uri

Instalar

// file: transformer.js

const cleanupSvg = require(''./cleanup-svg'');

const upstreamTransformer = require("metro/src/transformer");

// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];

const svgExtensions = ["svgx"]

// function cleanUpSvg(text) {
//   text = text.replace(/width="([#0-9]+)px"/gi, "");
//    text = text.replace(/height="([#0-9]+)px"/gi, "");
//    return text;
// }

function fixRenderingBugs(content) {
  // content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
  return "module.exports = `" + content + "`";
}


module.exports.transform = function ({ src, filename, options }) {
  // if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
  //  return typescriptTransformer.transform({ src, filename, options })
  // }

  if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
    return upstreamTransformer.transform({
      src: fixRenderingBugs(src),
      filename,
      options
    })
  }

  return upstreamTransformer.transform({ src, filename, options });
}

Uso

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

Answer 4

Publiqué otra solución aquí Cuál es el mejor enfoque para insertar un gráfico vectorial (svg) en una aplicación nativa de reacción . Este enfoque utiliza una fuente vectorial (de svg) en lugar de un archivo svg. PD: Funciona muy bien en iOS y Android, y también puedes cambiar el color y el tamaño de tu icono de vector.

Si desea insertar un svg directamente en su aplicación, puede probar una biblioteca de terceros: react-native-svg. Con más de 3k estrellas en github, es uno de los mejores enfoques.

• instalar:
  • npm reacciono-nativo-svg
  • npm reacciono-nativo-svg-uri
• enlace al nativo:
  • enlace react-native react-native-svg

Y aquí hay una muestra:

import * as React from ''react'';
import SvgUri from ''react-native-svg-uri'';
import testSvg from ''./test.svg'';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Answer 5

Usé la siguiente solución:

1. Convierta la imagen .svg a JSX con https://svg2jsx.herokuapp.com/
2. Convierta el JSX a componente react-native-svg con https://svgr.now.sh/ (marque la casilla de verificación "React Native")

Answer 6

Utilice https://github.com/kristerkari/react-native-svg-transformer

En este paquete se menciona que los archivos .svg no son compatibles con React Native v0.57 y versiones anteriores, por lo tanto, use la extensión .svgx para los archivos svg.

Para web o react-native-web use https://www.npmjs.com/package/@svgr/webpack

Para renderizar archivos svg usando react-native-svg-uri con react-native versión 0.57 y anteriores, debe agregar los siguientes archivos a su proyecto raíz

Nota: cambie la extensión svg a svgx

Paso 1: agrega el archivo transformer.js a la raíz del proyecto

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Paso 2: agrega rn-cli.config.js a la raíz del proyecto

import SvgUri from ''react-native-svg-uri'';


<SvgUri source={require(''./path_to_image/image.svg'')} />

Las soluciones mencionadas anteriormente también funcionarán en aplicaciones de producción ✅

Answer 7

Yo tuve el mismo problema. Estoy usando esta solución que encontré: React Native display SVG from a file

No es perfecto, y lo estoy volviendo a visitar hoy, porque funciona mucho peor en Android.