Blog Alphorm Logo de blog informatique spécialisé en technologie et solutions IT
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Ajouter une tâche sur React Native
Agrandisseur de policeAa
Blog AlphormBlog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Search
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Suivez-nous
© Alphorm 2024 - Tous droits réservés
Développement

Ajouter une tâche sur React Native

L'Équipe Alphorm Par L'Équipe Alphorm 9 janvier 2025
Partager
Partager

Vous souhaitez enrichir votre application en ajoutant une fonctionnalité pour gérer les tâches.

Sans cette fonctionnalité, l’expérience utilisateur reste limitée, réduisant l’efficacité de l’application.

Explorez comment intégrer une fonctionnalité d’ajout de tâche dans React Native pour améliorer l’interactivité et la gestion des tâches.

Table de matière
FAQConclusion

Formation Créer une Application Simple avec React Native

Développez votre première application mobile en un rien de temps !

Découvrir cette formation

Dans cette section, nous allons créer une fonction pour ajouter une nouvelle tâche à notre liste. Cette fonctionnalité enrichit l’interactivité de l’application et améliore l’expérience utilisateur. Voici un aperçu visuel pour illustrer cette idée.

Application liste de tâches avec bouton d'ajout

Pour ce faire, nous allons implémenter une fonction dans le fichier index.js et l’intégrer à l’interface utilisateur.

Dans le fichier index.js , ajoutons d’abord la fonction suivante :

				
					
 const handleAddTodo = () => {
setTodos((prevTodos) => [
...prevTodos,
{ text: newToDoText, key: String(nextKey) }
]);
setNewToDoText("");
setNextKey(nextKey + 1);
};

				
			

Cette fonction :

  • Ajoute une nouvelle tâche à la liste existante (todos), en conservant les anciennes tâches.
  • Attribue une clé unique à chaque tâche.
  • Réinitialise le champ de texte pour une nouvelle saisie.

Ensuite nous allons utiliser un champ de saisie (TextInput) et un bouton (Button) pour permettre à l’utilisateur de créer une tâche, voici l’extrait de code qui implémente cette idée.

				
					
 <View>
<TextInput
style={styles.inputMargin}
value={newToDoText}
onChangeText={setNewToDoText}
placeholder="Entrer une nouvelle tâche"
/>
<Button title="Ajouter" onPress={handleAddTodo} />
</View>

				
			

Donc voici au final le contenu du fichier index.js :

				
					
 import React, { useState } from "react";
import { Text, View, StyleSheet,TextInput,Button } from "react-native";
import ToDoList from "@/components/toDoList";
export default function Index() {
// State for todos
const [todos, setTodos] = useState([
{ text: "Apprendre le React Native", key: '1' },
{ text: "Construire ma première application ToDoList", key: '2' }
]);
const [newToDoText,setNewToDoText] = useState('');
const [nextkey,setNextkey] = useState(3);
// Function to modify a specific todo by key
const modifierToDos = (key) => {
setTodos((prevTodos) => {
const todosUpdated = prevTodos.map((todo) =>{
if(todo.key === key){
return {...todo, text:"Texte modifié"};
}
return todo;
})

return todosUpdated;
});
};
const handleAddTodo = ()=>{
setTodos((prevTodos)=>[  ...todos, {text: newToDoText,key:String(nextkey)}],)
setNewToDoText('');
setNextkey(nextkey+1)

}
// Display
return (
<View style={styles.main}>
<Text>Edit app/index.tsx to edit this screen .</Text>
<ToDoList todos={todos} modifierToDos={modifierToDos} />
<View>
<TextInput value={newToDoText} onChangeText={setNewToDoText} placeholder=" Entrer une nouvelle tache"></TextInput>
<Button title="Ajouter"onPress={handleAddTodo}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});

				
			

En lancant l’application avec la commande habituelle : npm run android , nous devrons avoir un resultat comme ceci :

Écran d'ajout de tâche dans React Native

Donc, nous allons ajouter une nouvelle tache nommé : « Nouvelle tache » et cliquer sur le boutton « Ajouter » pour voir le resultat .

Écran application ajout tâche sur mobile

Parfait, la nouvelle tâche s’affiche correctement et tout fonctionne comme prévu. Cette section est désormais terminée.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

Démarrer gratuitement
illustration processus de paiement en ligne avec étapes claires et convivialité

FAQ

Comment ajouter une nouvelle tâche dans React Native?
Pour ajouter une nouvelle tâche dans React Native, nous créons d’abord une fonction ‘handleAddTodo’ dans index.js. Cette fonction utilise setState pour mettre à jour la liste des tâches en ajoutant la nouvelle entrée avec un texte et une clé unique. Ensuite, nous utilisons un champ de saisie TextInput et un bouton Button pour permettre à l’utilisateur d’entrer et de soumettre la tâche. Après la soumission, le champ de saisie est réinitialisé pour une nouvelle entrée.
Pourquoi utiliser une clé unique pour chaque tâche?
L’utilisation d’une clé unique pour chaque tâche dans une application React Native est cruciale pour identifier chaque élément de la liste de manière distincte. Cela permet à React de gérer efficacement la mise à jour et le rendu de la liste des tâches. Une clé unique aide à éviter les conflits lors de l’ajout, la suppression ou la modification des tâches, assurant ainsi une gestion stable et sans erreur de la liste.
Quel est le rôle de TextInput dans l'application?
Dans une application React Native, TextInput joue un rôle essentiel en permettant aux utilisateurs de saisir des données. Dans notre cas, il sert à entrer le texte de la nouvelle tâche à ajouter à la liste. TextInput est intégré avec un état qui capture et met à jour dynamiquement le texte saisi par l’utilisateur, garantissant que l’application réagit en temps réel aux entrées.
Comment s'assurer que la nouvelle tâche est ajoutée correctement?
Pour garantir que la nouvelle tâche est ajoutée correctement dans l’application React Native, nous devons nous assurer que la fonction ‘handleAddTodo’ est correctement implémentée. Elle doit mettre à jour l’état avec la nouvelle tâche en utilisant setState et réinitialiser le champ de saisie. Vérifiez aussi que le bouton ‘Ajouter’ est bien relié à cette fonction. Enfin, tester l’application pour vérifier que chaque nouvelle tâche s’affiche correctement dans la liste.
Comment tester l'application après l'ajout de la fonctionnalité?
Après avoir ajouté la fonctionnalité d’ajout de tâche, testez l’application en l’exécutant avec ‘npm run android’. Ajoutez une nouvelle tâche et vérifiez qu’elle apparaît dans la liste. Assurez-vous que le champ de saisie se réinitialise correctement après chaque ajout. Observez aussi le fonctionnement global de l’application pour détecter toute anomalie potentielle.

Conclusion

La fonctionnalité d’ajout de tâche dans React Native enrichit l’interactivité de votre application. Quel autre aspect de votre application pourriez-vous améliorer pour offrir une meilleure expérience utilisateur?

ÉTIQUETÉ : React Native
Facebook
Twitter
LinkedIn
Email
WhatsApp
Par L'Équipe Alphorm
Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.

Derniers Articles

  • Techniques pour gérer les fichiers texte en C#
  • Créer et lire un fichier CSV avec C#
  • JSON : Comprendre et Utiliser Efficacement
  • Créer une Base SQLite dans C#
  • Lecture des données SQLite simplifiée
Laisser un commentaire Laisser un commentaire

Laisser un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

Blog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Ajouter une tâche sur React Native

© Alphorm - Tous droits réservés