Imagen y Video en React Native

Vista previa del material en texto

Docente: 
M.A. Alex Pacheco Moya 
Imagen y Video en React Native 
CONTENIDO 
• Añadir imágenes a 
una aplicación de 
React Native 
• Imágenes Estaticas 
• Imágenes URI 
S12 
 
 
M.A. Alex Pacheco Pagina #2 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
Imagen y Video en React Native 
 
 
 
M.A. Alex Pacheco Pagina #3 
Instituto de Educación Superior Privado El Buen Pastor 
 
Comprender el componente de la 
imagen en React Native 
 
Las imágenes son un aspecto esencial de cualquier aplicación móvil. Este tutorial 
te introducirá en el componente de las imágenes y te mostrará cómo utilizarlas en 
tu aplicación React Native. También aprenderás a crear tu propia galería de fotos! 
 
Añadir imágenes a una aplicación de React Native 
Para añadir imágenes en la aplicación, primero hay que importar el 
componente Image desde react-native . El componente de imagen React 
Native le permite mostrar imágenes de diferentes fuentes, tales como: 
• imágenes de red 
• recursos estáticos 
• imágenes locales temporales 
• imágenes de disco local, es decir, del rollo de la cámara 
Para importar el componente Image, añádelo a la declaración import en la 
parte superior de app.js, como se muestra a continuación. 
 
 
 
Mostrar imágenes estáticas 
Para mostrar una imagen estática, lo primero que hay que añadir es el archivo 
de imagen en la carpeta assets del proyecto. Las imágenes estáticas se 
cargan proporcionando la ruta de la imagen. El código para mostrar una 
imagen estática se verá algo así: 
 
 
https://reactnative.dev/docs/images
 
 
M.A. Alex Pacheco Pagina #4 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
Aquí está el resultado. 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #5 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
Mostrando imágenes basadas en la web o imágenes de 
datos de URI 
Mostrar una imagen de una red o una fuente basada en la web es similar a 
mostrar una imagen estática. Dentro del componente Image , usa el 
atributo source y establece la ruta de la imagen en un objeto con la clave uri , 
como se muestra a continuación. 
 
 
 
 
También tendrás que añadir las dimensiones de la imagen con un atributo style, 
como lo harías en HTML. Aquí está el resultado final de ambas imágenes. 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #6 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
También puedes mostrar imágenes a través de una URI de datos, en cuyo caso 
todos los datos de la imagen están realmente codificados en la URI. Esto solo se 
recomienda para imágenes muy pequeñas o dinámicas. Para una imagen 
codificada con URI, le darás a los datos de la imagen un atributo source como 
source={{ uri:'data:image/png;base64,iVBOR...=='}}. 
 
No olvides que para las imágenes en red y codificadas con URI, tendrás que 
especificar manualmente las dimensiones de tu imagen. 
Imágenes de fondo 
También puedes usar una imagen como fondo de tu pantalla. Para ello, obten 
una imagen de fondo de tu elección y agrégala a la carpeta assets. Después, 
importa el componente ImageBackground de react-native como se muestra a 
continuación. 
 
 
 
El componente ImageBackground envuelve y muestra un fondo para cualquier 
elemento que esté dentro de él. En este caso, sustituiremos la 
etiqueta View por la etiqueta ImageBackground y envolveremos todo el 
contenido de la aplicación. 
 
 
M.A. Alex Pacheco Pagina #7 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
Referencia Web: 
 
 
Esther Vaati 
Oct 9, 2020 
Comprender el componente de la imagen en React Native 
https://code.tutsplus.com/es/understanding-the-image-component-in-react-native--cms-
35877t 
 
https://tutsplus.com/authors/esther-kalei
https://code.tutsplus.com/es/understanding-the-image-component-in-react-native--cms-35877t
https://code.tutsplus.com/es/understanding-the-image-component-in-react-native--cms-35877t