Comprender el componente de la imagen en React Native

Spanish (Español) translation by Esther (you can also view the original English article)

Las imágenes son un aspecto esencial de cualquier aplicación móvil. Este tutorial te introducirá en el componente de las imágenes y te mostrará cómo utilizarlas en tu aplicación React Native. También aprenderás a crear tu propia galería de fotos!

Requisitos previos para crear una aplicació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 instalación y configuración de dependencias de software como Android Studio, Xcode o todas las demás herramientas necesarias para desarrollar y ejecutar una aplicación de React Native. Si quieres saber más sobre la Expo, mira nuestro post sobre cómo la Expo facilita el desarrollo de aplicaciones de React Native.

React Native

Desarrolla React Native fácilmente con Expo

Wern Ancheta

Si aún no tienes el Expo CLI, primero asegúrate de tener instalado el Node.js. Luego instala la Expo CLI (interfaz de línea de comandos) globalmente en tu máquina:

npm install expo-cli --global

Entonces, usa el comando expo para iniciar un nuevo proyecto.

expo init project_photos

Si necesitas usar imágenes al hacer pruebas, agrégalas a la carpeta assets del proyecto.

Añadir imágenes a una aplicación de React Native

Para añadir imágenes en la aplicación, primero hay que importar el componente Image desde react-native. El componente de imagen React Native le permite mostrar imágenes de diferentes fuentes, tales como:

imágenes de red
recursos estáticos
imágenes locales temporales
imágenes de disco local, es decir, del rollo de la cámara

Para importar el componente Image, añádelo a la declaración import en la parte superior de app.js, como se muestra a continuación.

import {  View, Text, Image, StyleSheet } from 'react-native'

Mostrar imágenes estáticas

Para mostrar una imagen estática, lo primero que hay que añadir es el archivo de imagen en la carpeta assets del proyecto. Las imágenes estáticas se cargan proporcionando la ruta de la imagen. El código para mostrar una imagen estática se verá algo así:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image} from "react-native";


export default function App() {
  return (
    <View style={styles.container}>
        <StatusBar style="auto" />
        <Text>.........................</Text>
        
        <Image
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require("./assets/facebook.png")}
        />
       
    </View>
  );
}

Aquí está el resultado.

Displaying a static image in React Native

Mostrando imágenes basadas en la web o imágenes de datos de URI

Mostrar una imagen de una red o una fuente basada en la web es similar a mostrar una imagen está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 continuación.

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";


export default function App() {
  return (
    <View style={styles.container}>
    
        <StatusBar style="auto" />
        
        <Text>....................</Text>

        <Image
          style={{ width: 100, height: 100 }}
          source={{ uri: "https://reactjs.org/logo-og.png" }}
        />
      
    </View>
  );
}

También tendrás que añadir las dimensiones de la imagen con un atributo style, como lo harías en HTML. Aquí está el resultado final de ambas imágenes.

También puedes mostrar imágenes a través de una URI de datos, en cuyo caso todos los datos de la imagen están realmente codificados en la URI. Esto solo se recomienda para imágenes muy pequeñas o dinámicas. Para una imagen codificada con URI, le darás a los datos de la imagen un atributo source como source={{ uri:'data:image/png;base64,iVBOR...=='}}.

No olvides que para las imágenes en red y codificadas con URI, tendrás que especificar manualmente las dimensiones de tu imagen.

Imágenes de fondo

También puedes usar una imagen como fondo de tu pantalla. Para ello, obten una imagen de fondo de tu elección y agrégala a la carpeta assets. Después, importa el componente ImageBackground de react-native como se muestra a continuación.

import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native';

El componente ImageBackground envuelve y muestra un fondo para cualquier elemento que esté dentro de él. En este caso, sustituiremos la etiqueta View por la etiqueta ImageBackground y envolveremos todo el contenido de la aplicación.

export default function App() {
  return (
    
      <ImageBackground
        source={require("./assets/back.jpeg")}
        style={styles.back_image}
      >
        <Text>.........................</Text>
        <StatusBar style="auto" />
        <Image
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require("./assets/facebook.png")}
        />
        <Text>..............</Text>

        <Image
          style={{ width: 100, height: 100 }}
          source={{ uri: "https://reactjs.org/logo-og.png" }}
        />
      </ImageBackground>
    
  );
}

Crear una galería de fotos

En esta sección, te mostraré cómo mostrar una cuadrí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 función que toma un elemento del array de datos y lo mapea a un elemento de React. Cada elemento de los datos necesita una identificación única. Este se encuentra en item.key por defecto, aunque se puede especificar otra forma de encontrar o construir el id utilizando la función keyExtractor prop.

Usaremos useState para añadir un array de imágenes. El gancho useState puede almacenar cualquier tipo de valor: un número, una cadena, un array, un objeto, etc. Añade el siguiente código a app.js.

import React, { useState} from 'react'

export default function App() {

  const [images, setimages] = useState([
    require('./assets/image.jpg'),
    require('./assets/image1.jpg'),
    require('./assets/image2.jpg'),
    require('./assets/image3.jpg'),
    require('./assets/image4.jpg'),
    require('./assets/image5.jpg'),
    require('./assets/image6.jpg'),
    require('./assets/image7.jpg'),
    require('./assets/image8.jpg')
  ]);
  }

Ten en cuenta que necesitarás tener estas imágenes en la carpeta assets.

A continuación, devolveremos un FlatList que muestra esas imágenes:

  return (
    <FlatList
      data={images}
      key={"2"}
      numColumns={2}
      renderItem={({ item }) => (
        <Image
          source={item}
          style={{
            width: 180,
            height: 220,
            borderWidth: 2,
            borderColor: "#c35547",
            resizeMode: "contain",
            margin: 6,
          }}
          keyExtractor={(item) => item.id}
        />
      )}
    />
  );

Configuramos el elemento FlatList para usar el array de images como fuente de datos. Luego definimos una función de renderización personalizada que toma un elemento del array de images y genera un componente Image para mostrarlo.

Aquí está la galería de fotos completa:

Conclusión

Como has visto, ¡trabajar con imágenes en React Native es muy fácil!

Si quieres poner en marcha tu próxima aplicación de React Native, o aprender de una aplicación construida profesionalmente, echa un vistazo a las plantillas de aplicaciones para móviles en CodeCanyon. CodeCanyon es un mercado en línea que tiene cientos de plantillas de aplicaciones móviles para Android, iOS, React Native y Ionic. Puedes ahorrarte días, incluso meses, de esfuerzo usando una de ellas.