Comprender el componente de la imagen en React Native
Spanish (Español) translation by Esther (you can also view the original English article)
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!
Requisitos previos para crear una aplicación de React Native
Usaremos la Expo CLI para este proyecto. Con Expo, los desarrolladores pueden crear aplicaciones de React Native sin todas las frustraciones que conlleva la instalación y configuración de dependencias de software como Android Studio, Xcode o todas las demás herramientas necesarias para desarrollar y ejecutar una aplicación de React Native. Si quieres saber más sobre la Expo, mira nuestro post sobre cómo la Expo facilita el desarrollo de aplicaciones de React Native.
Si aún no tienes el Expo CLI, primero asegúrate de tener instalado el Node.js. Luego instala la Expo CLI (interfaz de línea de comandos) globalmente en tu máquina:
1 |
npm install expo-cli --global |
Entonces, usa el comando expo
para iniciar un nuevo proyecto.
1 |
expo init project_photos |
Si necesitas usar imágenes al hacer pruebas, agrégalas a la carpeta assets del proyecto.
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.
1 |
import { View, Text, Image, StyleSheet } from 'react-native' |
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í:
1 |
import { StatusBar } from "expo-status-bar"; |
2 |
import React from "react"; |
3 |
import { StyleSheet, Text, View, Image} from "react-native"; |
4 |
|
5 |
|
6 |
export default function App() { |
7 |
return ( |
8 |
<View style={styles.container}> |
9 |
<StatusBar style="auto" /> |
10 |
<Text>.........................</Text> |
11 |
|
12 |
<Image |
13 |
style={{ width: 100, height: 100, marginBottom: 15 }} |
14 |
source={require("./assets/facebook.png")} |
15 |
/> |
16 |
|
17 |
</View> |
18 |
);
|
19 |
}
|
20 |
Aquí está el resultado.



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.
1 |
import { StatusBar } from "expo-status-bar"; |
2 |
import React from "react"; |
3 |
import { StyleSheet, Text, View, Image } from "react-native"; |
4 |
|
5 |
|
6 |
export default function App() { |
7 |
return ( |
8 |
<View style={styles.container}> |
9 |
|
10 |
<StatusBar style="auto" /> |
11 |
|
12 |
<Text>....................</Text> |
13 |
|
14 |
<Image |
15 |
style={{ width: 100, height: 100 }} |
16 |
source={{ uri: "https://reactjs.org/logo-og.png" }} |
17 |
/> |
18 |
|
19 |
</View> |
20 |
);
|
21 |
}
|
22 |
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.



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.
1 |
import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native'; |
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.
1 |
export default function App() { |
2 |
return ( |
3 |
|
4 |
<ImageBackground |
5 |
source={require("./assets/back.jpeg")} |
6 |
style={styles.back_image} |
7 |
>
|
8 |
<Text>.........................</Text> |
9 |
<StatusBar style="auto" /> |
10 |
<Image |
11 |
style={{ width: 100, height: 100, marginBottom: 15 }} |
12 |
source={require("./assets/facebook.png")} |
13 |
/> |
14 |
<Text>..............</Text> |
15 |
|
16 |
<Image |
17 |
style={{ width: 100, height: 100 }} |
18 |
source={{ uri: "https://reactjs.org/logo-og.png" }} |
19 |
/> |
20 |
</ImageBackground> |
21 |
|
22 |
);
|
23 |
}
|
Crear una galería de fotos
En esta sección, te mostraré cómo mostrar una cuadrícula de fotos en una FlatList
. Este componente se utiliza para mostrar grandes cantidades de contenido desplazable y puede desplazarse horizontal o verticalmente.
Un FlatList
utiliza el renderItem
prop para renderizar cada elemento en sus datos de entrada. El renderItem
prop es una función que toma un elemento del array de datos y lo mapea a un elemento de React. Cada elemento de los datos necesita una identificación única. Este se encuentra en item.key
por defecto, aunque se puede especificar otra forma de encontrar o construir el id utilizando la función keyExtractor
prop.
Usaremos useState
para añadir un array de imágenes. El gancho useState
puede almacenar cualquier tipo de valor: un número, una cadena, un array, un objeto, etc. Añade el siguiente código a app.js.
1 |
import React, { useState} from 'react' |
2 |
|
3 |
export default function App() { |
4 |
|
5 |
const [images, setimages] = useState([ |
6 |
require('./assets/image.jpg'), |
7 |
require('./assets/image1.jpg'), |
8 |
require('./assets/image2.jpg'), |
9 |
require('./assets/image3.jpg'), |
10 |
require('./assets/image4.jpg'), |
11 |
require('./assets/image5.jpg'), |
12 |
require('./assets/image6.jpg'), |
13 |
require('./assets/image7.jpg'), |
14 |
require('./assets/image8.jpg') |
15 |
]);
|
16 |
}
|
Ten en cuenta que necesitarás tener estas imágenes en la carpeta assets.
A continuación, devolveremos un FlatList
que muestra esas imágenes:
1 |
return ( |
2 |
<FlatList |
3 |
data={images} |
4 |
key={"2"} |
5 |
numColumns={2} |
6 |
renderItem={({ item }) => ( |
7 |
<Image |
8 |
source={item} |
9 |
style={{ |
10 |
width: 180, |
11 |
height: 220, |
12 |
borderWidth: 2, |
13 |
borderColor: "#c35547", |
14 |
resizeMode: "contain", |
15 |
margin: 6, |
16 |
}}
|
17 |
keyExtractor={(item) => item.id} |
18 |
/> |
19 |
)}
|
20 |
/> |
21 |
);
|
Configuramos el elemento FlatList
para usar el array de images
como fuente de datos. Luego definimos una función de renderización personalizada que toma un elemento del array de images
y genera un componente Image
para mostrarlo.
Aquí está la galería de fotos completa:



Conclusión
Como has visto, ¡trabajar con imágenes en React Native es muy fácil!
Si quieres poner en marcha tu próxima aplicación de React Native, o aprender de una aplicación construida profesionalmente, echa un vistazo a las plantillas de aplicaciones para móviles en CodeCanyon. CodeCanyon es un mercado en línea que tiene cientos de plantillas de aplicaciones móviles para Android, iOS, React Native y Ionic. Puedes ahorrarte días, incluso meses, de esfuerzo usando una de ellas.



Si tienes problemas para decidir qué plantilla de CodeCanyon es la adecuada para ti, estos artículos deberían ayudarte:
- Plantillas de aplicaciones22 mejores plantillas de aplicaciones para Android del 2020Franc Lucas
- iOS SDK19 Mejores plantillas de aplicaciones iOS del 2020Daniel Strongin
- Aplicación móvil19 Mejores plantillas de React Native del 2020 (incluyendo 5 gratuitos)Franc Lucas
- Ionic15 sorprendentes plantillas de aplicaciones iónicas y temas iónicosFranc Lucas