7.2-34. Estilos y botones

 

Estilos y Botones en React Native: Diseño y Funcionalidad

En esta guía práctica, exploraremos cómo trabajar con estilos y botones en React Native, creando un contador interactivo con diseño profesional.

📝 Componentes Básicos de Texto

En React Native, todos los textos deben estar dentro de un componente <Text>:

jsx

import { Text } from 'react-native';

// ❌ Incorrecto
<View>Texto directo</View>

// ✅ Correcto
<Text>Texto envuelto correctamente</Text>

🎨 Estilos con StyleSheet

React Native usa un sistema de estilos similar a CSS, pero con sintaxis camelCase:

jsx

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  textHuge: {
    fontSize: 120,
    fontWeight: '100', // 'thin' también funciona
  },
  floatingButton: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    backgroundColor: '#65558F',
    padding: 20,
    borderRadius: 15,
    // Sombra para iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    // Sombra para Android
    elevation: 3,
  },
});

🔘 Componentes de Botón

React Native ofrece varias opciones para botones:

1. Pressable (Recomendado)

jsx

<Pressable 
  style={styles.floatingButton}
  onPress={() => setCount(count + 1)}
  onLongPress={() => setCount(0)}
>
  <Text style={{ color: 'white', fontSize: 20 }}>+1</Text>
</Pressable>

2. TouchableOpacity

jsx

<TouchableOpacity 
  style={styles.floatingButton}
  onPress={() => setCount(count + 1)}
  activeOpacity={0.7} // Controla la opacidad al presionar
>
  <Text style={{ color: 'white', fontSize: 20 }}>+1</Text>
</TouchableOpacity>

3. Button (Básico - No recomendado para diseños personalizados)

jsx

<Button 
  title="+1" 
  onPress={() => setCount(count + 1)} 
  color="#65558F"
/>

💡 Mejores Prácticas para Botones

1. Feedback visual: Usa activeOpacity o el estado pressed de Pressable

   jsx

   <Pressable
     style={({ pressed }) => [
       styles.button,
       { opacity: pressed ? 0.6 : 1 }
     ]}
   >

2. Accesibilidad: Agrega accessibilityLabel

   jsx

   <Pressable accessibilityLabel="Incrementar contador">

3. Estilos consistentes: Crea componentes reutilizables

   jsx

   function FloatingButton({ onPress, title }) {
     return (
       <Pressable style={styles.floatingButton} onPress={onPress}>
         <Text style={styles.buttonText}>{title}</Text>
       </Pressable>
     );
   }

🌈 Sombras Multiplataforma

Para sombras que funcionen en iOS y Android:

jsx

button: {
  // iOS
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  // Android
  elevation: 5,
  // Estilo base
  backgroundColor: '#65558F',
  borderRadius: 10,
}

🚀 Ejemplo Completo: Contador Interactivo

jsx

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

export default function CounterApp() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counterText}>{count}</Text>
      
      <Pressable
        style={({ pressed }) => [
          styles.floatingButton,
          { opacity: pressed ? 0.6 : 1 }
        ]}
        onPress={() => setCount(c => c + 1)}
        onLongPress={() => setCount(0)}
        accessibilityLabel="Botón para incrementar contador"
      >
        <Text style={styles.buttonText}>+1</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  counterText: {
    fontSize: 120,
    fontWeight: '100',
    color: '#333',
  },
  floatingButton: {
    position: 'absolute',
    bottom: 40,
    right: 40,
    backgroundColor: '#65558F',
    padding: 20,
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
});

📌 Conclusión

• Siempre usa <Text> para cualquier contenido textual

• StyleSheet.create() ofrece mejor rendimiento que estilos en línea

• Pressable es el componente más flexible para botones

• Las sombras requieren configuraciones diferentes para iOS/Android

• Crea componentes reutilizables para mantener consistencia

¿Qué otros estilos te gustaría aprender a implementar en React Native? ¡Déjanos tus preguntas en los comentarios!