C'est l'heure du défi !

Maintenant que vous avez couvert divers sujets et que vous êtes familiarisé avec la syntaxe et les composants de React Native, il est temps de mettre vos compétences à l'épreuve avec un défi. Vous êtes encouragé à réaliser ce défi à partir de zéro, en commençant par initialiser une nouvelle application React Native et en terminant par la mise en œuvre de sa fonctionnalité complète.

Vous disposerez de :

• Tâche : L'objectif spécifique du défi ;

• Étapes : Instructions détaillées sur la façon de réaliser le défi ;

• Solution Possible : Puisque vous êtes invité à relever ce défi par vous-même, vous pouvez utiliser ce lien pour trouver un dépôt avec une solution possible au défi. Cependant, gardez à l'esprit que ce n'est pas la seule façon de résoudre le problème.

Êtes-vous prêt à relever le défi et à démontrer vos compétences en React Native ? Commençons !

Tâche

Votre tâche est de créer une application React Native simple qui inclut les composants suivants :

1. Composant Interrupteur pour le Basculement Mode Sombre/Clair : Implémentez un composant interrupteur qui bascule entre les modes sombre et clair. L'arrière-plan de l'application entière doit changer en conséquence lorsque l'interrupteur est basculé ;

2. Composant TextInput pour Spécifier la Durée : Incluez un composant TextInput où l'utilisateur peut entrer un nombre représentant la durée (en secondes) pendant laquelle un Indicateur d'Activité doit être affiché ;

3. Indicateur d'Activité : Affichez un composant Indicateur d'Activité pour la durée spécifiée que l'utilisateur a entrée.

Étapes

Étape 1 : Configuration de l'application React Native

1. Créez une nouvelle application React Native en utilisant la commande npx create-expo-app ./ dans le dossier nouvellement créé ;

2. Pour voir l'apparence initiale de votre application, exécutez la commande suivante dans le terminal : npm start.

Étape 2 : Nettoyage

Supprimez le contenu par défaut du fichier App.js et tous les fichiers inutiles.

Étape 3 : Implémentation du basculement entre le mode sombre/clair

1. À l'intérieur de App.js, importez les composants nécessaires de React Native ;

2. Créez un composant fonctionnel nommé App ;

3. Utilisez le hook useState pour gérer l'état du mode sombre (darkMode) et sa fonction de basculement (toggleDarkMode) ;

4. Implémentez un composant Switch pour permettre aux utilisateurs de basculer entre les modes sombre et clair ;

5. Définissez des styles en utilisant StyleSheet.create() pour différencier les modes sombre et clair.

Étape 4 : Ajout de TextInput pour la saisie de la durée

1. Importez le composant TextInput de React Native ;

2. Dans le composant App, créez des variables d'état pour gérer la saisie de la durée (duration) et sa fonction de mise à jour ;

3. Intégrez un composant TextInput où les utilisateurs peuvent saisir la durée souhaitée (en secondes) pour l'indicateur d'activité.

Étape 5 : Incorporation de l'indicateur d'activité

1. Importez le composant ActivityIndicator de React Native ;

2. Créez des variables d'état pour gérer l'état de chargement (isLoading) et sa fonction de mise à jour ;

3. Implémentez une fonction (handleShowActivityIndicator) qui déclenche l'affichage de l'indicateur d'activité pour la durée spécifiée ;

4. Intégrez un composant TouchableOpacity qui, lorsqu'il est pressé, exécute la fonction handleShowActivityIndicator ;

5. Rendre conditionnellement l'indicateur d'activité en fonction de l'état isLoading.

Étape 6 : Test de l'application

1. Vérifiez que le basculement entre les modes sombre/clair fonctionne correctement ;

2. Testez le composant TextInput pour vous assurer qu'il accepte les entrées numériques pour la durée ;

3. Vérifiez que l'indicateur d'activité apparaît et disparaît après la durée spécifiée lorsqu'il est déclenché.

Étape 7 : Améliorations optionnelles

1. Envisagez d'ajouter du style pour améliorer l'apparence visuelle des composants ;

2. Explorez l'incorporation de transitions fluides entre les modes sombre et clair pour une meilleure expérience utilisateur.

Représentation visuelle de la solution possible