 |
|
||||
Você está aqui: React Native ::: React Native - Componentes de Layout ::: Flexbox |
Como usar a propriedade flexDirection do React Native para controlar o alinhamento de componentes em uma ViewQuantidade de visualizações: 3676 vezes |
|
Em algumas situações nós precisamos controlar como os componentes que compõem as Views de nossas telas do React Native serão alinhados. Para isso nós podemos usar a propriedade flexDirection do Flexbox, ou seja, do algorítmo Flexbox do CSS3. A propriedade flexDirection permite os seguintes valores: column - Este é o valor padrão e alinha os elementos filhos de uma View começando da parte superior do container e indo em direção à parte inferior (from top to bottom). row - Alinha os elementos filhos de um View da esquerda para a direita (from left to right). Se a quebra de linha estiver habilitada, então uma nova linha de componentes será criada logo abaixo da linha anterior, recomeçando da esquerda para a direita. column-reverse - Faz o inverso do valor column, ou seja, os componentes filhos serão alinhados começando na parte inferior e indo em direção superior (from bottom to top). row-reverse - Faz o inverso do valor row, ou seja, os componentes filhos da View serão alinhados da direita para a esquerda (from right to left). Se a quebra de linha estiver habilitada, então uma nova linha de componentes será criada logo abaixo da linha anterior, recomeçando da direita para a esquerda. Veja uma aplicação React Native completa na qual temos um container View com três botões Button. Note o uso do valor row para a propriedade flexDirection da View: ----------------------------------------------------------------------
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} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{backgroundColor: '#eeeeee',
padding: 10, flexDirection: 'row'}}>
<Button title="Cadastrar" />
<Button title="Listar" />
<Button title="Excluir" />
</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 |
| Cisalhamento e detalhamento de vigas Em um projeto estrutural, tão importantes quanto a solução adotada ou o atendimento às normas vigentes são os detalhamentos claros, ou seja, que não causem interpretações erradas quanto ao que deve ser executado. Acerca dos elementos estruturais que compõem as vigas de concreto armado, marque a alternativa correta: A) No caso de não existir armadura comprimida, devem ser inseridas armaduras denominadas de porta estribos com diâmetro de, pelo menos, duas vezes o do estribo. B) A armadura de pele deve ter valor mínimo de 0,15% Ac,alma em cada face da alma da viga. C) O afastamento entre as barras da armadura de pele não pode ser superior a d/3, 30cm e 20ϕ. D) A armadura de suspensão deve ser usada nas proximidades de cargas concentradas transmitidas à viga por outras vigas. E) O porta estribo tem função estrutural, fazendo parte do cálculo para o dimensionamento da armadura transversa em vigas de concreto armado. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Dimensionamento de Redes de Distribuição de Água Qual o número de habitantes se deve atingir para que um bloco populacional que hoje é atendido pela tubulação de 150 mm de diâmetro, e cada habitante consome em média 300 L/dia, tendo uma vazão no sistema de 6,5 L/s, ao qual ainda consegue atender bem atualmente? Busque consultar a tabela da norma ABNT que indica a vazão máxima para cada diâmetro de tubulação.  A) 5000 habitantes B) 5520 habitantes C) 3000 habitantes D) 652 habitantes E) 2256 habitantes Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual das formas abaixo é usada para criar um SET em Python? A) valores = set{3, 6, 1, 7, 6, 3} B) valores = (3, 6, 1, 7, 6, 3) C) valores = [3, 6, 1, 7, 6, 3] D) valores = {3, 6, 1, 7, 6, 3} E) valores = set(3, 6, 1, 7, 6, 3) Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação O artifício chamado de contraflecha, usual no processo de execução de formas para estruturas em concreto armado, é utilizado para impedir o quê? A) A tração. B) A compressão. C) A flexão. D) A torção. E) O cisalhamento. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| O aço no edifício A estrutura de estabilização da moldura estrutural da edificação da figura abaixo, que se caracteriza pelo fato de não possuir amarrações diagonais nem paredes de cisalhamento para assegurar a estabilidade lateral, pode ser chamada de:  A) Estrutura contraventada. B) Moldura amarrada excentricamente. C) Moldura resistente a momentos. D) Paredes de cisalhamento. E) Nenhuma das alternativas anteriores. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
