React Native - Imagens

Neste capítulo, entenderemos como trabalhar com imagens no React Native.

Adicionando Imagem

Vamos criar uma nova pasta img dentro de srcpasta. Vamos adicionar nossa imagem (myImage.png) dentro desta pasta.

Vamos mostrar imagens na tela inicial.

App.js

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

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

A imagem local pode ser acessada usando a seguinte sintaxe.

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

Resultado

Densidade da tela

React Native oferece uma maneira de otimizar imagens para diferentes dispositivos usando @2x, @3xsufixo. O aplicativo carregará apenas a imagem necessária para uma densidade de tela específica.

A seguir estão os nomes da imagem dentro do img pasta.

[email protected]
[email protected]

Imagens de rede

Ao usar imagens de rede, em vez de require, precisamos do sourcepropriedade. Recomenda-se definir owidth e a height para imagens de rede.

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

Resultado