Você está aqui: React Native ::: React Native - Componentes Visuais ::: Image |
|||
Como exibir imagens estáticas no React Native usando o componente ImageQuantidade de visualizações: 2197 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:
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:
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:
|
|||
![]() |
|||
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
JavaScript - Como retornar o código ASCII ou Unicode associado a um caractere em JavaScript usando a função charCodeAt() Python - Como tratar o evento wx.EVT_MOVE em suas aplicações wxPython - Interfaces gráficas no Python |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |