Tengo una aplicación para comprar y vender perros. En mi aplicación, cada raza de perro tiene su propio archivo svg almacenado en mi carpeta de activos (alrededor de 150 archivos svg). Cuando obtengo datos de la publicación desde el backend, obtengo información diferente sobre la publicación, incluido dogBreed, por ejemplo, {dogBreed: golden-retriver}. Quiero mostrar el svg correspondiente a cada publicación de perros, pero no estoy seguro de cuál es la mejor manera de lidiar con esto. ¿Debe mi aplicación importar todos los archivos svg? ¿Debo convertir todos los archivos svg en archivos JSX? He hecho esto en otras partes de la aplicación. Si busco la solución JSX, ¿debería representar el JSX condicionalmente en función del nombre como: <$ {dogBreed} /> (si es posible), o debería tener un componente que tome la raza del perro como accesorio? y tiene lógica dentro para la representación condicional? . Esto crearía un archivo enorme, y no estoy seguro de si 150 if else/switch declaraciones es el camino a seguir. Me siento realmente atrapado aquí.
En primer lugar, convierta todo su archivo svg para que reaccione a los archivos JSX nativos.
Entonces puedes cargar el svg de forma diferida según el nombre (supongo) Algo así como
const breedName = data.dogBreed; const component = React.lazy(() => import(`./assets/${breedName}.jsx`));Intente usar esta biblioteca https://github.com/stowball/react-native-svg-icon . Convierta todos los svgs a JSX en un solo archivo.
Cree un componente como puente entre react-native-svg-icon que importa los SVG anteriores
puedes usar esto directamente como componente.
import Icon from './components/Icon'; // Inside some view component render() { return ( <Fragment> <Icon name="SortArrows" height="20" width="20" /> <Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" /> <Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5" /> </Fragment> ); }puede colocar el nombre como dinámico para representar el icono svg dinámico. Solo pruébalo.
Le recomiendo que use la biblioteca react-native-svg-transformer .
Aquí está el enlace a la biblioteca: https://github.com/kristerkari/react-native-svg-transformer Esta biblioteca le permite importar los archivos svg sin convertirlos.
Después de la configuración, puede hacer algo similar a esto.
... import LogoA from "./logo_a.svg"; import LogoB from "./logo_b.svg"; ... return cond ? <LogoA width={120} height={40} /> : <LogoB width={120} height={40} /> ...