24. Componentes nativos de React Native

 

Tutorial: Componentes Nativos de React Native - Text, Image, TextInput

📱 Introducción

En este tutorial aprenderemos a utilizar tres componentes fundamentales de React Native: Text, Image y TextInput. Estos componentes son los bloques básicos para construir interfaces de usuario en aplicaciones móviles.

🎯 Objetivo del Tutorial

Crearemos una pantalla de perfil que incluya:

  1. Un título con estilos personalizados

  2. Una imagen de perfil (local y remota)

  3. Un campo de entrada de texto

🏗️ Paso 1: Configuración Inicial

Estructura de archivos:

text

src/

├── screens/

│   └── Profile.tsx

└── App.tsx

Profile.tsx - Versión inicial:

tsx

import React from 'react';

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


export const Profile = () => {

  return (

    <View style={style.mainContainer}>

      {/* Aquí agregaremos nuestros componentes */}

    </View>

  );

};


const style = StyleSheet.create({

  mainContainer: {

    flex: 1,

    backgroundColor: 'white',

  },

});

App.tsx:

tsx

import React from 'react';

import { Profile } from './src/screens/Profile';


const App = () => {

  return <Profile />;

};


export default App;

✨ Paso 2: Componente Text

El componente Text se utiliza para mostrar texto en la pantalla.

Profile.tsx con Text:

tsx

import React from 'react';

import {

  View,

  Text,

  StyleSheet,

  TextStyle,

  ViewStyle

} from 'react-native';


export const Profile = () => {

  return (

    <View style={style.mainContainer}>

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

    </View>

  );

};


const style = StyleSheet.create({

  mainContainer: {

    flex: 1,

    backgroundColor: 'white',

    alignItems: 'center',        // Centra horizontalmente

    paddingHorizontal: 16,       // Espacio izquierda/derecha

    paddingVertical: 18,         // Espacio arriba/abajo

  } as ViewStyle,

  

  title: {

    fontSize: 28,                // Tamaño de fuente

    textTransform: 'uppercase',  // Convierte a mayúsculas

  } as TextStyle,

});

Propiedades importantes de Text:

  • style: Estilos CSS-like

  • numberOfLines: Limita líneas de texto

  • ellipsizeMode: Cómo mostrar "..." si el texto es muy largo

  • onPress: Función al presionar el texto

🖼️ Paso 3: Componente Image

El componente Image muestra imágenes locales o remotas.

Profile.tsx con Image:

tsx

import React from 'react';

import {

  View,

  Text,

  Image,

  StyleSheet,

  TextStyle,

  ViewStyle,

  ImageStyle

} from 'react-native';


export const Profile = () => {

  return (

    <View style={style.mainContainer}>

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

      

      {/* Imagen desde URL */}

      <Image

        source={{

          uri: 'https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png'

        }}

        style={style.image}

      />

    </View>

  );

};


const style = StyleSheet.create({

  mainContainer: {

    flex: 1,

    backgroundColor: 'white',

    alignItems: 'center',

    paddingHorizontal: 16,

    paddingVertical: 18,

  } as ViewStyle,

  

  title: {

    fontSize: 28,

    textTransform: 'uppercase',

  } as TextStyle,

  

  image: {

    width: 100,

    height: 100,

    borderRadius: 50,  // Hace la imagen circular

    marginTop: 20,     // Espacio arriba de la imagen

  } as ImageStyle,

});

Cargar imágenes de diferentes fuentes:

1. Imagen desde URL:

tsx

<Image

  source={{

    uri: 'https://ejemplo.com/imagen.jpg'

  }}

  style={style.image}

/>

2. Imagen local (desde assets):

tsx

<Image

  source={require('./assets/perfil.jpg')}

  style={style.image}

/>

3. Imagen desde módulo:

tsx

<Image

  source={require('@assets/perfil.png')}

  style={style.image}

/>

Propiedades importantes de Image:

  • source: Fuente de la imagen (requiere uri o require())

  • style: Dimensiones y estilos

  • resizeMode: Cómo redimensionar ('cover', 'contain', 'stretch', 'repeat', 'center')

  • onLoad: Función cuando la imagen carga

  • onError: Función si hay error cargando

