 |
|
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: 3631 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 ::: Button |
Como detectar um clique em um botão do React Native e exibir uma mensagem AlertQuantidade de visualizações: 1258 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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. |
React Native ::: React Native - Componentes Visuais ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 965 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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. |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
|
Delphi - Como usar a propriedade Eof para verificar se estamos no último registro do TClientDataSet do Delphi AutoCAD Civil 3D .NET C# - Como retornar a quantidade de estacas de um alinhamento do Civil 3D usando a função GetStationSet() da classe Alignment da AutoCAD Civil 3D .NET API AutoCAD Civil 3D - Como criar pontos COGO no AutoCAD Civil 3D |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
