L’application actuelle affiche uniquement des tâches statiques, limitant l’interactivité utilisateur.
Cette limitation empêche les utilisateurs de personnaliser ou de modifier les tâches, réduisant l’engagement et la satisfaction globale.
Dans cet article, nous allons explorer comment ajouter une fonctionnalité de modification de tâches dans React Native, rendant l’application plus interactive.
Développez votre première application mobile en un rien de temps !
Nous avons réussi à afficher les tâches dans notre application. Cependant, pour l’instant, le contenu est uniquement statique. Pour permettre à l’utilisateur d’interagir davantage avec l’application, nous allons l’améliorer en ajoutant une fonctionnalité dans le fichier index.js . Cela permettra à l’utilisateur de cliquer sur une tâche pour la modifier directement.
Modifier tâches dans React Native
Voyons maintenant la modification dans notre programme pour implémenter la fonction qui nous permet d’interagir avec l’application.
import React, { useState } from "react";
import { Text, View, StyleSheet } 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' }
]);
// 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;
});
};
// Display
return (
<View style={styles.main}>
<Text>Edit app/index.tsx to edit this screen .</Text>
<ToDoList todos={todos} modifierToDos={modifierToDos} />
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
Nous avons ajouté cet extrait de code :
const modifierToDos = (key) => {
setTodos((prevTodos) => {
const todosUpdated = prevTodos.map((todo) =>{
if(todo.key === key){
return {...todo, text:"Texte modifié"};
}
return todo;
})
return todosUpdated;
});
};
La fonction modifierToDos est utilisée pour mettre à jour une tâche spécifique dans la liste des tâches ( todos ). Elle prend un paramètre key , qui représente l’identifiant de la tâche à modifier.
- setTodos est appelé pour mettre à jour l’état todos .
- Dans setTodos , on utilise map pour parcourir toutes les tâches actuelles ( prevTodos ).
- Pour chaque tâche, si sa key correspond à celle fournie en argument, le texte de cette tâche est modifié en » Texte modifié « .
- La fonction renvoie la liste todosUpdated , où seule la tâche sélectionnée a été modifiée, tandis que les autres restent inchangées.
Donc, nous allons passer cette fonction pour l’appliquer dans le composant toDoItem.js . Cette logique est implémenté avec cet extrait de code :
<ToDoList todos={todos} modifierToDos={modifierToDos} />
Et par la suite nous devons modifier nos composants enfants toDoList et toDoItem :
Pour le composant toDoList.js, voilà la modification :
import React from "react";
import { View, StyleSheet } from "react-native";
import ToDoItem from "@/components/toDoItem";
const ToDoList = ({ todos, modifierToDos }) => {
return (
<View style={styles.list}>
{todos.map((todo) => (
<ToDoItem item={todo} key={todo.key} modifierToDos={modifierToDos} />
))}
</View>
);$
};
const styles = StyleSheet.create({
list: {
marginTop: 20,
},
});
export default ToDoList;
Nous avons ajouté la fonction modifierToDos dans les props et l’avons déstructurée dans le retour de la méthode map . Ce props sera ensuite transféré au composant toDoItem pour être appliqué aux tâches. Autrement dit, lorsque l’utilisateur clique sur une tâche, la fonction sera appelée et effectuera les changements nécessaires sur la tâche cible.
Voici comment cela est implémenté dans le composant :
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const ToDoItem = ({ item, modifierToDos }) => {
return (
<TouchableOpacity style={styles.item} onPress={() => modifierToDos(item.key)}>
<Text>{item.text}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
item: {
padding: 10,
marginVertical: 8,
marginHorizontal: 16,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
});
export default ToDoItem;
Interactivité avec tâches et useState
Après avoir terminé l’implémentation de cette fonctionnalité, nous avons obtenu le résultat suivant, confirmant que tout fonctionne correctement après avoir lancé l’application avec la commande habituelle : npm run android .
Félicitations ! Tout fonctionne parfaitement jusqu’à présent, car toutes les tâches sont affichées correctement. Le client peut désormais interagir avec l’application en cliquant sur une tâche, qui pourra être modifiée par la suite.
Super, nous avons terminé cette partie avec succés.
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.
FAQ
Comment modifier les tâches dans React Native ?
Pourquoi utiliser useState dans React Native ?
Comment rendre une tâche cliquable dans React Native ?
Quels sont les avantages d'une application interactive ?
Comment vérifier le bon fonctionnement de l'application ?
Conclusion
En intégrant la modification des tâches dans votre application React Native, vous améliorez considérablement l’interactivité pour l’utilisateur. Quelles autres fonctionnalités souhaitez-vous explorer pour enrichir encore plus votre application mobile ?
