Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Você está aqui: React Native ::: React Native - Componentes Visuais ::: Image

Como exibir imagens estáticas no React Native usando o componente Image

Quantidade de visualizações: 2171 vezes
Nesta dica mostrarei como carregar e exibir imagens locais, ou seja, a partir de uma determinado diretório de nossa aplicação React Native, usando o componente Image. Para isso nós vamos usar a propriedade source da Image e a função require(). Veja o seguinte código:

import React, {Component} from 'react';  
import {Image, View} from 'react-native';  
   
type Props = {};  
export default class App extends Component<Props> {  
  render() {  
    return (        
      <View style={{padding: 10, flexDirection: 'column'}}>  


Esta é a uma aplicação React Native completa e funcional. A imagem "carro.jpg" foi colocada em um diretório chamado "imagens" e que se situa no mesmo nível do arquivo App.js. Para facilitar o entendimento, coloquei o endereço e nome da imagem diretamente na propriedade source.

Veja agora como podemos declarar uma variável que guardará o caminho e nome da imagem e depois usar esta variável na propriedade source:

import React, {Component} from 'react';  
import {Image, View} from 'react-native';  
  
// nome e caminho da imagem
const imagem = require('./imagens/carro.jpg');
 
type Props = {};  
export default class App extends Component<Props> {  
  render() {  


Aqui eu coloquei a variável com o caminho e nome da imagem de forma global. Se você quiser restringi-la à classe App, o código é assim:

import React, {Component} from 'react';  
import {Image, View} from 'react-native';  
 
type Props = {};  
export default class App extends Component<Props> {  
  // caminho e nome da imagem
  imagem = require('./imagens/carro.jpg');
  
  render(){  


Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de React Native

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 27 usuários muito felizes estudando em nosso site.