Como Mostrar Una Imagen En React Native

2 minuto(s)

En esta página:

El framework React Native nos permite crear geniales aplicaciones móviles híbridas.

Digo híbridas porque las aplicaciones son creadas usando JavaScript y otras tecnologías web.

En este tutorial, te enseñaré a Como Mostrar Una Imagen En React Native, vamos con ello.

Aplicación móvil creada con React Native — Las aplicaciones creadas con React Native tiene compatibilidad con diferentes sistemas operativos móviles como Android, iOS, etc.

Lo primero que debes hacer es importar el componente Image de React Native:


import {
  Image, // Importamos el componente 'Imagen' 
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {

Image, // Importamos el componente 'Imagen'

SafeAreaView,

ScrollView,

StatusBar,

StyleSheet,

Text,

useColorScheme,

View,

} from 'react-native';

Luego en el código de la vista Front-End agregamos la imagen dentro un componente View de React Native.

Sabías que con React Native también puedes crear aplicaciones para Android TV.

Te mostraré 2 ejemplos, en uno mostramos una imagen desde una URL.

Y otra imagen la mostramos desde una carpeta específica de la computadora:


// Mostrar una imagen desde una URL 
<View style={styles.container}>
  <Image
    style={styles.logo}
    source={{
      uri: 'https://nubecolectiva.com/img/logo2.jpg',
    }}
  />
</View>

// Mostrar una imagen desde una carpeta de la PC  
<View style={styles.container}>
  <Image
    style={styles.logo}
    source={
    require('./src/assets/img/logo2.jpg')
    }
   />
</View>

// Mostrar una imagen desde una URL

<Image

style={styles.logo}

source={{

uri: 'https://nubecolectiva.com/img/logo2.jpg',

}}

</View>

// Mostrar una imagen desde una carpeta de la PC

<Image

style={styles.logo}

source={

require('./src/assets/img/logo2.jpg')

}

</View>

Si ejecuto mi aplicación puedo ver las imágenes sin problemas:

Aplicación creada con React Native que muestra una imagen — La aplicación de React Native esta creada para Android y para iOS también te va a funcionar, solo sigue los pasos indicados en este tutorial

Para la imagen que muestro desde una carpeta en la computadora, creo una carpeta llamada src en el directorio principal del proyecto.

Y dentro de la carpeta src creo un directorio llamado assets.

Dentro del directorio assets creo un directorio llamada img y dentro de el coloco mis imágenes:


/appholamundo
  ├── _tests_
  ├── /android
  ├── /ios
  ├── /node_modules
  ├── /src 
     ├── /assets 
        ├── /img
           ├── logo2.jpg // Imagen que uso en este tutorial
  ├── .buckconfig
  ├── .eslintrc.js
  ├── .flowconfig
  ├── .gitattributes
  ├── .gitignore
  ├── .prettierrc.js
  ├── .watchmanconfig
  ├── App.js
  ├── app.json
  ├── babel.config.js
  ├── index.js
  ├── metro.config.js
  ├── package.json
  ├── yarn.lock

/appholamundo

├── _tests_

├── /android

├── /ios

├── /node_modules

├── /src

├── /assets

├── /img

├── logo2.jpg // Imagen que uso en este tutorial

├── .buckconfig

├── .eslintrc.js

├── .flowconfig

├── .gitattributes

├── .gitignore

├── .prettierrc.js

├── .watchmanconfig

├── App.js

├── app.json

├── babel.config.js

├── index.js

├── metro.config.js

├── package.json

├── yarn.lock

Estoy usando los siguientes estilos para el componente View e Image:


const styles = StyleSheet.create({

  logo: {
    marginTop: 20,
    width: 100,
    height: 100,
  },

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }

});