 |
|
Você está aqui: React Native ::: React Native - Componentes de Layout ::: View |
Como usar o componente View do React Native para controlar o layout de suas aplicações mobileQuantidade de visualizações: 2080 vezes |
|
A View do React Native é o componente principal para a construção da UI, ou seja, da interface de usuário de nossas aplicações Android e iOS. Este componente é um container que nos permite definir o layout usando flexbox, style, algumas funções de gerenciamento de toque e controles de acessibilidade. Para programadores que entendem também de programação web (React, Angular, HTML, CSS, etc), o componente View não é nada mais que um elemento <div>. Além disso, o componente View pode ser aninhado dentro de outras Views e pode ter 0 ou mais filhos, de qualquer tipo. Veja um aplicação React Native completa na qual temos uma View contendo um botão Button, uma caixa de texto TextInput e um rótulo Text: ----------------------------------------------------------------------
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, TextInput, Text} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{backgroundColor: '#eeeeee',
padding: 30}}>
<Button title="Clique Aqui" />
<TextInput placeholder="Seu nome" />
<Text>Sou um texto</Text>
</View>
);
}
}
Note que usei um style inline para definir a cor de fundo da View por meio da propriedade backgroundColor e o espaçamento interno de 30 unidades de medida por meio da propriedade padding. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
