0Pricing
React Academy · Lección

Estilos con la API StyleSheet y Flexbox

Escriba estilos móviles mediante StyleSheet.create y Flexbox sin nombres de clases CSS.

Estilos con la API StyleSheet y Flexbox es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Sin CSS en React Native

React Native utiliza una API de estilos de JavaScript: no hay archivos CSS, nombres de clase ni cascada. Los estilos son objetos de JavaScript que se aplican mediante la propiedad style.

StyleSheet.create()

Envuelva los objetos de estilo en StyleSheet.create() para mejorar el rendimiento (los estilos se validan y optimizan una sola vez) y obtener autocompletado en el IDE.

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 en línea

Aplique los estilos directamente mediante la propiedad style. La sintaxis de matriz combina varios objetos de estilo; los estilos posteriores sobrescriben los anteriores.

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

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

Flexbox en React Native

React Native utiliza Flexbox de forma predeterminada para la distribución, pero con valores predeterminados distintos de los de la web: flexDirection tiene el valor predeterminado 'column' (no 'row') y flex: 1 ocupa el espacio disponible.

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
  },
});

Distribución en fila

Utilice flexDirection: 'row' para distribuir los elementos secundarios horizontalmente, imitando display: flex; flex-direction: row de CSS.

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 frente a width/height

Utilice flex: N para establecer tamaños proporcionales. flex: 1 ocupa todo el espacio restante; flex: 2 obtiene el doble de espacio que los elementos hermanos con 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>

Posicionamiento absoluto

Utilice position: 'absolute' junto con top, right, bottom y left para los elementos superpuestos; funciona igual que el posicionamiento absoluto de CSS dentro de un elemento principal relativo.

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

Estilos específicos de la plataforma

Utilice Platform.OS o Platform.select() para aplicar estilos diferentes en iOS y Android.

import { Platform } from 'react-native';

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

Colores

React Native acepta cadenas de color de CSS (hexadecimales, rgb y con nombre), así como la API PlatformColor para los colores del 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 con props

Calcule los estilos a partir de las props dentro del componente. Pase una función a StyleSheet o calcule el objeto de estilo en línea.

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' } });

Comprobación rápida

¿Cuál es el valor predeterminado de flexDirection en React Native, que es diferente del de la web?

Repaso

Utilice StyleSheet.create() para obtener estilos optimizados y aplíquelos mediante la propiedad style. En React Native, Flexbox utiliza flexDirection: 'column' de forma predeterminada y flex: 1 ocupa el espacio restante. Utilice Platform.select() para aplicar estilos de sombra específicos del sistema operativo.

Preguntas frecuentes

¿La lección «Estilos con la API StyleSheet y Flexbox» es gratis?

Sí — el texto completo de «Estilos con la API StyleSheet y Flexbox» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estilos con la API StyleSheet y Flexbox»?

Escriba estilos móviles mediante StyleSheet.create y Flexbox sin nombres de clases CSS. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Estilos con la API StyleSheet y Flexbox»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Componentes principales de React Native frente al DOM web
  2. Estilos con la API StyleSheet y Flexbox
  3. Navegación con Expo Router
  4. Acceder a las API del dispositivo: cámara, ubicación y notificaciones push
← Volver a React Academy