📝 Paso 4: Componente TextInput

El componente TextInput permite la entrada de texto del usuario.

Profile.tsx completo:

tsx

import React, { useState } from 'react';

import {

  View,

  Text,

  Image,

  TextInput,

  StyleSheet,

  TextStyle,

  ViewStyle,

  ImageStyle

} from 'react-native';


export const Profile = () => {

  const [name, setName] = useState('');


  return (

    <View style={style.mainContainer}>

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

      

      <Image

        source={{

          uri: 'https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png'

        }}

        style={style.image}

      />

      

      <TextInput

        style={style.textInput}

        placeholder="Ingresa tu nombre"

        value={name}

        onChangeText={setName}

      />

      

      {name ? (

        <Text style={style.greeting}>¡Hola, {name}!</Text>

      ) : null}

    </View>

  );

};


const style = StyleSheet.create({

  mainContainer: {

    flex: 1,

    backgroundColor: 'white',

    alignItems: 'center',

    paddingHorizontal: 16,

    paddingVertical: 18,

  } as ViewStyle,

  

  title: {

    fontSize: 28,

    textTransform: 'uppercase',

    marginBottom: 20,

  } as TextStyle,

  

  image: {

    width: 100,

    height: 100,

    borderRadius: 50,

    marginBottom: 30,

  } as ImageStyle,

  

  textInput: {

    width: '100%',

    height: 50,

    borderWidth: 1,

    borderColor: '#ccc',

    borderRadius: 8,

    paddingHorizontal: 12,

    fontSize: 16,

    marginBottom: 20,

  } as TextStyle,

  

  greeting: {

    fontSize: 18,

    color: '#333',

    marginTop: 10,

  } as TextStyle,

});

Propiedades importantes de TextInput:

  • value: Valor actual del campo

  • onChangeText: Función que se ejecuta al cambiar el texto

  • placeholder: Texto de ejemplo cuando está vacío

  • secureTextEntry: Oculta texto (para contraseñas)

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

  • autoCapitalize: Capitalización automática ('none', 'sentences', 'words', 'characters')

  • multiline: Permite múltiples líneas

  • editable: Si se puede editar o es solo lectura

🎨 Mejoras de Estilo

1. Mejorando el TextInput:

tsx

<TextInput

  style={style.textInput}

  placeholder="Ingresa tu nombre"

  placeholderTextColor="#999"

  value={name}

  onChangeText={setName}

  autoCorrect={false}

  autoCapitalize="words"

/>

2. Agregando más campos:

tsx

const [email, setEmail] = useState('');

const [bio, setBio] = useState('');


// En el return:

<TextInput

  style={style.textInput}

  placeholder="Correo electrónico"

  value={email}

  onChangeText={setEmail}

  keyboardType="email-address"

  autoCapitalize="none"

/>


<TextInput

  style={[style.textInput, style.multilineInput]}

  placeholder="Biografía"

  value={bio}

  onChangeText={setBio}

  multiline={true}

  numberOfLines={4}

/>

3. Estilos adicionales:

tsx

const style = StyleSheet.create({

  multilineInput: {

    height: 100,

    textAlignVertical: 'top',  // Importante para Android

  },

  

  label: {

    alignSelf: 'flex-start',

    fontSize: 16,

    fontWeight: '600',

    marginBottom: 8,

    color: '#333',

  },

});

⚡ Consejos y Buenas Prácticas

1. Para Text:

  • Usa Text dentro de Text para estilos diferentes en una misma línea

  • Utiliza numberOfLines y ellipsizeMode para textos largos

  • Considera la accesibilidad con accessible y accessibilityLabel

2. Para Image:

  • Siempre especifica width y height

  • Para imágenes remotas, maneja estados de carga y error

  • Usa resizeMode="contain" para mantener proporciones

  • Considera usar FastImage para mejor rendimiento con muchas imágenes

