Au10 - Mobile - React Native - Estilizando o formulário - Mestres BEGIN

Nesta aula focamos na aplicação prática de estilos usando o StyleSheet do React Native para criar formulários atraentes e funcionais.

Estrutura Básica do Formulário

1import { View, TextInput, StyleSheet } from "react-native"; 
2const MeuFormulario = () => { 
3    return ( 
4        <View style={styles.container}gt; 
5        <TextInput style={styles.input} placeholder="Nome" /> 
6        <TextInput style={styles.input} placeholder="E-mail" keyboardType="email-address" /> 
7        <TextInput style={styles.input} placeholder="Senha" secureTextEntry /> 
8        </View> 
9    ); 
10}

Criação de Estilos com StyleSheet

1const styles = StyleSheet.create({ 
2    container: { 
3        flex: 1, 
4        justifyContent: "center", 
5        paddingHorizontal: 20, 
6    }, 
7    input: { 
8        height: 50, 
9        borderWidth: 1, 
10        borderColor: "#ccc", 
11        borderRadius: 8, 
12        paddingHorizontal: 15, 
13        marginBottom: 15, 
14        fontSize: 16, 
15    }, 
16});

Principais Propriedades de Estilo

Propriedade	Descrição	Exemplo
flex	Controle de dimensionamento	flex: 1 (ocupa todo espaço)
padding/margin	Espaçamento interno/externo	paddingHorizontal: 20
borderRadius	Cantos arredondados	borderRadius: 8
fontSize	Tamanho do texto	fontSize: 16

Estilização de Botão

1const styles = StyleSheet.create({ 
2    button: { 
3        backgroundColor: "#3498db", 
4        paddingVertical: 12, 
5        borderRadius: 8, 
6        alignItems: "center", 
7    }, 
8    buttonText: { 
9        color: "white", 
10        fontSize: 16, 
11        fontWeight: "bold", 
12    }, 
13});

Layout com Flexbox

1const styles = StyleSheet.create({ 
2    formContainer: { 
3        flex: 1, 
4        flexDirection: "column", 
5        justifyContent: "center", 
6        alignItems: "stretch", 
7    }, 
8});

Configurações essenciais:

flexDirection: Define o eixo principal (column/row)
justifyContent: Alinhamento no eixo principal
alignItems: Alinhamento no eixo cruzado

Boas Práticas

Centralize todos os estilos no StyleSheet
Nomeie os estilos semanticamente
Reutilize estilos comuns
Use constantes para cores e valores repetidos
Mantenha uma hierarquia lógica nos estilos

Exemplo Completo

1const styles = StyleSheet.create({ 
2    container: { 
3        flex: 1, 
4        backgroundColor: "#f5f5f5", 
5        padding: 20, 
6    }, 
7    input: { 
8        backgroundColor: "white", 
9        height: 50, 
10        borderWidth: 1, 
11        borderColor: "#ddd", 
12        borderRadius: 6, 
13        padding: 10, 
14        marginBottom: 15, 
15    }, 
16    button: { 
17        backgroundColor: "#2ecc71", 
18        padding: 15, 
19        borderRadius: 6, 
20        alignItems: "center", 
21        marginTop: 10, 
22    }, 
23    buttonText: { 
24        color: "white", 
25        fontWeight: "bold", 
26        fontSize: 16, 
27    }, 
28});