4.3-24. Componentes nativos de React Native: Text, Image, TextInput

 

Dominando Componentes Nativos en React Native

React Native ofrece una amplia variedad de componentes nativos que nos permiten construir interfaces móviles potentes. En este post, exploraremos los fundamentos de los componentes básicos: Text, Image y TextInput.

🖋 Componente Text

El equivalente a <p> o <span> en la web, pero con superpoderes móviles:

jsx

import { Text } from 'react-native';

<Text style={styles.title}>Perfil</Text>

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    textTransform: 'uppercase', // MAYÚSCULAS
    marginTop: 18,
  },
});

Propiedades útiles:

• numberOfLines: Limita líneas con ... al final

• ellipsizeMode: Controla dónde aparecen los puntos suspensivos

• adjustsFontSizeToFit: Ajusta automáticamente el tamaño

🖼 Componente Image

Para mostrar imágenes locales o remotas:

jsx

import { Image } from 'react-native';

// Imagen remota
<Image 
  source={{ uri: 'https://ejemplo.com/user.jpg' }}
  style={styles.avatar}
/>

// Imagen local (require)
<Image 
  source={require('./assets/user-placeholder.png')}
  style={styles.avatar}
/>

const styles = StyleSheet.create({
  avatar: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },
});

Tipos de resizeMode:

Modo	Descripción
cover	Cubre todo el espacio (puede recortar)
contain	Muestra completa (puede dejar espacios)
stretch	Estira para llenar (puede distorsionar)

⌨️ Componente TextInput

El campo de texto para interacción del usuario:

jsx

import { TextInput } from 'react-native';

<TextInput
  style={styles.input}
  placeholder="Escribe tu nombre"
  onChangeText={(text) => console.log(text)}
/>

Propiedades clave:

• placeholder: Texto guía

• keyboardType: Tipo de teclado (email-address, numeric, etc.)

• secureTextEntry: Para contraseñas

• multiline: Campos de varias líneas

🎨 Estructura Básica de Pantalla

jsx

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

const ProfileScreen = () => {
  return (
    <View style={styles.container}>
      {/* Contenido aquí */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingHorizontal: 16,
    paddingTop: 18,
    alignItems: 'center', // Centrado horizontal
  },
});

💡 Buenas Prácticas

1. Siempre define width/height en imágenes

2. Usa padding en contenedores en lugar de margin en hijos

3. Tipa tus estilos con TypeScript:

   ts

   const styles = StyleSheet.create({
     container: {
       flex: 1,
     } as ViewStyle,
     title: {
       fontSize: 20,
     } as TextStyle
   });

4. Organiza tus imports:

   jsx

   // Primero react
   import React from 'react';
   // Luego componentes nativos
   import { View, Text, Image } from 'react-native';
   // Por último archivos locales
   import { styles } from './styles';

🚀 Próximos Pasos

En el siguiente post profundizaremos en:

• Personalización avanzada de TextInput

• Optimización de imágenes

• Accesibilidad en componentes nativos

¿Qué componente nativo te genera más dudas? ¡Déjalo en los comentarios!