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

Gestió d'esdeveniments

Següent ►
►

En aquest tema, aprendrem com gestionar esdeveniments en React Native. Els esdeveniments són accions o successos que tenen lloc en l'aplicació, com ara clics de botons, canvis en els camps de text, desplaçaments, etc. React Native proporciona una manera senzilla i eficient de gestionar aquests esdeveniments.

Conceptes clau

  1. Esdeveniments en React Native: Els esdeveniments són accions que l'usuari realitza en l'aplicació, com ara tocar un botó o escriure en un camp de text.
  2. Gestors d'esdeveniments: Funcions que s'executen en resposta a un esdeveniment.
  3. Sintaxi de gestors d'esdeveniments: Com assignar gestors d'esdeveniments als components.

Exemples pràctics

Exemple 1: Gestió d'un esdeveniment de clic en un botó

import React from 'react';
import { View, Button, Alert } from 'react-native';

const App = () => {
  const handleButtonClick = () => {
    Alert.alert('Botó clicat!', 'Has clicat el botó.');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Clica'm" onPress={handleButtonClick} />
    </View>
  );
};

export default App;

Explicació:

  • Importem els components necessaris de react-native.
  • Definim una funció handleButtonClick que es crida quan es clica el botó.
  • Utilitzem el component Button i assignem la funció handleButtonClick a la propietat onPress.

Exemple 2: Gestió d'un esdeveniment de canvi en un TextInput

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

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

  const handleTextChange = (newText) => {
    setText(newText);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        placeholder="Escriu aquí"
        onChangeText={handleTextChange}
        value={text}
      />
      <Text style={{ padding: 10, fontSize: 42 }}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
};

export default App;

Explicació:

  • Utilitzem el hook useState per gestionar l'estat del text.
  • Definim una funció handleTextChange que actualitza l'estat del text.
  • Utilitzem el component TextInput i assignem la funció handleTextChange a la propietat onChangeText.

Exercicis pràctics

Exercici 1: Botó que canvia el text

Descripció: Crea una aplicació que mostri un text i un botó. Quan es clica el botó, el text ha de canviar.

Solució:

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

const App = () => {
  const [text, setText] = useState('Text inicial');

  const handleButtonClick = () => {
    setText('Text canviat!');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 20 }}>{text}</Text>
      <Button title="Canvia el text" onPress={handleButtonClick} />
    </View>
  );
};

export default App;

Exercici 2: TextInput que mostra el text en temps real

Descripció: Crea una aplicació amb un TextInput i un Text. El Text ha de mostrar el contingut del TextInput en temps real.

Solució:

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

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

  const handleTextChange = (newText) => {
    setText(newText);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        placeholder="Escriu aquí"
        onChangeText={handleTextChange}
        value={text}
      />
      <Text style={{ padding: 10, fontSize: 24 }}>{text}</Text>
    </View>
  );
};

export default App;

Errors comuns i consells

  1. No assignar correctament el gestor d'esdeveniments: Assegura't que la funció del gestor d'esdeveniments estigui assignada correctament a la propietat de l'esdeveniment (per exemple, onPress per a botons).
  2. No actualitzar l'estat correctament: Quan utilitzis useState, assegura't que estàs actualitzant l'estat correctament dins del gestor d'esdeveniments.
  3. Oblidar passar la funció com a referència: No cridis la funció directament en la propietat de l'esdeveniment (per exemple, onPress={handleButtonClick()}), sinó passa la referència de la funció (per exemple, onPress={handleButtonClick}).

Conclusió

En aquesta secció, hem après com gestionar esdeveniments en React Native. Hem vist exemples pràctics de com gestionar esdeveniments de clic en botons i canvis en camps de text. També hem practicat amb exercicis per reforçar els conceptes apresos. Ara estem preparats per avançar cap a la renderització condicional en el següent tema.

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