 |
|
||||
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: 2158 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:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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'}}>
<Image source={require('./imagens/carro.jpg')} />
</View>
);
}
}
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: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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() {
return (
<View style={{padding: 10, flexDirection: 'column'}}>
<Image source={imagem} />
</View>
);
}
}
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: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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(){
return(
<View style={{padding: 10, flexDirection: 'column'}}>
<Image source={this.imagem} />
</View>
);
}
}
|
 Link para compartilhar na Internet ou com seus amigos: |
React Native ::: React Native - Componentes Visuais ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 1004 vezes |
|
O componente Image do React Native é usado quando queremos carregar imagens e exibí-las em nossas aplicações mobile. Este componente possibilita a exibição de diferentes tipos de imagens, incluindo imagens remotas (em um site, por exemplo), recursos estáticos, imagens em locais temporários e imagens a partir do armazenamento local, tais como imagens da câmera. Veja uma aplicação React Native completa que mostra como carregar uma imagem da internet e exibí-la em um componente Image. Note que a imagem a ser exibida é a logo do nosso site. Eis o código: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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'}}>
<Image style={{width: 237, height: 49}} source={{uri:
'https://www.arquivodecodigos.com.br/logo2.jpg'}} />
</View>
);
}
}
É importante observar que, quando a imagem estiver sendo carregada de uma rede (internet, por exemplo) ou via propriedade data, temos que, manualmente, indicar as dimensões da imagem a ser exibida. |
React Native ::: React Native - Componentes Visuais ::: Button |
Como detectar um clique em um botão do React Native e exibir uma mensagem AlertQuantidade de visualizações: 1287 vezes |
|
Nesta dica mostrarei como detectar um evento onPress em um botão do React Native e exibir uma mensagem usando o método alert() do componente Alert. Note que o evento onPress é disparado quando o usuário pressiona o botão. Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
import React, {Component} from 'react';
import {View, Button, Alert} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{backgroundColor: '#eeeeee',
padding: 30}}>
<Button onPress = {() =>
Alert.alert("Bem-vindo(a) ao React Native")}
title="Clique" />
</View>
);
}
}
Veja que este exemplo define o código a ser chamado quando o botão for clicado diretamente em sua declaração. Em outras dicas dessa seção você verá como clicar no botão e chamar uma função JavaScript residente fora da declaração do botão. |
Vamos testar seus conhecimentos em |
| Vantagens e Desvantagens do Concreto Armado O concreto simples é formado pela mistura entre cimento, agregados (miúdos e graúdos) e água. A junção de barras de aço na forma de armaduras com esse material resulta no concreto armado. Com relação às vantagens da utilização do concreto armado, analise as afirmações a seguir: I. Os processos de construção de estruturas de concreto armado são conhecidos, e a sua execução não exige mão de obra com elevado nível de qualificação. II. A grande massa e a rigidez dos elementos de concreto armado minimizam os efeitos de vibrações e oscilações decorrentes do vento e de utilização. III. Pelo fato de as estruturas de concreto serem monolíticas, elas apresentam facilidade em serem moldadas. Qual(is) está(ão) correta(s)? A) Apenas I. B) Apenas II. C) Apenas III. D) I e II. E) II e III. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual é a forma correta de se retornar o primeiro caractere de uma string em Python? A) letra = "BRASIL".char(0) B) letra = "BRASIL"[0] C) letra = "BRASIL".substring(0, 1) D) letra = "BRASIL".sub(0, 1) E) letra = sub("BRASIL", 0, 1) Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de águas pluviais Os condutos horizontais constituem a última porção a ser dimensionada nos sistemas de drenagem residenciais. Julgue as afirmações a seguir acerca dessa fração do sistema: I. Esses tubos devem ser conectados a montante com os tubos verticais que saem das calhas, tendo caixas de inspeção no caso de mudança de direção. II. Pela prática construtiva, as águas captadas pela calha e, nesse trecho final, são ligadas ao emissário do esgoto residencial, onde serão ligadas à rede pública. III. Uma vez que há o risco de entupimento, uma declividade mínima de 0,5% é prevista por norma, cabendo ao projetista verificar se esta é suficiente para a demanda da rede. IV. Embora seja uma solução pouco econômica, quanto maior é a declividade, melhor é o desempenho da rede, uma vez esse aumento não acarretará danos ao sistema. Assinale a alternativa correta. A) I e III são verdadeiras. B) II e III são verdadeiras. C) II e IV são verdadeiras. D) III e IV são verdadeiras. E) II, III e IV são verdadeiras. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Máquinas de fluxo radial Máquinas de fluxo radial, com fluxo predominantemente radial na região de trabalho da linha de lâmina móvel, podem ser exemplificadas por um ventilador ou bomba de fluxo radial (ou centrífuga), cujo escoamento se dá com o fluxo de saída ortogonal ao de entrada ao rotor. Sobre as classificações de fluxo em máquinas hidráulicas, qual afirmativa está correta? A) O fluxo axial ocorre em máquinas hidráulicas quando o fluido entra pelas pás do rotor em um sentido e sai no mesmo sentido, porém na direção contrária à de entrada. B) O fluxo misto ocorre em máquinas hidráulicas quando o fluido entra pelas pás do rotor em um sentido e sai no mesmo sentido, porém na direção contrária à de entrada. C) O fluxo misto em máquinas hidráulicas ocorre quando o fluido entra e sai no mesmo sentido, porém com ângulo próximo a 90° em relação à entrada. D) Há um grupo que não se enquadra na categoria de fluxo radial. Esse grupo específico tem um escoamento do fluxo que entra em um sentido e sai perpendicularmente. E) Há um grupo que não se enquadra na categoria de fluxo radial, tampouco na categoria axial. Esta categoria remanescente é conhecida como máquinas de fluxos misto. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual é a sintáxe correta do laço FOR em JavaScript? A) for (var i = 0; i <= 5) {} B) for var i = 1 to 5 {} C) for (var i <= 5; i++) {} D) for (var i = 0; i <= 5; i++) {} Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
|
Java - Como usar a classe Character da linguagem Java para tratar caracteres individuais em seus programas |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
