Imagen dinámica en React Native

A veces necesitamos incluir imágenes dinámicamente en nuestra aplicación React Native. Estas imágenes cambian condicionalmente o cuando un usuario hace clic en un botón o realiza una acción.

Podemos usar la función require() para requerir dinámicamente el módulo de imagen pasando la ruta de la imagen.

En este artículo, aprenderemos cómo podemos incluir imágenes dinámicamente en una aplicación React Native. Además, facilitaremos el tema proporcionando los ejemplos y explicaciones necesarios.

Para ello, utilizaremos una función llamada required(). Veamos un ejemplo para facilitar el tema.

Agregue una imagen dinámica en la aplicación React Native

En nuestro ejemplo a continuación, ilustramos cómo podríamos incluir una imagen dinámicamente en una aplicación React Native. Echemos un vistazo al siguiente código:

// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Image, Text, View } from 'react-native';

// Our main function
export default function App() {

  let img = "./assets/image2.jpg"; // Declaring a variable that hold the image location
  return (
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image style={styles.img} source={require(img)} />
      <StatusBar style="auto" />
    </View>
  );

}

const styles = StyleSheet.create({ // Providing some styles to the UI
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 100,
  },
  img: {
    width: '100%',
    height: 120,
  },
});

Ya hemos ordenado el propósito de cada línea. En el código de ejemplo anterior, primero creamos una variable llamada img que contendrá la ubicación de la imagen.

Después de eso, pasamos esa variable a la función require() que cargará la imagen desde la ubicación específica. Ahora, después de ejecutar el ejemplo anterior, puede obtener un resultado como el siguiente:

Producción:

Tenga en cuenta que el código de ejemplo compartido anteriormente se crea en React Native y usamos Expo-CLI para ejecutar la aplicación.