3. Para TextInput:

  • Maneja el estado con useState

  • Usa onSubmitEditing para acciones al presionar "enter"

  • Considera blurOnSubmit para comportamiento en formularios

  • Para formularios complejos, considera librerías como Formik o React Hook Form

🎓 Resumen

Componente

Propósito

Uso Común

Text

Mostrar texto

Títulos, párrafos, etiquetas

Image

Mostrar imágenes

Perfiles, iconos, fondos

TextInput

Entrada de texto

Formularios, búsquedas, comentarios

Características clave aprendidas:

  1. Text: Estilos tipográficos, transformaciones de texto

  2. Image: Carga desde URL y local, redimensionamiento

  3. TextInput: Manejo de estado, tipos de teclado, placeholders

  4. Estilos: Alineación, espaciado, bordes redondeados

📚 Próximos Pasos

Ahora que dominas los componentes básicos, puedes:

  1. Crear formularios completos con validación

  2. Implementar galerías de imágenes

  3. Crear interfaces de chat con TextInput

  4. Practicar combinando estos componentes con ScrollView y FlatList

¡Sigue practicando y experimentando con diferentes propiedades y estilos!

Comentarios

Publicar un comentario

Entradas más populares de este blog

Guía Paso a Paso para Entender React Native (antes del Tutorial)

  1. 📱 ¿Qué es React Native? React Native es un  framework para crear aplicaciones móviles nativas  usando  JavaScript y React . A diferencia de las apps web, genera componentes nativos reales (no WebViews). Comparación con React Web: React Web React Native <div> <View> <span> ,  <p> <Text> <input> <TextInput> onClick onPress CSS StyleSheet (JavaScript) 2. 🎯 Prerrequisitos Básicos A) Conocimientos previos necesarios: ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator) ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!) Componentes Props (propiedades) ✅ Hooks (useState, useEffect) B) Si NO sabes React, necesitas esto primero: javascript // 1. Componente funcional function MiComponente ( ) { return < View > Hola Mundo < / View > ; } // 2. Props (propiedades que recibe un componente) function Saludo ( props ) { return < Text > Hola { props . nombre } ...
Leer más

Tutorial: Aplicación React Native para Agregar Tareas - Minimalista

  Voy a crear una aplicación React Native simple que permite agregar tareas a una lista usando un formulario con un solo input. Será minimalista y bien explicado paso a paso. Estructura del Proyecto text react-native-todo-app/ ├── src/ │ ├── components/ │ │ ├── TaskForm.js │ │ └── TaskList.js │ └── App.js ├── package.json └── README.md Paso a Paso 1. Crear el proyecto React Native bash npx react-native init ReactNativeTodoApp cd ReactNativeTodoApp 2. Crear el componente App.js jsx import React , { useState } from 'react' ; import { View , Text , StyleSheet , SafeAreaView } from 'react-native' ; import TaskForm from './src/components/TaskForm' ; import TaskList from './src/components/TaskList' ; function App ( ) { // Estado para almacenar la lista de tareas const [ tasks , setTasks ] = useState ( [ ] ) ; // Función para agregar una nueva tarea const addTask = ( taskText ) => { // Crear un o...
Leer más

5. Vista Rapida: Estructura Projecto Base

  Tutorial: Reproducir la Estructura de un Proyecto Base de React Native En este tutorial aprenderás a crear y entender la estructura básica de un proyecto en React Native, utilizando la imagen adjunta como referencia y los conceptos proporcionados. 🎯 Objetivo del Tutorial Reproducir la estructura básica de un proyecto React Native y comprender la función de cada carpeta y archivo esencial. 📁 Estructura de Carpetas y Archivos (Basada en la Imagen) text tu-proyecto/ │ ├── .bundle/ ├── .yscode/ ├── android/          # Código nativo para Android ├── ios/              # Código nativo para iOS ├── node_modules/     # Dependencias externas instaladas ├── src/              # Código fuente principal de la app ├── vendor/ │ ├── .eslintrc.js      # Configuración de ESLint ├── .gitignore        # Archivos a ignorar por Git ├── .node-version   ...
Leer más