 |
|
|
 Planilha de Dimensionamento de Tubulações
Hidráulicas Água Fria e Água Quente CompletaNossa planilha automática de dimensionamento de tubulações de água fria e quente é uma ferramenta desenvolvida para auxiliar engenheiros e projetistas no cálculo rápido e preciso das redes hidráulicas de edificaçoes. Por meio da inserçao de dados como vazao, diâmetro da tubulaçao, comprimento da rede, material do tubo e coeficientes hidráulicos, a planilha realiza automaticamente os cálculos necessários para verificar velocidade da água, perda de carga e dimensionamento adequado das tubulaçoes. |
||
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: 2411 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'}}>
<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:
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:
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: |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
|
AutoLISP - Como desenhar uma linha no AutoCAD usando AutoLISP - Dois pontos geométricos e o comando LINE |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
