javascript - ¿Cómo puedo usar SVG en React Native?

Estoy intentando usar íconos de arranque en reaccionar nativo y no puedo encontrar ningún método útil sobre cómo representar un SVG en reaccionar nativo. ¿Alguien sabe cómo hacerlo?

Tengo curiosidad, ¿puedo hacer una breve entrevista? ¿Has utilizado el cuadro de búsqueda en la parte superior de esta página? ¿Cuántas publicaciones de StackOverflow leíste? ¿Cómo podemos hacer que StackOverflow responda mejor a tu pregunta?

– Danny '365CSI' Engelman

28/03/2021 a las 12:35

------------------------------------

Para agregar SVG en reaccionar nativo, puedes usar reaccionar-nativo-svg

Instalar:

hilado agregar reaccionar-nativo-svg

Ejemplo:

import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
        ]}
      >
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r="45"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
          <Rect
            x="15"
            y="15"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </Svg>
      </View>
    );
  }
}

O desea importar un svg a su aplicación: reaccionar-nativo-svg-transformer

Ejemplo:

import Logo from "./logo.svg";

<Logo width={120} height={40} />

Pero si quieres una biblioteca de iconos, puedes usar: reaccionar-native-vector-icons

También aquí está el directorio: Directorio de React Native Vector Icons

0

------------------------------------

Paquete recomendado

const logo = new URL('logo.svg', import.meta.url);
export function Logo() {return <img src={logo} alt="logo" />}