0Pricing
React Academy · Aula

Estilização com a API StyleSheet e Flexbox

Escreva estilos para dispositivos móveis usando StyleSheet.create e Flexbox, sem nomes de classes CSS.

Estilização com a API StyleSheet e Flexbox é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

CSS no React Native

O React Native usa uma API de estilos do JavaScript — não há arquivos CSS, nomes de classe nem cascata. Os estilos são objetos JavaScript aplicados pela propriedade style.

StyleSheet.create()

Envolva os objetos de estilo em StyleSheet.create() para obter melhor desempenho (os estilos são validados e otimizados uma única vez) e preenchimento automático no editor.

import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Estilos embutidos

Aplique os estilos diretamente pela propriedade style. A sintaxe de lista combina vários objetos de estilo — os estilos posteriores substituem os anteriores.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox no React Native

O React Native usa Flexbox por padrão para a disposição dos elementos, mas com padrões diferentes dos da Web: flexDirection usa 'column' por padrão (não 'row'), e flex: 1 preenche o espaço disponível.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Disposição em linha

Use flexDirection: 'row' para dispor os elementos filhos horizontalmente, imitando o CSS display: flex; flex-direction: row.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex vs. largura/altura

Use flex: N para dimensionamento proporcional. flex: 1 preenche todo o espaço restante; flex: 2 recebe o dobro do espaço dos elementos irmãos com flex: 1.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Posicionamento absoluto

Use position: 'absolute' com top, right, bottom e left para elementos sobrepostos — exatamente como o posicionamento absoluto do CSS dentro de um elemento pai relativo.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Estilos específicos da plataforma

Use Platform.OS ou Platform.select() para aplicar estilos diferentes no iOS e no Android.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Cores

O React Native aceita strings de cores do CSS (hexadecimal, RGB e nomeadas) e a API PlatformColor para cores do sistema.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Estilos dinâmicos com propriedades

Calcule os estilos a partir das propriedades dentro do componente. Passe uma função para StyleSheet ou calcule o objeto de estilo embutido.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Verificação rápida

Qual é o valor padrão de flexDirection no React Native (diferente da Web)?

Recapitulação

Use StyleSheet.create() para obter estilos otimizados e aplique-os pela propriedade style. O Flexbox do React Native usa flexDirection: 'column' por padrão, e flex: 1 preenche o espaço restante. Use Platform.select() para estilos de sombra específicos do sistema operacional.

Perguntas Frequentes

A aula “Estilização com a API StyleSheet e Flexbox” é grátis?

Sim — o texto completo de “Estilização com a API StyleSheet e Flexbox” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Estilização com a API StyleSheet e Flexbox”?

Escreva estilos para dispositivos móveis usando StyleSheet.create e Flexbox, sem nomes de classes CSS. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Estilização com a API StyleSheet e Flexbox”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Componentes principais do React Native vs DOM da Web
  2. Estilização com a API StyleSheet e Flexbox
  3. Navegação com Expo Router
  4. Acessando APIs do dispositivo: câmera, localização e notificações push
← Voltar para React Academy