Soy nuevo en React nativo. Hago la importación de svg como en el código a continuación. Pero no se ve bien cuando es demasiado. ¿Hay una manera más sencilla de hacer esto?
import React from 'react'; import LeftArrow from '../../assets/svgs/left-arrow.svg' import RightArrow from '../../assets/svgs/right-arrow.svg' import HeaderLogo from '../../assets/svgs/header-logo.svg' import NotificationOn from '../../assets/svgs/notification-on.svg' export default function SignUp() { return ( <> <LeftArrow width="100%" height="100%" /> <RightArrow width="100%" height="100%" /> <HeaderLogo width="100%" height="100%" /> <NotificationOn width="100%" height="100%" /> </> ) }Por ejemplo, ¿cómo puedo usar svg como este mientras exporto e importo imágenes a continuación?
// src/assets/images/index.js export const woman = require('./woman.png'); export const signUp = require('./signup-bg.png'); // src/screen/SignUp.js import { woman, signUp } from '../../assets/images/index.js'Mire react-native-svg pero necesitará el contenido del archivo SVG en lugar de traerlo como una imagen.
Ejemplo rápido:
import Svg, {Path} from 'react-native-svg` const LeftArrow = (props) => { return ( <Svg width={48} height={48} viewbox="0 0 48 48" {..props}> <Path d="something" fill="#00000" /> </Svg> ) } export default LeftArrowpero puede crear una plantilla para el archivo y traer lo que necesita de cada SVG.