El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Manejo de Entrada del Usuario

Siguiente ►
►

En esta lección, aprenderemos cómo manejar la entrada del usuario en React Native. Esto incluye el uso de componentes como TextInput y la gestión de eventos para capturar y procesar la información ingresada por el usuario.

Contenidos

  1. Introducción a TextInput
  2. Captura de Eventos de Entrada
  3. Validación de Entrada
  4. Ejemplo Práctico
  5. Ejercicio Práctico

  1. Introducción a TextInput

TextInput es un componente básico en React Native que permite a los usuarios ingresar texto. Es similar a un campo de entrada en HTML.

Ejemplo Básico de TextInput

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

const TextInputExample = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escribe aquí..."
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={styles.text}>Has escrito: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default TextInputExample;

Explicación del Código

  • Importaciones: Importamos los módulos necesarios de React y React Native.
  • Estado: Usamos el hook useState para manejar el estado del texto ingresado.
  • TextInput: El componente TextInput tiene varias propiedades importantes:
    • style: Define el estilo del componente.
    • placeholder: Muestra un texto de marcador de posición cuando el campo está vacío.
    • onChangeText: Función que se llama cada vez que el texto cambia.
    • defaultValue: Valor inicial del campo de texto.
  • Text: Muestra el texto ingresado por el usuario.

  1. Captura de Eventos de Entrada

Además de onChangeText, TextInput tiene otros eventos útiles:

  • onFocus: Se llama cuando el campo de texto gana el foco.
  • onBlur: Se llama cuando el campo de texto pierde el foco.
  • onSubmitEditing: Se llama cuando el usuario presiona el botón de enviar en el teclado.

Ejemplo de Captura de Eventos

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

const TextInputEventsExample = () => {
  const [text, setText] = useState('');
  const [message, setMessage] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escribe aquí..."
        onChangeText={newText => setText(newText)}
        onFocus={() => setMessage('El campo de texto tiene el foco')}
        onBlur={() => setMessage('El campo de texto ha perdido el foco')}
        onSubmitEditing={() => setMessage('El usuario ha enviado el texto')}
        defaultValue={text}
      />
      <Text style={styles.text}>Has escrito: {text}</Text>
      <Text style={styles.message}>{message}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
  message: {
    fontSize: 16,
    color: 'blue',
  },
});

export default TextInputEventsExample;

  1. Validación de Entrada

La validación de entrada es crucial para asegurar que los datos ingresados por el usuario sean correctos y útiles. Podemos realizar validaciones simples directamente en el evento onChangeText.

Ejemplo de Validación de Entrada

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

const TextInputValidationExample = () => {
  const [text, setText] = useState('');
  const [error, setError] = useState('');

  const handleTextChange = (newText) => {
    if (newText.length > 10) {
      setError('El texto no puede tener más de 10 caracteres');
    } else {
      setError('');
    }
    setText(newText);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escribe aquí..."
        onChangeText={handleTextChange}
        defaultValue={text}
      />
      {error ? <Text style={styles.error}>{error}</Text> : null}
      <Text style={styles.text}>Has escrito: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
  error: {
    color: 'red',
  },
});

export default TextInputValidationExample;

  1. Ejemplo Práctico

Vamos a combinar todo lo aprendido en un ejemplo práctico donde el usuario puede ingresar su nombre y edad, y validaremos que la edad sea un número.

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet, Button, Alert } from 'react-native';

const UserInputExample = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (!name || !age) {
      setError('Por favor, completa todos los campos');
      return;
    }
    if (isNaN(age)) {
      setError('La edad debe ser un número');
      return;
    }
    setError('');
    Alert.alert('Datos Enviados', `Nombre: ${name}, Edad: ${age}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Nombre"
        onChangeText={setName}
        defaultValue={name}
      />
      <TextInput
        style={styles.input}
        placeholder="Edad"
        onChangeText={setAge}
        defaultValue={age}
        keyboardType="numeric"
      />
      {error ? <Text style={styles.error}>{error}</Text> : null}
      <Button title="Enviar" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  error: {
    color: 'red',
    marginBottom: 10,
  },
});

export default UserInputExample;

  1. Ejercicio Práctico

Ejercicio

Crea una aplicación que permita al usuario ingresar su correo electrónico y contraseña. Valida que el correo electrónico tenga un formato válido y que la contraseña tenga al menos 6 caracteres. Muestra un mensaje de error si alguna de las validaciones falla.

Solución

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet, Button, Alert } from 'react-native';

const EmailPasswordInput = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const validateEmail = (email) => {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
  };

  const handleSubmit = () => {
    if (!email || !password) {
      setError('Por favor, completa todos los campos');
      return;
    }
    if (!validateEmail(email)) {
      setError('El correo electrónico no es válido');
      return;
    }
    if (password.length < 6) {
      setError('La contraseña debe tener al menos 6 caracteres');
      return;
    }
    setError('');
    Alert.alert('Datos Enviados', `Correo: ${email}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Correo Electrónico"
        onChangeText={setEmail}
        defaultValue={email}
        keyboardType="email-address"
      />
      <TextInput
        style={styles.input}
        placeholder="Contraseña"
        onChangeText={setPassword}
        defaultValue={password}
        secureTextEntry
      />
      {error ? <Text style={styles.error}>{error}</Text> : null}
      <Button title="Enviar" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  error: {
    color: 'red',
    marginBottom: 10,
  },
});

export default EmailPasswordInput;

Conclusión

En esta lección, hemos aprendido cómo manejar la entrada del usuario en React Native utilizando el componente TextInput. Hemos cubierto cómo capturar eventos de entrada, realizar validaciones y crear ejemplos prácticos. Estos conceptos son fundamentales para crear aplicaciones interactivas y receptivas. En la próxima lección, exploraremos cómo manejar el desplazamiento y las listas en React Native.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados