es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo insertar parámetros de ruta dentro de la URL de la imagen en React Native / Navigation?

Cómo insertar parámetros de ruta dentro de la URL de la imagen en React Native / Navigation?

20 Jul, 2023 Programación

En la primera pantalla de mi aplicación, tengo una imagen táctil que envía parámetros de ruta a la segunda pantalla, que se ve así:

<touchablehighlight onpress="{()" ==""> navigation.navigate("EcranDetails",{album_id:1,album_name:"David Bowie",album_date:1967,album_img:"david_bowie"})}>
    <image style="{styles.album}" source="{require('../../assets/images/albums/david_bowie.jpg')}"></image>
</touchablehighlight>

Y en mi segunda pantalla, me gustaría tener esto (la cadena de URL de la imagen desde los parámetros dentro de require):

<image style="{styles.album}" source="{require('../../assets/images/albums/david_bowie.jpg')}"></image>

Pero este código no funciona y no puedo encontrar nada relacionado con los parámetros en require :

<image style="{styles.album}" source="{require('../../assets/images/albums/',{JSON.stringify(album_img)},'.jpg')}"></image>

¿Alguna idea de por qué no funciona y cómo podría solucionarlo? Muchas gracias si puedes ayudar.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La función require en React Native es una función sincrónica que solo acepta una cadena estática como argumento. En otras palabras, no puedes usar una variable o un valor dinámico dentro de require.

    Para solucionar este problema, podrías almacenar el nombre de la imagen en el estado de la segunda pantalla y usarlo para generar dinámicamente la ruta de la imagen:

    const [albumImg, setAlbumImg] = useState('');
const { album_id, album_name, album_date, album_img } = route.params;
setAlbumImg(album_img);

...

<image style="{styles.album}" source="{require(`../../assets/images/albums/${albumImg}.jpg`)}"></image>

    Al almacenar album_img de los parámetros de enrutamiento en la variable de estado albumImg, luego puedes usarla para generar dinámicamente la ruta de la imagen dentro de la función require utilizando una plantilla literal. Esto debería permitirte mostrar la imagen en la segunda pantalla con la ruta correcta.

Comments are closed.