React Native - Imágenes

En este capítulo, entenderemos cómo trabajar con imágenes en React Native.

Agregar imagen

Creemos una nueva carpeta img dentro de srccarpeta. Agregaremos nuestra imagen (myImage.png) dentro de esta carpeta.

Mostraremos imágenes en la pantalla de inicio.

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

Se puede acceder a la imagen local utilizando la siguiente sintaxis.

image_example.js

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample

Salida

Densidad de pantalla

React Native ofrece una forma de optimizar imágenes para diferentes dispositivos usando @2x, @3xsufijo. La aplicación cargará solo la imagen necesaria para una densidad de pantalla particular.

Los siguientes serán los nombres de la imagen dentro del img carpeta.

[email protected]
[email protected]

Imágenes de red

Al usar imágenes de red, en lugar de require, Necesitamos el sourcepropiedad. Se recomienda definir elwidth y el height para imágenes de red.

App.js

import React from 'react';
import ImagesExample from './image_example.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

image_example.js

import React, { Component } from 'react'
import { View, Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

Salida