Incluir una imagen en React Native

Al diseñar una aplicación, debe trabajar con iconos y logotipos.

Estas imágenes pueden estar en diferentes formatos. En React-Native, es fácil incluir una imagen en su aplicación.

Este artículo mostrará cómo podemos incluir imágenes y dimensionarlas en la aplicación React-Native. Además, discutiremos el tema siguiendo los ejemplos y explicaciones necesarios para facilitar el tema.

Para incluir una imagen en su aplicación React-Native, siga los pasos a continuación:

1. Importa la Imagen del paquete react-native.

2. Dentro de return(), implemente la etiqueta image de la siguiente manera:

   <Image
   	style={styles.YOUR_ID}
   	source={{
   	  uri: 'https://yourlink.com/yourImage.jpg',
   	}}
     />
   

3. Por último, diseñe (dimensione) la imagen usando la ID específica.

Mientras discutimos los pasos necesarios para incluir una imagen en la aplicación React-Native, veamos un ejemplo para que nos quede más claro.

un ejemplo de inclusión de imagen y tamaño en la aplicación React-Native

En nuestro ejemplo a continuación, ilustramos cómo podríamos incluir imágenes en nuestra aplicación React-Native. El código de nuestro ejemplo se encuentra a continuación.

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

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );

}

const styles = StyleSheet.create({ / /
        Providing style.container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
    img: {
      width: 100,
      height: 100,
      resizeMode: 'contain',
    },
});

El propósito de todas las líneas necesarias con respecto a los pasos compartidos anteriormente en el ejemplo se deja como comentarios. Ahora, cuando ejecute la aplicación, obtendrá el siguiente resultado en su pantalla.

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