One place for hosting & domains

      dans

      Comment indexer et couper des chaînes dans Python 3


      Introduction

      Le type de données de chaîne Python est une séquence composée d’un ou de plusieurs caractères individuels et constituée de lettres, de chiffres, de caractères d’espacement ou de symboles. Puisqu’une chaîne est une séquence, vous pouvez y accéder de la même manière que pour les autres types de données basés sur des séquences, via l’indexation et le découpage en tranches.

      Ce tutoriel vous montrera de quelle manière accéder aux chaînes via l’indexation, les découper en séquences de caractères et passer en revue certaines méthodes de comptage et de localisation de caractères.

      De quelle manière sont indexées les chaînes

      Comme les éléments des list data type correspondent à un numéro d’index, chacun des caractères d’une chaîne correspondent également à un numéro d’index, en commençant par le numéro d’index 0.

      Pour la chaîne Sammy Shark! la répartition de l’index ressemble à ce qui suit  :

      S a m m y S h a r k !
      0 1 2 3 4 5 6 7 8 9 10 11

      Comme vous pouvez le voir, le premier S commence à l’index 0 et la chaîne se termine à l’index 11 avec le symbole ! .

      Nous pouvons également remarquer que le caractère d’espacement entre Sammy et Shark correspond aussi à un numéro d’index qui lui est propre. Dans ce cas, le numéro d’index associé à l’espace est 5.

      Le point d’exclamation (!) est également associé à un numéro d’index. Tous les autres symboles ou signes de ponctuation, comme *#$&. ;?, sont aussi considérés comme des caractères et seraient associés à leur propre numéro d’index.

      Le fait qu’à chaque caractère d’une chaîne Python correspond un numéro d’index, nous pouvons accéder aux chaînes et les manipuler de la même manière que nous le ferions avec d’autres types de données séquentielles.

      Accéder aux caractères avec un numéro d’index positif

      En référençant les numéros d’index, nous pouvons isoler l’un des caractères d’une chaîne. Pour cela, nous devons mettre les numéros entre crochets. Déclarons une chaîne, imprimons-la et appelons le numéro d’index entre crochets :

      ss = "Sammy Shark!"
      print(ss[4])
      

      Output

      y

      Lorsque nous faisons référence à un numéro d’index particulier d’une chaîne, Python renvoie le caractère qui se trouve dans cette position. Étant donné que la lettre y est au numéro d’index 4 de la chaîne ss = "Sammy Shark!", lorsque nous imprimons ss[4], nous recevons la sortie y comme la sortie.“”

      Les numéros d’index nous permettent d’accéder à des caractères spécifiques dans une chaîne.

      Accéder aux caractères par numéro d’index négatif

      Si nous souhaitons localiser un élément vers la fin d’une longue chaîne, nous pouvons également compter à rebours à partir de la fin de la chaîne, en commençant par le numéro d’index -1.

      Pour la même chaîne Sammy Shark! la ventilation de l’index négatif ressemble à ce qui suit :

      S a m m y S h a r k !
      -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1

      En utilisant des numéros d’index négatifs, nous pouvons imprimer le caractère r, en nous référant à sa position à l’index -3, comme ceci :

      print(ss[-3])
      

      Output

      r

      L’utilisation de numéros d’index négatifs peut être avantageuse pour isoler un caractère unique qui se trouve vers la fin d’une longue chaîne.

      Découper des chaînes

      Nous pouvons également appeler une plage de caractères de la chaîne. Disons que nous souhaitons juste imprimer le mot Shark. Nous pouvons le faire en créant une slice, qui est une séquence de caractères dans une chaîne d’origine. Avec les slices, nous pouvons appeler plusieurs valeurs de caractères en créant une plage de numéros d’index séparés par deux points [x:y] :

      print(ss[6:11])
      

      Output

      Shark

      Lorsque vous créez une slice, comme dans [6:11], le premier numéro d’index correspond à l’endroit où la slice commence (inclusive), le second numéro d’index correspond à l’endroit où la slice se termine (exclusive). C’est pour cette raison que dans notre exemple ci-dessus, la plage doit correspondre au numéro d’index qui se trouve juste après la fin de la chaîne.

      Lorsque nous découpons des chaînes, nous créons une substring, qui est en réalité une chaîne qui existe dans une autre. Lorsque nous appelons ss[6:11], nous appelons la sous-chaîne Shark qui existe dans la chaîne Sammy Shark!

      Si nous souhaitons inclure l’une des extrémités d’une chaîne, nous pouvons omettre l’un des numéros dans la syntaxe suivante : string [n:n]. Par exemple, pour imprimer le premier mot de la chaîne ss – « Sammy » – nous pouvons saisir :

      print(ss[:5])
      

      Output

      Sammy

      Nous avons procédé à cette opération en omettant le numéro d’index avant les deux points dans la syntaxe de slice et en incluant uniquement le numéro d’index qui se trouve après. Ce dernier fait référence à la fin de la sous-chaîne.

      Pour imprimer une sous-chaîne qui commence au milieu d’une chaîne et continue jusqu’à à la fin, nous devons inclure uniquement le numéro d’index avant les deux points :

      print(ss[7:])
      

      Output

      hark!

      En incluant uniquement le numéro d’index avant les deux points et en laissant le second numéro d’index hors de la syntaxe, la sous-chaîne ira du caractère qui correspond au numéro d’index appelé à la fin de la chaîne.

      Vous pouvez également utiliser des numéros d’index négatifs pour découper une chaîne. Comme nous l’avons vu auparavant, les index négatifs d’une chaîne par commencent par -1. Ensuite, comptez à partir de ce chiffre jusqu’à atteindre le début de la chaîne. Lorsque nous utilisons des numéros d’index négatifs, nous devons tout d’abord commencer par l’endroit où le plus petit chiffre se trouve plus tôt dans la chaîne.

      Utilisons deux numéros d’index négatifs pour découper la chaîne ss :

      print(ss[-4:-1])
      

      Output

      ark

      La sous-chaîne « ark » est imprimée à partir de la chaîne « Sammy Shark! » car le caractère « a » se trouve à la position du numéro d’index -4, et le caractère « k » se trouve juste avant la position du numéro d’index -1.

      Spécifier une stride lors du découpage des chaînes

      En plus des deux numéros d’index, le découpage de chaîne peut accepter un troisième paramètre. Le troisième paramètre spécifie la stride, qui renvoie à la quantité de caractères à passer une fois que le premier caractère est récupéré à partir de la chaîne. Jusqu’à présent, nous avons omis le paramètre stride. Python utilise la stride 1 par défaut afin que chaque caractère entre deux numéros d’index soit bien récupéré.

      Examinons à nouveau l’exemple ci-dessus dans lequel la sous-chaîne « Shark » est imprimée :

      print(ss[6:11])
      

      Output

      Shark

      Nous pouvons obtenir les mêmes résultats en incluant un troisième paramètre avec une stride de 1 :

      print(ss[6:11:1])
      

      Output

      Shark

      Ainsi, avec une stride de 1, chaque caractère qui se trouve entre deux numéros d’index d’une slice sera récupéré. Si nous omettons le paramètre stride, Python utilisera la valeur de 1 par défaut.

      Si, au lieu de cela, nous augmentons la stride, nous verrons que les caractères sont ignorés :

      print(ss[0:12:2])
      

      Output

      SmySak

      En spécifiant la stride de 2 comme dans le dernier paramètre de la syntaxe ss[0:12:2], Python ignore tout autre caractère. Examinons les caractères imprimés en rouge :

      Sammy Shark!

      Notez que, si vous spécifiez une stride de 2, le caractère d’espacement de l’index numéro 5 est également ignoré.

      Si nous utilisons un numéro plus grand pour notre paramètre stride, la sous-chaîne que nous obtiendrons sera significativement plus petite :

      print(ss[0:12:4])
      

      Output

      Sya

      En utilisant la stride de 4 pour le dernier paramètre de la syntaxe ss[0:12:4], Python imprime uniquement tous les quatre caractères. Encore une fois, examinons les caractères imprimés en rouge :

      Sammy Shark!

      Dans cet exemple, le caractère d’espacement est également ignoré.

      Étant donné que nous imprimons l’ensemble de la chaîne, dans la syntaxe, nous pouvons omettre les deux numéros d’index et conserver les deux points pour obtenir le même résultat :

      print(ss[::4])
      

      Output

      Sya

      En omettant les deux numéros d’index et en conservant les deux points, l’ensemble de la chaîne restera dans la plage. Dans le même temps, en ajoutant un paramètre final pour la stride, vous spécifierez le nombre de caractères à ignorer.

      En outre, vous pouvez indiquer une valeur numérique négative pour la stride, que nous pouvons utiliser pour imprimer la chaîne d’origine dans le sens inverse si nous configurons la stride sur -1 :

      print(ss[::-1])
      

      Output

      !krahS ymmaS

      L’utilisation des deux points sans spécifier de paramètre vous permettra d’inclure tous les caractères de la chaîne d’origine. Une stride de 1 inclura chaque caractère sans en sauter aucun et en utilisant une valeur négative pour cette stride, vous inverserez l’ordre des caractères.

      Faisons-le à nouveau, mais avec une stride de -2 :

      print(ss[::-2])
      

      Output

      !rh ma

      Dans cet exemple, ss[::-2], nous traitons l’intégralité de la chaîne d’origine, car aucun numéro d’index n’est inclus dans les paramètres et nous inversons la chaîne à l’aide d’une stride négative. En outre, en utilisant une stride de -2, nous ignorons toutes les autres lettres de la chaîne inversée :

      ! krahS[espace]ymmaS

      Dans cet exemple, le caractère d’espacement est imprimé.

      Spécifiez le troisième paramètre de la syntaxe de la tranche Python pour indiquer la stride de la sous-chaîne que vous extrayez de la chaîne d’origine.

      Méthodes de comptage

      Bien que nous devions réfléchir pour trouver les numéros d’index pertinents qui correspondent aux caractères dans les chaînes, il vaut la peine d’étudier certaines des méthodes qui permettent de compter les chaînes ou renvoyer les numéros d’index. Cette méthode peut vous être utile pour limiter le nombre de caractères acceptés dans un formulaire que les utilisateurs devront compléter ou pour comparer les chaînes. Comme pour les autres types de données séquentielles, vous pouvez utiliser plusieurs méthodes pour compter les chaînes.

      Nous allons tout d’abord découvrir la méthode len() qui vous permet d’obtenir la longueur de tout type de données qui se trouvent dans une séquence, que ce soit dans l’ordre ou pas et notamment des chaînes, des listes, des tuples et des dictionaries.

      Imprimons la longueur de la chaîne ss :

      print(len(ss))
      

      Output

      12

      La longueur de la chaîne « Sammy Shark! » est de 12 caractères, parmi lesquels se trouvent le caractère d’espacement et le symbole du point d’exclamation.

      Au lieu d’utiliser une variable, nous pouvons également passer une chaîne directement dans la méthode len() :

      print(len("Let's print the length of this string."))
      

      Output

      38

      La méthode len() compte le nombre total de caractères dans une chaîne.

      Si nous souhaitons compter le nombre de fois qu’un caractère particulier ou une séquence de caractères apparaît dans une chaîne, nous pouvons le faire en utilisant la méthode str.count(). Prenons notre chaîne ss = "Sammy Shark!" et comptons le nombre de fois que le caractère « a » apparaît :

      print(ss.count("a"))
      

      Output

      2

      Nous pouvons rechercher un autre caractère :

      print(ss.count("s"))
      

      Output

      0

      Bien que la lettre « S » soit dans la chaîne, n’oubliez surtout pas que chaque caractère est sensible à la casse. Pour rechercher toutes les lettres dans une chaîne quelle que soit la cassse, nous pouvons utiliser la méthode str.lower() afin de tout d’abord convertir la chaîne en minuscules. Vous pouvez en savoir plus sur cette méthode, dans « Introduction aux méthodes de chaîne en Python 3. »

      Essayons str.count() avec une séquence de caractères :

      likes = "Sammy likes to swim in the ocean, likes to spin up servers, and likes to smile."
      print(likes.count("likes"))
      

      Output

      3

      Dans la chaîne likes, la séquence de caractères équivalente à « likes » apparaît 3 fois dans la chaîne d’origine.

      Nous pouvons également trouver la position à laquelle un caractère ou une séquence de caractères se trouve dans une chaîne. Pour cela, nous pouvons utiliser la méthode str.find() et renvoyer la position du caractère en fonction du numéro d’index.

      Nous pouvons vérifier à quel endroit se trouve le premier « m » dans la chaîne ss :

      print(ss.find("m"))
      

      Ouput

      2

      Le premier caractère « m » se trouve à la position de l’index 2 dans la chaîne « Sammy Shark! » Nous pouvons examiner les positions du numéro d’index de la chaîne ss ci-dessus.

      Voyons à quel endroit se trouve la première séquence de caractères « likes » qui se trouve dans la chaîne likes :

      print(likes.find("likes"))
      

      Ouput

      6

      La première instance de la séquence de caractères « likes » commence à la position numéro d’index 6, qui correspond à l’endroit où est positionné le caractère l dans la séquence likes.

      Et que faire pour savoir à quel endroit commence la deuxième séquence de « likes » ? Pour cela, nous devons passer un second paramètre dans la méthode str.find() qui commencera par un numéro d’index spécifique. Donc, au lieu de commencer au début de la chaîne, commençons après l’index numéro 9 :

      print(likes.find("likes", 9))
      

      Output

      34

      Dans ce second exemple qui commence par l’index numéro 9, la première occurrence de la séquence de caractères « likes » commence à l’index numéro 34.

      Nous pouvons également ajouter un troisième paramètre pour spécifier la fin de la plage. Comme pour le découpage, nous pouvons le faire en comptant à rebours, en utilisant un numéro d’index négatif :

      print(likes.find("likes", 40, -6))
      

      Output

      64

      Dans ce dernier exemple, nous recherchons la position de la séquence « likes » entre les numéros d’index 40 et -6. Étant donné que le paramètre final saisi est un numéro négatif, le décompte se fera à partir de la fin de la chaîne d’origine.

      Vous pouvez utiliser les méthodes de chaîne len(), str.count() et str.find() pour déterminer la longueur, le nombre de caractères ou de séquences de caractères ainsi que la position de l’index de caractères ou de séquences de caractères dans les chaînes.

      Conclusion

      En ayant cette capacité d’appeler des numéros d’index spécifiques de chaînes ou une tranche particulière d’une chaîne, nous pouvons travailler avec ce type de données de manière plus flexible. Étant donné que les chaînes, comme les listes et les tuples, sont un type de données basées sur des séquences, vous pouvez y accéder via l’indexation et le découpage.

      Pour continuer à développer vos connaissances sur les chaînes, n’hésitez à en lire davantage sur le formatage des chaînes et les méthodes de chaînes.



      Source link

      Comment traiter les données des requêtes entrantes dans Flask


      Introduction

      Les applications web doivent souvent traiter les données des requêtes entrantes fournies par les utilisateurs. Cette charge utile peut prendre la forme de chaînes de requête, de données de formulaires et d’objets JSON. Flask, comme tout autre framework web, vous permet d’accéder aux données d’une requête.

      Au cours de ce tutoriel, vous allez créer une application Flask avec trois itinéraires qui acceptent soit les chaînes de requête, les données de formulaire ou les objets JSON.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      Ce tutoriel a été vérifié avec Pipenv v2020.11.15, Python v3.9.0 et Flask v1.1.2.

      Créer le projet

      Afin de pouvoir découvrir les différentes façons d’utiliser des requêtes, vous devrez créer une application Flask. Même si l’application donnée en exemple utilise une structure simplifiée pour les fonctions et les itinéraires de visualisation, vous pouvez appliquer tout ce que vous apprendrez au cours de ce tutoriel à toute méthode qui permet d’organiser vos affichages sous forme, par exemple, d’un affichage par catégories, de plans d’action ou d’une extension comme Flask-Via.

      Vous devrez tout d’abord créer un répertoire de projet. Ouvrez votre terminal et exécutez la commande suivante :

      • mkdir flask_request_example

      Ensuite, naviguez vers le nouveau répertoire :

      Ensuite, installez Flask. Ouvrez votre terminal et exécutez la commande suivante :

      La commande pipenv créera un virtualenv pour ce projet, un Pipfile, installera flask et un Pipfile.lock.

      Pour activer le virtualenv du projet, exécutez la commande suivante :

      Pour accéder aux données entrantes dans Flask, vous devez utiliser l'objet request. L'objet request contient toutes les données entrantes de la requête, qui incluent, entre autres, le typemime, le référent, l'adresse IP, les données brutes, la méthode HTTP et les en-têtes.

      Bien que toutes les informations que contient l'objet request soient utiles, pour les besoins de cet article, vous allez vous concentrer sur les données qui sont normalement fournies directement par l'appelant du terminal.

      Pour accéder à l'objet de requête dans Flask, vous devez l'importer à partir de la bibliothèque Flask :

      from flask import request
      

      Vous aurez alors la possibilité de l'utiliser dans l'une de vos fonctions d'affichage.

      Utilisez votre éditeur de code pour créer un fichier app.py. Importez Flask et l'objet request. Configurez également des itinéraires pour query-example, form-example et json-example:

      app.py

      # import main Flask class and request object
      from flask import Flask, request
      
      # create the Flask app
      app = Flask(__name__)
      
      @app.route('/query-example')
      def query_example():
          return 'Query String Example'
      
      @app.route('/form-example')
      def form_example():
          return 'Form Data Example'
      
      @app.route('/json-example')
      def json_example():
          return 'JSON Object Example'
      
      if __name__ == '__main__':
          # run app in debug mode on port 5000
          app.run(debug=True, port=5000)
      

      Ensuite, ouvrez votre terminal et démarrez l'application avec la commande suivante :

      L'application démarrera sur le port 5000. Vous pourrez alors visualiser chaque itinéraire dans votre navigateur en utilisant les liens suivants :

      http://127.0.0.1:5000/query-example (or localhost:5000/query-example)
      http://127.0.0.1:5000/form-example (or localhost:5000/form-example)
      http://127.0.0.1:5000/json-example (or localhost:5000/json-example)
      

      Le code établit trois itinéraires. En visualisant chaque itinéraire, les messages « Requy String Example », « Form Data example » et « JSON Object example » s'afficheront respectivement.

      Utiliser les arguments de requête

      On utilise souvent les arguments URL que vous ajoutez à une chaîne de requête pour transmettre des données à une application web. Alors qu'en navigant sur le Web, vous rencontrerez probablement une chaîne de requête auparavant.

      Une chaîne de requête ressemble à ce qui suit :

      example.com?arg1=value1&arg2=value2
      

      La chaîne de requête commence après le caractère du point d'interrogation (?) :

      example.com?arg1=value1&arg2=value2
      

      Et intègre des paires de valeurs clés séparées par un caractère de perluète (&) :

      example.com?arg1=value1&arg2=value2
      

      Pour chaque pair, la clé est suivie du caractère égal (=), puis de la valeur.

      arg1 : value1
      arg2 : value2
      

      Les chaînes de requête vous seront utiles pour transmettre les données sur lesquelles l'utilisateur n'a pas besoin d'agir. Vous pouvez générer une chaîne de requête quelque part dans votre application et l'ajouter à une URL afin que, lorsqu'un utilisateur soumet une requête, les données soient automatiquement transmises pour elles. Une chaîne de requête peut également être générée par les formulaires qui ont pour méthode GET.

      Ajoutons une chaîne de requête à l'itinéraire query-example. Dans cet exemple hypothétique, vous allez renseigner le nom d'un langage de programmation qui s'affichera à l'écran. Créez une clé de « langage » et une valeur de « Python » :

      http://127.0.0.1:5000/query-example?language=Python
      

      Si vous exécutez l'application et que vous naviguez vers cette URL, vous verrez qu'elle affiche toujours le message « Request String Example ».

      Vous devrez alors programmer la partie qui gère les arguments de la requête. Ce code lira le contenu de la clé language en utilisant soit request.args.get('language') ou request.args['language'].

      En appelant request.args.get('language'), l'exécution de l'application continuera si la clé language n'existe pas dans l'URL. Le cas échéant, la méthode affichira le résultat None.

      En appelant request.args['language'], l'application renverra une erreur 400 si la clé de la langue n'existe pas dans l'URL.

      Lorsque vous travaillez avec des chaînes de requête, nous vous recommandons d'utiliser request.args.get() pour empêcher l'application d'entrer en échec.

      Lisons la clé language et affichons-la comme la sortie.

      Modifiez l'itinéraire query-example dans app.py en utilisant le code suivant :

      app.py

      @app.route('/query-example')
      def query_example():
          # if key doesn't exist, returns None
          language = request.args.get('language')
      
          return '''<h1>The language value is: {}</h1>'''.format(language)
      

      Ensuite, exécutez l'application et naviguez jusqu'à l'URL :

      http://127.0.0.1:5000/query-example?language=Python
      

      Le navigateur devrait afficher le message suivant :

      Output

      The language value is: Python

      L'argument provenant de l'URL est affecté à la variable language et ensuite renvoyé au navigateur.

      Pour ajouter d'autres paramètres de chaîne de requête, vous pouvez ajouter les perluètes et de nouvelles paires clé-valeur à la fin de l'URL. Créez une clé « framework » et une valeur « Flask » :

      http://127.0.0.1:5000/query-example?language=Python&framework=Flask
      

      Et si vous en voulez plus, continuez à ajouter des perluettes et des paires clé-valeur. Créez une clé « website » et une valeur « DigitalOcean » :

      http://127.0.0.1:5000/query-example?language=Python&framework=Flask&website=DigitalOcean
      

      Pour accéder à ces valeurs, vous devrez à nouveau utiliser soit request.args.get() ou request.args[]. Utilisons-les toutes les deux pour voir ce qu'il se passe lorsqu'une clé est manquante. Modifiez l'itinéraire query_example pour attribuer la valeur des résultats à des variables, puis affichez-les :

      @app.route('/query-example')
      def query_example():
          # if key doesn't exist, returns None
          language = request.args.get('language')
      
          # if key doesn't exist, returns a 400, bad request error
          framework = request.args['framework']
      
          # if key doesn't exist, returns None
          website = request.args.get('website')
      
          return '''
                    <h1>The language value is: {}</h1>
                    <h1>The framework value is: {}</h1>
                    <h1>The website value is: {}'''.format(language, framework, website)
      

      Ensuite, exécutez l'application et naviguez jusqu'à l'URL :

      http://127.0.0.1:5000/query-example?language=Python&framework=Flask&website=DigitalOcean
      

      Le navigateur devrait afficher le message suivant :

      Output

      The language value is: Python The framework value is: Flask The website value is: DigitalOcean

      Supprimez la clé language de l'URL :

      http://127.0.0.1:5000/query-example?framework=Flask&website=DigitalOcean
      

      Le navigateur devrait afficher le message suivant accompagné de None si aucune valeur language n'est fournie :

      Output

      The language value is: None The framework value is: Flask The website value is: DigitalOcean

      Supprimez la clé framework de l'URL :

      http://127.0.0.1:5000/query-example?language=Python&website=DigitalOcean
      

      Le navigateur devrait rencontrer une erreur, étant donné qu'il s'attend à trouver une valeur pour framework :

      Output

      werkzeug.exceptions.BadRequestKeyError werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand. KeyError: 'framework'

      Vous comprenez maintenant de quelle manière sont traitées les chaînes de requête. Passons au prochain type de données entrantes.

      Utiliser les données de formulaire

      Les données des formulaires proviennent d'un formulaire qui a été envoyé en tant que requête POST à un itinéraire. Par conséquent, au lieu de voir les données dans l'URL (sauf si le formulaire est soumis avec une requête GET), les données du formulaire seront transmises à l'application en coulisses. Même si vous ne pouvez pas facilement voir les données du formulaire qui sont transmises, votre application est tout de même en capacité de les lire.

      Pour le démontrer, modifiez l'itinéraire form-example dans app.py pour accepter les requêtes à la fois GET et POST. Le formulaire suivant est renvoyé :

      app.py

      # allow both GET and POST requests
      @app.route('/form-example', methods=['GET', 'POST'])
      def form_example():
          return '''
                    <form method="POST">
                        <div><label>Language: <input type="text" name="language"></label></div>
                        <div><label>Framework: <input type="text" name="framework"></label></div>
                        <input type="submit" value="Submit">
                    </form>'''
      

      Ensuite, exécutez l'application et naviguez jusqu'à l'URL :

      http://127.0.0.1:5000/form-example
      

      Le navigateur devrait afficher un formulaire avec deux champs de saisie (un pour language et un pour framework) et un bouton Submit.

      Le plus important à savoir sur ce formulaire, c'est qu'il effectue une requête POST sur le même itinéraire qui a généré le formulaire. Les clés qui seront lues dans l'application proviennent toutes des attributs name qui se trouvent sur nos entrées de formulaire. Dans ce cas, langage et framework correspondent aux noms des entrées. Vous y aurez donc accès dans l'application.

      Dans la fonction d'affichage, vous devrez alors vérifier si la méthode de requête est GET ou POST. S'il s'agit d'une requête GET, vous pouvez afficher le formulaire. Dans le cas contraire, s’il s'agit d'une requête POST, vous devrez alors traiter les données entrantes.

      Modifiez l'itinéraire form-example dans app.py en utilisant le code suivant :

      app.py

      # allow both GET and POST requests
      @app.route('/form-example', methods=['GET', 'POST'])
      def form_example():
          # handle the POST request
          if request.method == 'POST':
              language = request.form.get('language')
              framework = request.form.get('framework')
              return '''
                        <h1>The language value is: {}</h1>
                        <h1>The framework value is: {}</h1>'''.format(language, framework)
      
          # otherwise handle the GET request
          return '''
                 <form method="POST">
                     <div><label>Language: <input type="text" name="language"></label></div>
                     <div><label>Framework: <input type="text" name="framework"></label></div>
                     <input type="submit" value="Submit">
                 </form>'''
      

      Ensuite, exécutez l'application et naviguez jusqu'à l'URL :

      http://127.0.0.1:5000/form-example
      

      Renseignez le champ language avec la valeur Python et le champ framework avec la valeur Flask. Ensuite, appuyez sur Submit.

      Le navigateur devrait afficher le message suivant :

      Output

      The language value is: Python The framework value is: Flask

      Vous comprenez maintenant de quelle manière sont traitées les chaînes de requête. Passons au prochain type de données entrantes.

      Utiliser des données JSON

      Les données JSON sont généralement construites par un processus qui appelle l'itinéraire.

      Voici à quoi ressemble un exemple d'objet JSON :

      {
        "language": "Python",
        "framework": "Flask",
        "website": "Scotch",
        "version_info": {
          "python": "3.9.0",
          "flask": "1.1.2"
        },
        "examples": ["query", "form", "json"],
        "boolean_test": true
      }
      

      Cette structure peut permettre la transmission de données bien plus complexes par opposition aux chaînes de requête et aux données de formulaires. Dans l'exemple, vous voyez des objets JSON imbriqués et un tableau d'éléments. Flask peut gérer ce format de données.

      Modifiez l'itinéraire form-example dans app.py pour accepter les requêtes POST et ignorer les autres requêtes comme GET :

      app.py

      @app.route('/json-example', methods=['POST'])
      def json_example():
          return 'JSON Object Example'
      

      Contrairement au navigateur web qui sert à interroger les chaînes et les données de formulaire, pour les besoins de cet article, afin d'envoyer un objet JSON, vous utiliserez Postman pour envoyer des requêtes personnalisées aux URL.

      Remarque : si vous avez besoin d'aide pour naviguer sur l'interface Postman pour les requêtes, consultez la documentation officielle.

      Dans Postman, ajoutez l'URL et configurez le type sur POST. Sur l'onglet body, changez la valeur sur raw et sélectionnez JSON dans la liste déroulante.

      Ces paramètres sont nécessaires pour permettre à Postman d'envoyer les données JSON correctement. Par conséquent, votre application Flask comprendra qu'elle reçoit JSON :

      POST http://127.0.0.1:5000/json-example
      Body
      raw JSON
      

      Ensuite, copiez l'exemple JSON précédent dans la saisie de texte.

      Envoyez la requête. Vous devriez recevoir la réponse « JSON Object Example ». Il s'agit d'une approche assez étrange, mais il faudra vous y attendre, car il reste encore à écrire le code qui permet de gérer la réponse des données JSON.

      Pour lire les données, vous devez comprendre de quelle manière Flask traduit les données JSON en structures de données Python :

      • Tout ce qui est un objet est converti en un dict. Python {"key" : "value"}, dans JSON cela correspond à somedict['key'] qui renvoie une valeur dans Python.
      • Un tableau dans JSON est converti en une liste dans Python. Étant donné que la syntaxe est la même, voici un exemple de liste : [1,2,3,4,5]
      • Les valeurs entre crochets dans l'objet JSON deviennent des chaînes dans Python.
      • Les valeurs booléennes true et false deviennent True et False dans Python.
      • Enfin, les numéros sans parenthèse se transforment en numéros dans Python.

      Travaillons maintenant sur le code afin de pouvoir lire les données JSON entrantes.

      Tout d'abord, attribuons tout ce qui se trouve dans l'objet JSON à une variable en utilisant request.get_json().

      request.get_json() convertit l'objet JSON en données Python. Attribuons maintenant les données des requêtes entrantes aux variables et renvoyons-les en apportant les modifications suivantes à l'itinéraire json-example :

      app.py

      # GET requests will be blocked
      @app.route('/json-example', methods=['POST'])
      def json_example():
          request_data = request.get_json()
      
          language = request_data['language']
          framework = request_data['framework']
      
          # two keys are needed because of the nested object
          python_version = request_data['version_info']['python']
      
          # an index is needed because of the array
          example = request_data['examples'][0]
      
          boolean_test = request_data['boolean_test']
      
          return '''
                 The language value is: {}
                 The framework value is: {}
                 The Python version is: {}
                 The item at index 0 in the example list is: {}
                 The boolean value is: {}'''.format(language, framework, python_version, example, boolean_test)
      

      Notez de quelle manière vous accédez aux éléments qui ne sont pas au niveau supérieur. ['version']['python'] est utilisé, car vous êtes en train de saisir un objet imbriqué. Et ['example'][0] permet d'accéder à l'index 0 dans le tableau des exemples.

      Si l'objet JSON envoyé avec la requête n'est pas accessible dans votre fonction de visualisation, cela signifie que la requête échouera. Si vous ne souhaitez pas qu'elle échoue en l'absence d'une clé, il vous faudra préalablement vérifier si la clé existe avant d'essayer d'y accéder.

      app.py

      # GET requests will be blocked
      @app.route('/json-example', methods=['POST'])
      def json_example():
          request_data = request.get_json()
      
          language = None
          framework = None
          python_version = None
          example = None
          boolean_test = None
      
          if request_data:
              if 'language' in request_data:
                  language = request_data['language']
      
              if 'framework' in request_data:
                  framework = request_data['framework']
      
              if 'version_info' in request_data:
                  if 'python' in request_data['version_info']:
                      python_version = request_data['version_info']['python']
      
              if 'examples' in request_data:
                  if (type(request_data['examples']) == list) and (len(request_data['examples']) > 0):
                      example = request_data['examples'][0]
      
              if 'boolean_test' in request_data:
                  boolean_test = request_data['boolean_test']
      
          return '''
                 The language value is: {}
                 The framework value is: {}
                 The Python version is: {}
                 The item at index 0 in the example list is: {}
                 The boolean value is: {}'''.format(language, framework, python_version, example, boolean_test)
      

      Exécutez l'application et envoyez l'exemple de requête JSON en utilisant Postman. Dans la réponse, vous obtiendrez la sortie suivante :

      Output

      The language value is: Python The framework value is: Flask The Python version is: 3.9 The item at index 0 in the example list is: query The boolean value is: false

      Désormais, vous comprenez de quelle manière sont manipulés les objets JSON.

      Conclusion

      Au cours de ce tutoriel, vous avez créé une application Flask avec trois itinéraires qui acceptent soit les chaînes de requête, les données de formulaire ou les objets JSON.

      En outre, n'oubliez pas que toutes les approches ont bien pris en compte la problématique récurrente de l'échec normal généré par l'absence d'une clé.

      Avertissement : le nettoyage des entrées des utilisateurs n'a pas été abordé dans cet article. Le nettoyage des entrées des utilisateurs permet de garantir que les données lues par l'application ne génèrent pas la défaillance inattendue d'un élément ou ne contournent pas les mesures de sécurité.

      Si vous souhaitez en savoir plus sur Flask, veuillez consulter notre page thématique Flask dans laquelle vous trouverez des exercices et des projets de programmation.



      Source link

      Comment utiliser le routage avec React Navigation dans React Native


      Introduction

      React Navigation est une bibliothèque populaire pour le routage et la navigation dans une application React Native.

      Cette bibliothèque aide à résoudre le problème de la navigation entre plusieurs écrans et du partage des données entre eux.

      À la fin de ce tutoriel, vous disposerez d’un réseau social rudimentaire. Il affichera le nombre de connexions dont dispose un utilisateur et fournira un moyen de se connecter avec des amis supplémentaires. Vous utiliserez cet exemple d’application pour découvrir comment naviguer dans les écrans d’applications mobiles en utilisant react-navigation.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Remarque : Si vous avez travaillé avec react-navigation auparavant, vous pourriez rencontrer certaines différences. Vous pouvez consulter la documentation pour les guides pour migrer de 3.x et migrer de 4.x.

      Ce tutoriel a été vérifié avec Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 et @react-navigation/stack v5.9.0.

      Étape 1 – Création d’une nouvelle application React Native

      Tout d’abord, créez une nouvelle application React Native en entrant la commande suivante dans votre terminal :

      • npx react-native init MySocialNetwork --version 0.63.2

      Ensuite, naviguez vers le nouveau répertoire :

      Et lancez l'application pour iOS :

      Ou alors, pour Android :

      Note : Si vous rencontrez des problèmes, vous devrez peut-être consulter Résolution de problèmes pour React Native CLI.

      Cela permettra de créer un projet squelette pour vous. Il ne ressemble pas beaucoup à un réseau social pour l'instant. Réglons ça.

      Ouvrez App.js :

      Remplacez le contenu d’App.js avec le code suivant pour afficher un message de bienvenue :

      App.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class App extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Welcome to MySocialNetwork!</Text>
            </View>
          );
        }
      }
      
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
      });
      
      export default App;
      

      Sauvegardez le fichier. Maintenant, lorsque vous exécutez l'application, un Welcome to MySocialNetwork! MySocialNetwork! apparaîtra dans votre simulateur.

      Dans l'étape suivante, vous ajouterez d'autres écrans à votre application.

      Étape 2 - Création d'un HomeScreen et FriendsScreen

      Actuellement, vous disposez d'un seul écran affichant un message de bienvenue. Au cours de cette étape, vous créerez les deux écrans de votre application : HomeScreen et FriendsScreen.

      HomeScreen

      Votre application aura besoin d'un HomeScreen. Le HomeScreen affichera le nombre d'amis déjà présents dans votre réseau.

      Prenez le code d’App.js et ajoutez-le à un nouveau fichier appelé HomeScreen.js :

      Ouvrez HomeScreen.js:

      Modifiez HomeScreen.js pour utiliser HomeScreen au lieu d’App :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class HomeScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have (undefined) friends.</Text>
            </View>
          );
        }
      }
      
      // ...
      
      export default HomeScreen;
      

      Ce code produira un message de remplacement You have (undefined) friends. Vous fournirez une valeur plus tard.

      FriendsScreen

      Votre application aura également besoin d'un FriendsScreen. Sur le FriendsScreen, vous pourrez ajouter de nouveaux amis.

      Prenez le code de App.js et ajoutez-le à un nouveau fichier appelé FriendsScreen.js :

      • cp App.js FriendsScreen.js

      Ouvrez FriendsScreen.js :

      Modifiez FriendsScreen.js pour utiliser FriendsScreen au lieu d’App :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class FriendsScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
            </View>
          );
        }
      }
      
      // ...
      
      export default FriendsScreen;
      

      Ce code produira un Add friends here! here!

      À ce stade, vous avez un HomeScreen et FriendsScreen. Cependant, il n'y a pas moyen de naviguer entre eux. Vous développerez cette fonctionnalité au cours de la prochaine étape.

      Étape 3 - Utilisation des StackNavigator avec React Navigation

      Pour naviguer entre les écrans, vous utiliserez un StackNavigator. Un StackNavigator fonctionne exactement comme une pile d'appels. Chaque écran vers lequel vous naviguez est poussé vers le haut de la pile. Chaque fois que vous appuyez sur le bouton Retour, les écrans se détachent du haut de la pile.

      Tout d'abord, installez @react-navigation/native :

      • npm install @react-navigation/native@5.7.3

      Ensuite, installez @react-navigation/stack et ses dépendances :

      • npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

      Remarque : Si vous développez pour iOS, vous pouvez avoir besoin de naviguer vers le répertoireios et exécuter pod install.

      Ensuite, revisitez App.js :

      Ajoutez NavigationContainer et createStackNavigator à App.js :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      
      const Stack = createStackNavigator();
      

      Ensuite, remplacez le contenu de render :

      App.js

      // ...
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le HomeScreen :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import HomeScreen from './HomeScreen';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Ce code crée une très petite pile pour votre navigateur avec un seul écran : HomeScreen.

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le FriendsScreen :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import HomeScreen from './HomeScreen';
      import FriendsScreen from './FriendsScreen';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                />
                <Stack.Screen
                  name="Friends"
                  component={FriendsScreen}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Ce code ajoute le FriendsScreen au navigateur.

      Remarque : Cela diffère de la façon dont createStackNavigator a été utilisé dans les versions précédentes de React Navigation.

      Maintenant, le navigateur est conscient de vos deux écrans.

      Ajouter des boutons à HomeScreen et FriendsScreen

      Enfin, ajoutez des boutons pour vous déplacer entre vos deux écrans.

      Dans HomeScreen.js, ajoutez le code suivant :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      
      class HomeScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have (undefined) friends.</Text>
      
              <Button
                title="Add some friends"
                onPress={() =>
                  this.props.navigation.navigate('Friends')
                }
              />
            </View>
          );
        }
      }
      
      // ...
      

      Dans FriendsScreen.js, ajoutez le code suivant :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      
      class FriendsScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
      
              <Button
                title="Back to home"
                onPress={() =>
                  this.props.navigation.navigate('Home')
                }
              />
            </View>
          );
        }
      }
      
      // ...
      

      Parlons de this.props.navigation. Tant que votre écran est inclus dans le StackNavigatorIl hérite automatiquement de nombreux accessoires utiles de la navigation objet. Dans ce cas, vous avez utilisé navigate pour passer à une autre page.

      HomeScreen et FriendsScreen

      Si vous ouvrez maintenant votre simulateur, vous pouvez naviguer entre le HomeScreen et le FriendsScreen.

      Étape 4 - Utilisation de Context pour transmettre des données à d'autres écrans

      Dans cette étape, vous allez créer un ensemble d'amis possibles - Alice, Bob et Sammy - et une série vide d'amis actuels. Vous créerez également une fonctionnalité permettant à l'utilisateur d'ajouter des amis possibles à ses amis actuels.

      Ouvrez App.js : 

      Ajoutez possibleFriends et currentFriends à l'état du composant :

      App.js

      // ...
      
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            possibleFriends: [
              'Alice',
              'Bob',
              'Sammy',
            ],
            currentFriends: [],
          }
        }
      
        // ...
      }
      
      // ...
      

      Ensuite, ajoutez une fonction permettant de déplacer un ami éventuel dans la liste des amis actuels :

      App.js

      // ...
      
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            possibleFriends: [
              'Alice',
              'Bob',
              'Sammy',
            ],
            currentFriends: [],
          }
        }
      
        addFriend = (index) => {
          const {
            currentFriends,
            possibleFriends,
          } = this.state
      
          // Pull friend out of possibleFriends
          const addedFriend = possibleFriends.splice(index, 1)
      
          // And put friend in currentFriends
          currentFriends.push(addedFriend)
      
          // Finally, update the app state
          this.setState({
            currentFriends,
            possibleFriends,
          })
        }
      
        // ...
      }
      
      // ...
      

      À ce stade, vous avez terminé la construction de la fonctionnalité permettant d'ajouter des amis.

      Ajouter FriendsContext à App

      Vous pouvez maintenant ajouter des amis dans App.jsmais vous voudrez les ajouter à FriendsScreen.js et les faire afficher dans HomeScreen.js. Comme ce projet est construit avec React, vous pouvez injecter cette fonctionnalité dans vos écrans avec context.

      Note : Dans les versions précédentes de React Navigation, il était possible d'utiliser screenProps pour partager les données entre les écrans. Dans la version actuelle de React Navigation, il est recommandé d'utiliser React Context pour partager les données entre les écrans.

      Pour éviter une référence circulaire, vous voudrez un nouveau fichier FriendsContext :

      Exportez FriendsContext :

      FriendsContext

      import React from 'react';
      
      export const FriendsContext = React.createContext();
      

      Ouvrez App.js : 

      Ajoutez le FriendsContext :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import { FriendsContext } from './FriendsContext';
      import Home from './Home';
      import Friends from './Friends';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        // ...
      
        render() {
          return (
            <FriendsContext.Provider>
              <NavigationContainer>
                <Stack.Navigator>
                  <Stack.Screen
                    name="Home"
                    component={Home}
                  />
                  <Stack.Screen
                    name="Friends"
                    component={Friends}
                  />
                </Stack.Navigator>
              </NavigationContainer>
            </FriendsContext.Provider>
          );
        }
      }
      
      // ...
      

      Ce code établit FriendsContext comme nouvel objet Context et enveloppe le NavigationContainer dans un Context.Provider afin que tous les enfants de l'arbre des composants puissent s'abonner aux changements de contexte.

      Puisque vous n'utilisez plus View ou Text, il est possible de supprimer ces importations de react-native.

      Vous devrez fournir une valeur pour rendre les données accessibles aux consommateurs :

      App.js

      // ...
      
      class App extends React.Component {
        // ...
      
        render() {
          return (
            <FriendsContext.Provider
              value={
                {
                  currentFriends: this.state.currentFriends,
                  possibleFriends: this.state.possibleFriends,
                  addFriend: this.addFriend
                }
              }
            >
              <NavigationContainer>
                <Stack.Navigator>
                  <Stack.Screen
                    name="Home"
                    component={Home}
                  />
                  <Stack.Screen
                    name="Friends"
                    component={Friends}
                  />
                </Stack.Navigator>
              </NavigationContainer>
            </FriendsContext.Provider>
          );
        }
      }
      
      // ...
      

      Cela permettra à la HomeScreen et FriendsScreen de référencer tout changement de contexte currentFriends et possibleFriends.

      Vous pouvez maintenant travailler sur le référencement du contexte dans vos écrans.

      Ajouter FriendsContext à HomeScreen

      Dans cette étape, vous configurerez l'application pour afficher le nombre actuel d'amis.

      Ouvrez HomeScreen.js :

      Et ajoutez le FriendsContext :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class HomeScreen extends React.Component {
        // ...
      }
      HomeScreen.contextType = FriendsContext;
      
      // ...
      

      Ce code établit un Classe.contexteType. Vous pouvez maintenant accéder au contexte dans vos écrans.

      Par exemple, faisons en sorte que votre HomeScreen affiche combien de currentFriends vous avez :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class Home extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have { this.context.currentFriends.length } friends!</Text>
      
              <Button
                title="Add some friends"
                onPress={() =>
                  this.props.navigation.navigate('Friends')
                }
              />
            </View>
          );
        }
      }
      HomeScreen.contextType = FriendsContext;
      
      // ...
      

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le HomeScreenvous verrez le message : You have 0 friends!

      Ajoutez FriendsContext à FriendsScreen

      Dans cette étape, vous configurerez l'application pour afficher les amis possibles et fournir des boutons pour les ajouter aux amis actuels.

      Ensuite, ouvrez FriendsScreen.js :

      Et ajoutez le FriendsContext :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class FriendsScreen extends React.Component {
        // ...
      }
      FriendsScreen.contextType = FriendsContext;
      
      // ...
      

      Ce code établit un Class.contextType.

      Maintenant, créez un bouton pour ajouter des amis dans FriendsScreen.js :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class Friends extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
      
              {
                this.context.possibleFriends.map((friend, index) => (
                  <Button
                    key={ friend }
                    title={ `Add ${ friend }` }
                    onPress={() =>
                      this.context.addFriend(index)
                    }
                  />
                ))
              }
      
              <Button
                title="Back to home"
                onPress={() =>
                  this.props.navigation.navigate('Home')
                }
              />
            </View>
          );
        }
      }
      FriendsScreen.contextType = FriendsContext;
      
      // ...
      

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le FriendsScreen, vous verrez une liste d'amis à ajouter.

      HomeScreen avec 0 currentFriends et FriendsScreen avec 3 possibleFriends

      Si vous visitez le FriendsScreen et cliquez sur le bouton pour ajouter des amis, vous verrez la liste des possibleFriends diminuer. Si vous visitez le HomeScreen, vous verrez le nombre d'amis augmenter.

      Vous pouvez désormais naviguer entre les écrans et partager des données entre eux.

      Conclusion

      Dans ce tutoriel, vous avez créé un exemple d'application React Native avec plusieurs écrans. En utilisant React Navigation, vous avez imaginé un moyen de naviguer entre les écrans. En utilisant React Context, vous avez développé un moyen de partager des données entre les écrans.

      L'ensemble du code source de ce tutoriel est disponible sur GitHub.

      Si vous souhaitez approfondir votre connaissance de React Navigation, consultez leur documentation.

      React Navigation n'est pas la seule solution de routage et de navigation. Il y a aussi React Native Navigation, React Native Router Fluxet React Router Native.

      Si vous souhaitez en savoir plus sur React, consultez notre série Comment coder dans React.js ou consultez notre page thématique React pour des exercices et des projets de programmation.



      Source link