Você está na página 1de 2

Importações:

import React, {Component} from 'react';


import {View, Text, Image, Button, StyleSheet, TextInput} from 'react-native'; // Precisa importar
no começo

<View>
<View style={{marginTop: 20, flex: 1, flexDirection: 'row', alignItems: 'stretch', width: 100, height:
50, backgroundColor: 'green'}}>

A propriedade alignItems em React Native é usada para controlar o


alinhamento dos elementos filhos ao longo do eixo transversal do
contêiner flexível. Ela determina como os elementos filhos serão
alinhados verticalmente dentro de seu contêiner pai quando o eixo
principal do layout é definido como column (coluna) ou
horizontalmente quando o eixo principal é definido como row
(linha).
'flex-start': Os elementos são alinhados no início do contêiner.
'flex-end': Os elementos são alinhados no final do contêiner.
'center': Os elementos são centralizados verticalmente no
contêiner.
'stretch': Os elementos são esticados para preencher o contêiner
verticalmente.
'baseline': Os elementos são alinhados pela linha de base (se
disponível).

Dica do professor:
em row => alignItems: linha justifyContent: coluna
em column => alignItems: coluna justifyContent: linha

<Text>
<Text style={{color: 'red', fontSize: 25, margin: 15, textAlign: 'center'}}>
Sujeito Programador
</Text>

margin é definido em todos os lados:


marginTop: 10 adicionará um espaço de 10 unidades acima do
elemento.
marginBottom: 20 adicionará um espaço de 20 unidades abaixo do
elemento.
marginLeft: 5 adicionará um espaço de 5 unidades à esquerda do
elemento.
marginRight: 15 adicionará um espaço de 15 unidades à direita do
elemento.

TextAlign trata do alinhamento horizontal do texto:


'auto': O alinhamento é determinado automaticamente baseado no
conteúdo do texto.
'left': O texto é alinhado à esquerda.
'center': O texto é centralizado horizontalmente.
'right': O texto é alinhado à direita.
'justify': O texto é justificado, com espaços extras entre as
palavras para preencher o espaço disponível.
'justify-all': Similar a 'justify', mas também justifica a última
linha de texto.

<Button>
<Button title='Entrar' onPress={() => this.entrar('Matheus')} onPress={this.entrar}/>

<Image>
<Image
source={{uri: img}}
style={{width: this.props.largura, height: this.props.altura}}
/>

<TextInput>
<TextInput
style={styles.input}
placeholder="Digite o seu nome"
underlineColorAndroid="transparent"
onChangeText={this.pegaNome}
onChangeText={(texto) => this.setState({input: texto})}
/>

height: 45,
borderWidth: 1,
borderColor: '#222',
margin: 10,
fontSize: 20,
padding: 10,

Você também pode gostar