El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió de l'entrada de l'usuari

Següent ►
►

En aquest tema, aprendrem com gestionar l'entrada de l'usuari en una aplicació React Native. Això inclou l'ús de components com TextInput per capturar text, així com la gestió d'esdeveniments per respondre a les accions de l'usuari.

Objectius

  • Comprendre com utilitzar el component TextInput.
  • Aprendre a gestionar esdeveniments d'entrada de l'usuari.
  • Implementar un formulari bàsic amb validació.

Components d'entrada bàsics

TextInput

El component TextInput és utilitzat per capturar text de l'usuari. Aquí tens un exemple bàsic:

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

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

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escriu aquí"
        onChangeText={setText}
        value={text}
      />
      <Text style={styles.text}>Has escrit: {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 UserInputExample;

Explicació del codi

  1. Importacions: Importem els components necessaris de React i React Native.
  2. useState: Utilitzem el hook useState per gestionar l'estat del text introduït.
  3. TextInput: El component TextInput té diverses propietats:
    • style: Defineix l'estil del component.
    • placeholder: Mostra un text per defecte quan el camp està buit.
    • onChangeText: Funció que s'executa cada vegada que el text canvia.
    • value: L'estat actual del text.
  4. Text: Mostra el text introduït per l'usuari.

Gestió d'esdeveniments

Exemple amb botó

Podem combinar TextInput amb un botó per gestionar l'entrada de l'usuari. Aquí tens un exemple:

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

const UserInputWithButton = () => {
  const [text, setText] = useState('');
  const [submittedText, setSubmittedText] = useState('');

  const handlePress = () => {
    setSubmittedText(text);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escriu aquí"
        onChangeText={setText}
        value={text}
      />
      <Button title="Enviar" onPress={handlePress} />
      <Text style={styles.text}>Text enviat: {submittedText}</Text>
    </View>
  );
};

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

export default UserInputWithButton;

Explicació del codi

  1. useState: Utilitzem dos estats, un per al text actual (text) i un altre per al text enviat (submittedText).
  2. handlePress: Funció que s'executa quan es prem el botó, actualitzant l'estat submittedText amb el valor de text.
  3. Button: Component que permet a l'usuari enviar el text.

Exercici pràctic

Objectiu

Crear un formulari simple que capturi el nom i l'edat de l'usuari i mostri un missatge de benvinguda.

Instruccions

  1. Crea un nou component anomenat UserForm.
  2. Utilitza dos TextInput per capturar el nom i l'edat.
  3. Afegeix un botó per enviar el formulari.
  4. Mostra un missatge de benvinguda amb el nom i l'edat de l'usuari quan es prem el botó.

Solució

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

const UserForm = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = () => {
    setMessage(`Benvingut/da, ${name}! Tens ${age} anys.`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Nom"
        onChangeText={setName}
        value={name}
      />
      <TextInput
        style={styles.input}
        placeholder="Edat"
        onChangeText={setAge}
        value={age}
        keyboardType="numeric"
      />
      <Button title="Enviar" onPress={handleSubmit} />
      {message ? <Text style={styles.text}>{message}</Text> : null}
    </View>
  );
};

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

export default UserForm;

Explicació del codi

  1. Estats: Utilitzem tres estats: name, age i message.
  2. TextInput: Dos camps d'entrada per capturar el nom i l'edat. El camp d'edat utilitza keyboardType="numeric" per mostrar un teclat numèric.
  3. handleSubmit: Funció que s'executa quan es prem el botó, actualitzant l'estat message amb un missatge de benvinguda.
  4. Renderització condicional: Mostrem el missatge de benvinguda només si message no és buit.

Conclusió

En aquesta secció, hem après com gestionar l'entrada de l'usuari en una aplicació React Native utilitzant el component TextInput i gestionant esdeveniments amb botons. Hem creat un formulari bàsic amb validació i hem vist com mostrar missatges dinàmics basats en l'entrada de l'usuari. A la següent secció, explorarem com utilitzar ScrollView i ListView per gestionar contingut llarg i llistes.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats