Natif de React : apprendre en faisant [2024]

1. Introduction: Bienvenue au cours React Native. Dans ce cours, nous allons apprendre à créer une application de films à partir de zéro en utilisant une interface de ligne de commande React Native. Et dans ce cours, vous serez en mesure de voir des catalogues de films, ainsi que quelques curseurs sur le dessus à l'intérieur de l'application. Et aussi vous serez en mesure de naviguer vers un film et lire des données ou ce film et d'afficher des informations à ce sujet, comme les catégories de l'évaluation du film et une description. Et aussi, vous verrez leur date de sortie. Bien sûr, nous aurons un bouton de lecture où vous pouvez lire le film et vous pouvez lire une vidéo avec des indicateurs de chargement. Et vous serez en mesure de faire pivoter votre téléphone et vous verrez comment il est cinquième et adapter directement pour avoir un plein écran de votre application directement lorsque nous retournons leur forme est tout à votre main. Et aussi, nous allons faire exactement quelque chose comme chercher films à partir d'une vraie base de données qui est connectée à Internet. Et vous pouvez rechercher, par exemple, certains films et vous pouvez afficher ces films et vous pouvez les visiter pour voir leur évaluation et quelques informations sur ce film. Par exemple, je cherche un film et je l'obtiendrai, puis j'obtiendrai toutes les informations à ce sujet. Et aussi, je ne peux pas jouer. Bien sûr, vous pouvez avoir beaucoup d'expérience avec ce cours. Vous apprendrez beaucoup. Vous pouvez avoir cette application dans votre portefeuille. Vous pouvez la présenter lorsque vous avez un entretien d'embauche ou même lorsque vous avez un client pour afficher cette application à vos clients afin que vous puissiez les attirer et avoir des applications pour eux. Aussi, je n'aime pas leurs cours qui sont ballants, comme qui vont théoriquement et vous verrez ce qui est composant, ce qui est service, et cetera. Mais j'aime faire quelque chose d'impraticable. J' aime voir quelque chose en face de moi qui me rend heureux à la fin et qui fait une demande. Je peux le présenter à mes amis aussi. Comment nous allons appeler des bibliothèques externes, comment nous pouvons utiliser les composants de React Native. La bonne chose à propos de ce cours, Il n'est pas basé sur Expo, qui est comme exactement pour les débutants. Maintenant, les entreprises et les entreprises professionnelles, ils utilisent en fait seulement comme React Native CLI. J' espère que vous serez heureux après avoir inscrit ce cours parce qu'à la fin, vous aurez une application entre vos mains et vous ne pouvez pas toujours en être fier. Et bien sûr, je serai très heureux de répondre à votre question. Et nous avons discuté de beaucoup de choses ensemble. Alors, êtes-vous prêt ? Commençons. 2. Exigences du cours: Ok, qui peut suivre ce cours ou quelles sont les exigences du cours ? Donc, tout d'abord, vous n'avez pas besoin de savoir quoi que ce soit sur React natif. Je vais vous montrer toutes les possibilités de construire une application en utilisant React native, bien sûr, mais je ne vous apprendrai pas tout sur React native. Je vais vous enseigner ce dont nous avons besoin pour notre application dans ce cours également. Vous n'avez pas besoin de connaître les connaissances des pairs évaluateurs sur le développement mobile. Vous avez juste besoin de connaître quelques petites bases de style, que je vais aussi expliquer pendant le cours. Et maintenant ce que vous devriez savoir, vous ne devriez pas JavaScript parce que vous savez, React Native est construit sur JavaScript et vous pouvez utiliser JavaScript pour générer une application native. Et aussi, vous devez connaître React. React est aussi un framework qui est construit sur JavaScript, mais ce React est dirigé pour être utilisé dans les applications web, pas sur le téléphone mobile. Comment React Native fait, même cela, je vais expliquer quels sont les composants, quels sont les accessoires, et quels sont les états dans ce cours ? Donc, de cette façon, vous apprendrez en le faisant, je ne vais pas expliquer tous React Native. Je vais juste vous expliquer ce qu'il nous faut pour ce cours. Et nous construisons plusieurs cours pour que vous puissiez tous les suivre. Vous verrez comment pratique et facile à apprendre React Native sans avoir un cours de documentation et aller environ 20 heures. Et tu n'as appris que des choses théoriques. La meilleure façon est d'apprendre pratique, faire quelque chose de pratique toujours pour apprendre de plus en plus. 3. Qu': Ok, Comme je vous l'ai déjà dit, React Native est similaire à réagir, mais il est conçu pour développer une application mobile. Donc, comme nous pouvons le dire, que la construction d'applications natives en utilisant JavaScript. Ainsi, vous pouvez utiliser vos compétences en JavaScript pour créer une application pour des formulaires comme iOS et Android. Et ils sont vraiment une application native. Ils ne sont pas des applications web qui sont réactives, qu'ils travaillent sur bureau et aussi sur téléphone mobile. Nous utilisons quelques compétences CSS pour le rendre réactif en tant qu'application pour travailler au téléphone. Non, ils sont vraiment, vraiment natifs. Donc, comme vous le voyez, nous pouvons construire deux applications en utilisant une langue, qui est, Ou par exemple, un framework en utilisant JavaScript, qui fonctionnera sur Android comme une application native, sur iOS comme un application aussi. Donc, la plupart des entreprises de nos jours vont de l'avant React Native parce que dans ce cas, vous économisez de l'argent pour embaucher une équipe sur iOS pour savoir, par exemple, Xcode ou la langue qui sont liés à iOS. Et aussi d'embaucher un autre thème qui connaît Java, qui est également utilisé pour construire une application Android. Non, vous avez juste besoin d'embaucher une équipe qui connaît JavaScript et les bases de réagir pour construire deux applications en même temps en utilisant React Native. Ainsi, l'entreprise économisera beaucoup d'argent. C' est pour ça que ça va aller de l'avant, peut-être que vous me direz, ok, c'est dangereux, comme comment je peux compter sur JavaScript. Que faire si mon application est construite et a beaucoup de sécurité et qu'elle doit être exacte. Donc, j'ai vraiment besoin de le construire comme natif. Ok, je vais vous donner des exemples de grandes entreprises utilisant React Native. Par exemple, Facebook, Instagram, et aussi cet accord, ciel, Pinterest, Tesla. Donc toutes ces entreprises utilisent de nos jours React Native pour leurs applications sur les deux plateformes, Android et iOS. Ainsi, vous n'avez pas besoin d'embaucher beaucoup de connaissances sur iOS ou Android. Si vous connaissez JavaScript, je vous garantis que vous pouvez déployer certaines applications back-end. Par exemple, une respiration sifflante connaître NodeJS, et aussi une application mobile en utilisant React Native et réagir. 4. Expo CLI ou React Native CLI: Je suis sûr que quand vous lisiez sur React Native, vous avez entendu parler de l'exportation. L' exportation est également une interface de ligne commune pour construire des projets de React Native. Et il fournit de nombreux outils et composants qui sont prêts à être utilisés dans React Native. La principale différence entre React Native et export réside dans la structure du code. Par exemple, comme vous le voyez à gauche, nous avons un projet React Native. Et nous voyons que nous avons deux dossiers qui contient le projet Android et iOS. C' est le projet que le vrai projet d'Android, qui est à l'intérieur, java ou Katlyn. Et aussi nous avons l'iOS, qui est écrit avec un rapide. Donc, dans ce cas, lorsque vous créez un projet React Native, vous créez également, le projet Android et iOS. Et de cette façon, vous aurez accès dans votre projet à ces modules dans Android et iOS. C' est ce qui donne React Native CLI, la réalité de l'utilisation des bibliothèques natives. Mais dans Expo, vous ne générerez qu'un projet JavaScript très pur, et vous pouvez utiliser uniquement le JavaScript ici, car l'exportation est également utilisée pour construire ses propres bibliothèques natives et ses propres composants natifs. nos jours, beaucoup de gens préfèrent utiliser React Native. React Native est plus stable et plus efficace. Et nous verrons quels sont les avantages de React Native Expo pour les débutants, comme je vous le dirai à la fin de cette conférence. Donc, si nous allons à la CLI React Native, vous pouvez ajouter des modules natifs qui sont écrits Java, Objective-C, également avec le swift. Et vous pouvez aussi les ajouter directement à votre projet. Et vous pouvez les utiliser en JavaScript comme bibliothèque JavaScript. Et aussi mettre en place notre projet est facile et cela peut être fait en une minute. Mais bien sûr, la mise en place de l'environnement prend un peu de temps. Plus de troisième bibliothèques sont prises en charge. Vous aurez beaucoup de troisième bibliothèques écrites avec React Native CLI, et vous les gars, vous les dans votre projet. Le plus grand avantage et le bon avantage de React Native CLI que vous avez moins de taille de fichiers de production. Par exemple, si vous avez construit une application avec React Native CLI, vous verrez que vous avez, par exemple, dix mégaoctets du fichier APK et aussi pour l'iOS, très bien. Mais quand vous construisez un projet avec expo, ce fichier ou ce fichier de production sera très grand et il a principalement 60 ou 70 mégaoctet en gros de la CLI React Native, qui a 10 mégaoctet seulement. Cela parce que l'exportation ajoute également les fichiers et les modules et les composants signent le fichier APK afin qu'il puisse être utilisé dans l'application. Mais ici, lorsque nous utilisons des modules natifs qui sont déjà dans votre système ou sur votre téléphone, alors vous n'avez pas besoin d'avoir un gros fichier de production aussi. J' ai construit un projet qui est fait comme une construction e-Sharp e-commerce avec l'exportation. Et il y a aussi beaucoup de cours sur Expo et il n'y a pas tellement de cours sur React Native CLI. Donc, je préfère faire ce cours avec React Native CLI pour voir l'avantage à la différence entre celui-ci et l'exportation. Et bien sûr, si vous voulez, vous pouvez vous inscrire à notre cours qui est de parler et de construire Ali avec Expo, qui construit un e-Sharp sur téléphone mobile. Donc, ici, il y a une recommandation similaire du projet React Native. Comme vous le voyez, il est dit que si vous êtes nouveau sur le développement mobile, le moyen le plus simple de commencer est d'utiliser expo CLI. Mais si vous êtes déjà familier avec le développement mobile, vous pouvez utiliser React Native CLI. Ok, peut-être que vous allez me demander, vous avez dit au début que je n'ai pas besoin d'un développement mobile. Ok, ouais, vraiment Vous n'avez pas besoin, par exemple, pour ce projet que nous allons construire, vous n'avez pas besoin de tant de compétences en développement mobile. Je vais juste vous apprendre les choses les plus importantes, comment importer des modules, bibliothèques natives, et les utiliser dans votre projet. C' est ça. Nous n'allons pas éditer beaucoup de choses dans les bibliothèques natives. Nous allons juste les appeler à notre projet. Et bien sûr, il n'y a pas un bon avantage d'utiliser React Native CLI que vous devez installer Xcode ou Android Studio pour exécuter votre projet sur votre téléphone. Mais de cette façon, vous garantissez que vous testez vraiment votre outil sans comme un middleware qui est construit de manière non native. quelques jours, j'ai demandé sur React Native communauté sur Facebook, que préférez-vous pour le développement d'application mobile en utilisant React Native ? La plupart des réponses et votes jeu avec React Native CLI. Et comme vous le voyez dans certaines réponses d'experts, ils ont dit que l'exportation est comme utiliser la roue d'entraînement pour un vélo, vous devrez éventuellement les enlever. Et aussi, une autre réponse était, je continue de voir l'exportation est pour les débutants. Et bien sûr, comme je vous l'ai dit, si vous êtes un débutant, vous pouvez simplement vous inscrire à l'autre cours où nous construisons E-Sharp. Donc, vous ne pouvez pas apprendre vraiment pratique en utilisant Expo. 5. Installation de nodejs: Ok, pour commencer à construire notre environnement, nous avons besoin d'abord de NodeJS. Nodejs est un outil pour fournir et installer bibliothèques dont nous avons besoin pour notre projet d'installer NodeJS, Vous avez juste besoin d'aller sur le site no js.org. Et ici vous trouverez deux méthodes d'installation. L' une est les dernières fonctionnalités, qui est appelé courant, également recommandé pour la plupart des utilisateurs. Toujours, je vais toujours pour, recommandé pour la plupart des utilisateurs, ce qui est comme plus stable. Et cela me fournit les outils les plus importants dont j'ai besoin pour mon développement et qui correspondent aux bibliothèques les plus mises à jour disponibles. Et bien sûr, NodeJS est disponible pour tous les systèmes, comme pas seulement pour Windows ou Mac, il est disponible pour Linux, pour tous les autres systèmes d'exploitation similaires. Il vous suffit de sélectionner le vôtre, puis assurez-vous que vous avez installé ici. Après cela, nous ouvrons l'installation et nous allons juste comme suivant, à côté, comme installer n'importe quelle application et il sera installé sur votre machine. Alors c'est tout. Je l'ai déjà sur ma machine et je l'ai déjà installé. Donc, je n'ai pas besoin de l'installer à nouveau. Donc, après cela, vous ouvrez le terminal de sorte que dix millénaires, vous pouvez l'ouvrir comme un terminal dans Mac book est, vous pouvez ouvrir les applications et vous vérifiez le terminal ou dans Windows, vous pouvez exécuter et puis trouver la ligne de commande, qui est appelé ligne commune, puis la ligne de commande standard. Et puis vous devez vérifier quelle version de Node.JS vous avez. Donc, la chose la plus importante que je veux que vous soyez sûr que vous avez la bonne version de Node. Donc, sinon vous ne serez pas en mesure d'exécuter la plupart des commentaires si vous avez l'ancienne version, comment nous pouvons connaître la version que nous avons après l'installation, nous pouvons aller au terminal comme je vous l'ai dit. Et vous mettez comme nœud moins v. Et avec cela, vous pouvez voir cette version que vous avez, il est préférable de développer avec React Native CLI pour utiliser la version qui est 12 et plus. Assurez-vous donc que vous avez la version 12 et plus encore. Et puis vous serez en mesure de coder sans aucun problème avec React Native CLI. 6. Créer le milieu de développement: Ok, maintenant nous allons mettre en place notre environnement. Je vous conseille de toujours suivre la documentation qui est fournie par React Native formellement. Ainsi, lorsque vous y allez, vous verrez toutes les étapes dont vous avez besoin pour l'installation de votre environnement. Donc, tout d'abord, vous allez à React Native dot dev, puis vous allez dans les docs. Ici, vous verrez quelque chose qui est appelé environnements mis en place. Et ce sera à jour, toujours basé sur les versions, basé sur les systèmes d'exploitation d'Android et iOS. Sur la base de cela, vous verrez toujours laisser la dernière documentation. Je vais vous montrer comment nous pouvons le suivre. Tout d'abord, comme je vous l'ai dit, nous devons suivre pas Expo CLI, nous allons travailler avec React Native CLI, qui est le plus préféré par la plupart des développeurs mobiles. Mais bien sûr, si vous êtes débutant, je préfère vous suivre mon cours qui concerne le travail avec Expo. Et j'y ai construit tout l'environnement dont vous avez besoin pour travailler avec des experts. Mais maintenant, nous allons travailler avec React Native CLI. Ensuite, nous allons au système d'exploitation. Le système d'exploitation, comme vous le voyez, est disponible pour Mac OS, Windows et Linux. Je vais travailler ici avec Mac OS. Bien sûr, vous pouvez également suivre Windows. Tous sont les mêmes, mais avec de petites différences comme la mise en place des tampons que nous voulons pour exécuter nos commentaires. Mais comme je vous l'ai dit, il est toujours préférable de suivre la documentation pour les versions. De plus, vous devez également cibler le système d'exploitation pour lequel vous allez déployer. Bien sûr, nous allons travailler avec Android et iOS en même temps. Et les deux ont une installation différente. Je vais commencer maintenant avec Android. Donc, tout d'abord, nous allons au Mac OS, puis nous allons à l'Android cible, puis nous installons les dépendances comme nous avons ici, un noeud. Et nous devons installer d'autres choses, que je vais l'expliquer en détail. Donc, tout d'abord, nous allons travailler avec l'Android, comme vous le voyez ici dans la documentation et dans la conférence. Après cela, nous allons travailler avec iOS pour voir comment nous pouvons également exécuter iOS. Malheureusement, comme sur Windows, lorsque vous voulez travailler sur Windows et que vous avez iOS, vous ne pouvez pas prendre en charge le déploiement ou le développement d'une application iOS. Cela parce que cette application iOS doit exécuter quelque chose appelé Xcode. Et Xcode est requis et n'est installé que sur le système Mac. Donc, pour cela, j'utilise parfois une machine virtuelle VMware. J' installe Mac OS sur mon Windows, puis je peux travailler avec iOS. De cette façon. Si vous n'avez pas de MacBook, vous pouvez installer la machine virtuelle. Il existe de nombreuses façons d'exécuter une machine virtuelle. Juste Google et vous le trouverez immédiatement et vous verrez comment vous pouvez installer la machine virtuelle de Michael S sur Windows. C' est pourquoi je fais ce cours avec macOS actuellement. Donc c'est plus général. Ainsi, nous pouvons travailler avec Android et iOS en même temps. Donc, dans la prochaine conférence, je vais vous montrer comment nous pouvons commencer l'installation pour les systèmes Android. 7. Configurer Android: Ok, dans cette conférence, nous allons parler de la façon de configurer notre environnement Android. Donc, tout d'abord, nous allons, comme nous l'avons dit à leur documentation, puis nous allons à Mac OS, puis Android. Et dans Android il y a un outil qui est appelé un brassage Homebrew, qui aide à l'installation de l'application ou certains outils facilement à votre système Mac. Donc, si vous n'avez pas installé Homebrew, il est préférable de l'installer. Il vous aidera à installer beaucoup d' applications sans vous soucier de trouver l'installation pour cela. Donc, pour cela, par exemple, je veux installer Node comme je vous l'ai montré précédemment, je vais juste à mon terminal et je lance brew install Node, comme je vous l'ai dit précédemment. Donc, si vous allez ici, vous voyez que brasser installer Node et aussi il ya un autre outil qui est appelé Watch man. C' est un très bon outil. C' est fait par Facebook. Allez voir vos modifications sur votre système de fichiers. Et c'est fortement recommandé car c'est de meilleures performances pour votre application et regarder les mises à jour sur les fichiers. Alors essayons d'installer cela parce que avant que nous avons déjà installé NADH, comme je vous l'ai montré, mon normalement sans infusion, mais maintenant je vais installer ceci avec hébreu. Donc, après l'installation de Homebrew, exactement la même chose. Il suffit de copier le commentaire sur le terminal et vous aurez Homebrew. Après cela, vous serez en mesure d'utiliser leur commentaire bleu, sorte que vous pouvez installer n'importe quel programme qui est disponible dans ce paquet. Alors essayons, par exemple, d'installer watchman. Donc, je vais aller au terminal et puis je vais coller brasser installer watchman. Et puis nous attendrons l'installation. Et nous verrons qu'il installe tout le programme pour moi, y compris le chemin est inclus, toutes les informations qui sont nécessaires au développement pour utiliser cet outil. Ok, Comme vous le voyez, l'installation avait été faite. Donc j'étais comme sauter la vidéo parce que ça prend du temps. Alors maintenant, il est installé. Revenons à la documentation et voyons ce que nous avons ici. Donc aussi, nous avons besoin pour cela d'un kit de développement Java. Ceci est requis pour les systèmes Android. Donc, nous devons aussi installer cela. La même chose. Nous allons copier cette commande qui s'appelle une installation de brassage. Et puis nous pouvons voir Open JDK, ce qui est nécessaire pour cela. Et ils ont dit que si vous avez déjà installé GDK sur votre système, assurez-vous simplement que vous avez JDK 8 ou plus récent. Donc, vous devez être sûr que vous avez la version 8, mais installons cela avec aussi homebrew. Donc, je vais coller ce commentaire à nouveau et attendre l'installation comme nous l'avons vu précédemment avec un Watchmen. Parfois, lorsque vous avez besoin de certains privilèges pour l'administrateur, il vous demande un mot de passe. Donc, vous avez juste besoin de mettre le mot de passe pour votre système Mac, puis il sera installé facilement pour votre machine. Donc, comme vous le voyez ici, qu'il est installé avec succès. Nous passons donc à l'étape suivante. Donc, nous avons ici après cette installation d'Android Studio, Android Studio, nous ne allons pas l'utiliser comme éditeur, mais nous avons besoin du SDK de celui-ci. Nous avons besoin de SDK, plate-forme SDK, et aussi appareil virtuel parce que nous avons également besoin de voir nos changements de l'application, comme toute application que vous l'exécutez sur Android. Nous devons voir nos changements sur un formulaire, un téléphone virtuel. Il est donc préférable d'installer Android SDK. Et aussi le SDK est nécessaire en tant que modules faisant partie de React Native parce que comme nous l'avons dit, l'annonce native utilise les modules qui sont disponibles dans les projets Android et iOS, comme nous l'avons expliqué précédemment. Donc, tout d'abord, nous devons installer et télécharger Android Studio. Donc, pour installer Android Studio, c'est aussi le même processus où vous devez télécharger Android Studio. Il est également disponible pour tous les systèmes d'exploitation comme par exemple, Windows et Linux, et aussi Chrome OS pour tous les systèmes d'exploitation. Donc, il est préférable de choisir celui qui convient à votre système , puis vous le téléchargez et le processus d'installation est très facilement vous allez juste suivant, suivant, suivant, et puis vous, il sera installé sur votre machine. Et nous allons exécuter l'Android Studio et nous devons spécifier quelques options comme je vais vous le montrer. Donc, comme vous le voyez ici, j'ai le bouton Télécharger. Il faut environ 900 mégaoctet. Et après cela, vous l'installez, puis exécutez l'application. Je l'ai déjà installé sur mon système d'exploitation. Et lorsque vous exécutez Android Studio, vous verrez cette fenêtre comme vous aurez besoin de créer un nouveau projet et que vous avez verrouillé ou projet, ou voulez-vous aussi pour d'autres types de projets ? Que devons-nous faire ici pour aller à Configurer, et ici, nous allons travailler comme les instructions de mise en place du développement. Utilisation de React Native. Alors allons-y. Comme vous le voyez ici, il dit comme installer le SDK Android. Donc, après que nous devons aller à la, vous voyez cette fenêtre, nous devons cliquer sur Configurer. Et puis comme ils sont venus gestionnaire et comme ils sont venus gestionnaire est toujours mis à jour ici. Vous devez toujours suivre les versions qui sont disponibles ici. Il est donc préférable de les installer exactement comme ils sont décrits ici toujours. Donc, lorsque vous voyez une version différente dans la documentation, puis cette vidéo, vous devez également suivre cette documentation. Donc, je vais à la configuration, je vais à SDK Manager, et puis nous devons vérifier que nous avons Android Q. Donc, nous devons installer celui-ci, comme vous le voyez ici. Donc, d'abord, nous devons avoir Android 10. Q, bien sûr, vous pouvez aussi bien vérifier le par défaut installé, parce que lorsque vous installez Android Studio huit vient par défaut avec celui-ci. Il est donc préférable de suivre cette documentation et de dire Android 10. Q. Ok. Quoi d'autre ? Il dit que vous devez vous assurer que les éléments suivants sont vérifiés. Donc, nous devons étendre cet Android 10 et nous vérifions la plate-forme Android SDK. Alors, comment peut-on faire ça ? Vous allez à nouveau à cette fenêtre et ensuite vous dites que les détails du paquet sont sûrs. Donc, lorsque nous cliquons sur Afficher les détails du paquet, voir plus de détails à ce sujet. Donc, il nous dit, assurez-vous que la plate-forme Android SDK 29 est disponible ou vérifié. Et aussi comme vous le voyez ici, nous avons quelque chose d'autre qui est l'image système Intel X86 atom 64. Donc nous devons aussi vérifier celui-là. Vous voyez que c'est par défaut n'est pas coché, donc nous devons vérifier cela aussi. Il est donc important de vérifier les détails du colis Sharp. Vous pourrez également voir tous les détails du paquet. Il y a autre chose que nous devons être sûrs de ce Google API, Intel X86, système atomique. Nous devons également vérifier cela aussi. Donc, quand nous irons ici, donc nous avons celui-là, il est très important de suivre cette recommandation. Ensuite, il dit que sélectionnez les outils SDK et cochez la case, Afficher les détails du package ainsi, et développez les outils de construction du SDK Android. Alors faisons ça. Donc, nous allons ici et puis nous allons aux outils SDK, puis nous allons ici et encore nous disons vérifier les paquets comme reculer montrer le détail du paquet. Ensuite, nous verrons comme une version, disons quelle version il dit que nous devons sélectionner, assurez-vous que vous avez 2902. Donc, nous devons aller ici et nous vérifions 2900 pour être sûr que vous installez également ce paquet. Bien sûr, vous avez la liberté de garder tout cela, tout ce que vous pouvez les supprimer en fonction de l'espace disponible sur votre machine. Après cela, nous avons tout sélectionné. Comme vous le voyez ici, nous cliquons sur Appliquer. Nous avons donc tout choisi comme documentation. Nous cliquons sur Appliquer et il va installer les choses que nous avons sélectionnées. Installé, notre estimation est de deux gigaoctets. Donc, vous devez vous assurer que vous avez vraiment l'espace parce qu'ils sont grands et vous devez être sûr que tout est installé correctement car cela prendra environ 88 gigaoctet. Donc on clique sur OK, et il va télécharger toutes les choses. Je vais trop vite cette vidéo pour que vous ne preniez pas autant de temps. Ok, cette installation maintenant réussie, et comme vous le voyez ici, nous avons Android 10 comme exigence est installé, et aussi les outils SDK, comme nous l'avons vu précédemment. Si nous allons montrer les paquets, nous nous assurons que tout a été installé comme décrit dans la documentation. Ok, nous cliquons sur OK, nous allons loin d'Android Studio et puis nous allons à l'étape suivante où il est écrit configurer la variable d'environnement de la maison Android. Et sur Mac, vous le faites différemment de Windows. Nous devons donc nous assurer que les commentaires Android fonctionnent bien sur ma machine. Cela dépend du type de votre terminal. Je parle maintenant de Mac, ok, Donc si vous voulez voir Windows, vous pouvez sauter un peu la vidéo que je vais vous montrer sur Windows. Donc, d'abord pour Mac, vous devez aller ajouter les lignes suivantes à votre profil home bash. Et ici, nous devons éditer ce fichier et ajouter ces lignes. Donc, tout d'abord, nous devons nous assurer que nous avons vraiment installé Android SDK sur ce chemin. Alors, comment peut-on faire ça ? D' abord, vous allez dans le Finder dans Mac, puis vous cliquez sur Aller, puis vous verrez votre bibliothèque. Donc, lorsque vous cliquez sur la bibliothèque, il ouvrira pour vous la bibliothèque sur le Finder. Donc vous pouvez le trouver ici. Et vous allez voir qu'il y a un dossier Android, et à l'intérieur de ce dossier Android il y a SDK. Donc voici ce que nous devons avoir, donc nous en assurer. Nous avons vraiment cette bibliothèque de la maison de bain, Android SDK. Ok, donc c'est sympa. Nous avons donc maintenant deux types de terminaux sur Mac. Donc, comme vous le voyez ici, j'utilise celui qui est préfixé avec Zed SH. Donc celui-ci est mon terminal que j'utilise pour mes applications. Vous pouvez donc faire les étapes audacieuses, ce que je vais faire maintenant. Donc, pour vous assurer que tous vos terminaux fonctionnent bien. Donc, d'abord, je vais éditer le profil bash point maison. Alors comment on peut faire ça, j'ouvrirai à nouveau le terminal. Et comme vous le voyez, j'ai essayé précédemment, j'ai un commentaire qui s'appelle sudo nano et puis éditer un peu bien. Donc, je vais mettre ce commentaire à nouveau. Alors pourquoi j'ai du sudo ? Parce que j'ai sudo parce que j'ai besoin d'autorisations pour ça. Vous ne pouvez pas modifier ce fichier sans privilège. Nano est éditeur, qui est installé en interne sur le système Mac ou les terminaux. Ainsi, vous pouvez éditer des fichiers à travers elle. Donc tu ne peux pas dire sudo nano comme on dit ici. Et il va ouvrir le fichier pour vous, puis vous devez exporter et copier et coller ce qui est écrit dans la documentation. Copions tout cela comme nous le voyons ici, puis revenons à ce terminal et collez-les ici. Ok, gentil. Nous les avons tous. Après cela, vous devez quitter, vous devez quitter. Donc, ici, il y a quelques raccourcis. Vous devez dire que nous devons contrôler X. Donc, vous devez appuyer sur Control X dans Mac. Et il vous offrirait que sauvegarder, modifier, modifier le tampon. Donc tu peux dire, oui, je veux les sauver. Donc, après ce nom de fichier à écrire, donc il vous demandera, remplacez ceci. Donc, vous appuyez simplement sur Entrée et il sera enregistré pour être sûr que vous pouvez avoir toutes les modifications effectuées. Il suffit de cliquer dessus à nouveau. Vous verrez ça. Ouvrez à nouveau le commentaire. Vous voyez que tous sont déjà. Alors je repars, je contrôle. Je retourne à la ligne de commande ou au terminal. Je vais au commentaire suivant où j'utilise zed comme éditeur de bord afin que nous puissions ensuite éditer ce fichier. Donc, vous allez au terminal et exactement le même sudo nano et le même, puis vous collez ceci et il s'ouvrira à nouveau pour vous, un éditeur que vous pouvez exporter aussi les ennuis qui sont nécessaires ici. Donc encore une fois, nous devons copier toutes ces commandes et aller au terminal. Et puis nous les avons basés. Nous pouvons dire ici, vous pouvez les coller en dessous et ensuite vous appuyez sur Enregistrer, ou vous pouvez dire Control X pour l'enregistrer exactement comme nous l'avons fait précédemment, ok, écraser les données et tout est bien sauvegardé. Donc, pour vous assurer que notre ligne de commande accepte que vous avez juste besoin d'exécuter cette commande qui s'appelle Echo Android home. Donc, nous allons à nouveau au terminal et puis nous collons cette commande et vous verrez que nous sommes devenus vides. C' est parce que vous devez redémarrer le terminal pour voir les modifications qui sont effectuées sur votre, sur votre terminal. Sinon, si cela ne fonctionne toujours pas, vous devez vérifier à nouveau ces profils SSID comme nous l'avons vu précédemment, et assurez-vous que vous avez le chemin d'exportation à la fin. Si oubli, voyez-vous ici, je l'ai fait, c'était comme ici. Donc ce chemin d'exportation était là. Donc je le déplace vers le bas pour être à la fin à la dernière. Donc, dans ce cas, nous pouvons exporter tous les bus qui sont définis ici. Assurez-vous donc que c'est comme le dépannage. Tu peux le faire. Vous pouvez donc vous assurer que votre terminal fonctionne. Donc, je vais fermer ce terminal et l'ouvrir à nouveau pour voir si je suis vraiment capable de voir le chemin d'accueil Android. Donc on le ferme, on ouvre à nouveau le terminal. Je ferais un zoom. Donc, je vais coller la commande écho Android Home yeux comme vous le voyez, je l'ai. Maintenant, le chemin comme je suis en train de copier ou de faire écho à ceci, en imprimant le commentaire ou le chemin qui est enregistré dans mon fichier de commentaire, qui est pour z comme h. Donc, ici, comme vous voyez que tout fonctionne bien, bien nous soyons sûrs que nos partenaires sont ici. Donc, il est écrit ici que vous pouvez vous assurer que tout fonctionne bien. Donc, après cela, il y a React Native obtenu interface de ligne de commande. Nous verrons cette étape après avoir terminé aussi pour iOS. Je vais donc garder cette étape pour l'instant. Pour Windows. Si je vais à Windows, en définissant le chemin, très facile, allez aux variables d'environnement qui sont définies dans Windows. Et tout est expliqué ici. Donc, vous allez simplement dans le Panneau de configuration, puis les comptes d'utilisateurs. Et puis les comptes d'utilisateur à nouveau, changez ma variable d'environnement. Et vous devez ajouter le chemin qui est installé sur votre machine pour Android SDK, normalement il vient des utilisateurs, et puis vous seriez nom d'utilisateur vient ici, puis AppData, Local Android SDK, c'est tout. Et vous devez alors vous assurer que tout ce chemin est bien notre ensemble. Donc, vous devez ouvrir PowerShell ou la ligne commune, copier et coller un bon élément enfant, puis vérifier que et Android Home est ajouté. C' est exactement comme comment nous nous assurons que nous avons Android Home variable est définie. C' est donc une façon dont nous configurons l'environnement Android pour Windows et Mac. Ensuite, nous allons expliquer sur iOS. Et après cela, malheureusement, comme je vous l'ai dit qu'iOS n'est disponible que sur Mac, donc je vais l'expliquer que sur la carte. Nous n'aurons pas d'explication pour Windows ou Mac OS et aussi le système iOS, qui sera dans la prochaine conférence. Et après cela, nous allons commencer notre application React Native ou d'abord agir native. 8. Configurer des IOs: Ok, dans cette conférence, nous allons parler de l'installation pour le développement de l'environnement pour le système iOS. Donc, nous avons travaillé avec macOS, Android, et je vais passer au système iOS. Installation pour le système iOS est exactement les mêmes étapes que nous avons fait précédemment avec Watchmen et Les autres outils. Mais nous avons aussi besoin d'installer une application s'appelait Xcode ? Xcode est disponible sur le Mac App Store, et lorsque vous l'installez, assurez-vous d'avoir la version dix et une nouvelle commande. C' est donc l'information la plus importante que vous devez connaître. Après l'installation de leur Xcode, il y a quelque chose qui s'appelle comme vous devez vérifier leurs outils de ligne de commande. Donc, après l'installation, j'ai déjà installé Xcode moi-même, mon système d'exploitation. Je vais au Xcode, puis je clique sur Préférences. Donc, quand vous allez à Préférences, vous verrez ici comme certains, quelques onglets. L' un d'eux est des lieux. Assurez-vous simplement que l'outil de ligne commune est sélectionné, que Xcode basé sur la vierge que vous avez installé. Donc, après cela, nous devons installer aussi. Simulateur. simulateur existe dans les composants. Donc, lorsque vous allez aux composants, vous devez installer un simulateur. J' installe maintenant le dernier simulateur de la version iOS pour les téléphones mobiles d'iOS. Donc, j'installe 14.4. Bien sûr, quand vous voyez la version supérieure est préférable de l'installer. Ainsi, votre application peut fonctionner avec la dernière version des systèmes iOS. Donc normalement, ces tailles sont disponibles ici. Vous avez aussi besoin d'avoir de l'espace sur votre PC. Deux, obéissez à la taille du simulateur. Après cela, nous passons à leur étape suivante. Après l'installation, les CocoaPods, bateaux de cacao est comme l'installation Ruby et il est disponible pour Mac OS. Il nous fournit beaucoup de comme comment dire bibliothèques pour iOS ou paquets pour iOS, vous avez facultativement vous pouvez l'installer. Donc, je vais aussi l'installer à travers ce commentaire, je vais ouvrir mon terminal et ensuite je vais coller cette commande ici. Et puis il me demandera un mot de passe. Je vais également coller mon mot de passe. Et il va installer pour moi quelque chose appelé CocoaPods. Si vous voulez en savoir plus à ce sujet, il y a un lien ici. Vous pouvez le vérifier. Alors, allez à CocoaPods. Il y a beaucoup de paquets et de bibliothèques pour les projets Objective-C, donc vous pouvez les avoir pour vos applications. Nous en parlerons plus tard lorsque nous allons utiliser ces CocoaPods dans notre cours. Mais actuellement, nous allons utiliser les composants natifs React, mais il est préférable de l'utiliser. Donc, pour plus d'informations, vous pouvez jeter un oeil à ce lien. Vous pouvez voir Mise en route avec CocoaPods. Vous pouvez aussi bien l'installer que les instructions, que nous avons ici, mais actuellement nous n'en avons pas besoin. Nous en aurons besoin plus tard. 9. Éditeur de code: L' éditeur que je vais utiliser dans ce cours sera Visual Studio Code. Comme je vous l'ai dit, nous avons installé Xcode et nous avons installé aussi Android Studio, mais nous ne allons pas les utiliser comme éditeurs. Nous allons utiliser Visual Studio Code, qui est très rapide et dynamique et c'est très bon pour le développement d'un natif React. Donc, comme vous le voyez ici, nous avons un code V point Visual Studio.com. Vous allez ici et puis vous cliquez sur télécharger mac universal, et vous aurez la version pour Mac. Et aussi, si vous cliquez sur cette flèche, vous verrez une autre version pour Windows et Linux. Ainsi, l'installation du code Visual Studio se terminera avec l'installation du code Visual Studio sur votre machine et vous aurez quelque chose comme ceci. Donc, dans la prochaine conférence, nous allons voir comment nous allons ajouter quelques extensions pour envelopper nos compétences de codage sur Windows, ou ce sera un fichier d'installation normal et aussi sur Mac vous pouvez l'installer et il sera téléchargé sous forme de fichier zip. Et lorsque vous ouvrez le fichier zip, il sera extrait et vous aurez votre application Visual Studio Code dot. Vous pouvez donc déplacer cette application vers vos applications sous Mac OS. Donc, il sera situé ici. Je l'ai déjà installé, donc je n'ai pas besoin de le faire. Donc, comme vous le voyez ici, nous avons Visual Studio application de code, et lorsque vous l'ouvrez, vous verrez cet éditeur Visual Studio installé sur votre machine. Donc, comme vous le voyez ici, j'ai ici mon code Visual Studio est installé sur ma machine. Pour Windows, ce sera exactement le même, mais ce sera des fichiers exécutables afin que vous puissiez l'installer comme n'importe quelle application sur Windows. 10. Installer des extensions de codage rapide pour la programmation rapide: Visual Studio Code est livré avec une extension supplémentaire que vous pouvez installer pour un comportement spécifique de votre code Visual Studio. Donc, pour visiter les bibliothèques ou autres, par exemple, leur marché pour ces extensions, vous avez juste besoin de cliquer sur Extensions sur Visual Studio Code. Comme vous le voyez ici à partir de cette icône, je vais cliquer dessus et puis vous verrez beaucoup d'extensions suggérées. Alors recherchons d'abord notre première extension, qui sera React outils natifs. Et cette extension est très utile pour notre application React Native comme nous le verrons plus loin. Donc, par exemple, cela nous aidera à créer comme certains extraits. Donc, comme vous le voyez, c'est très utile et il enveloppe notre revêtement. Et il a beaucoup de fonctionnalités comme la saisie semi-automatique des choses. Donc, ce que nous verrons l'avantage de cette extension plus tard, mais maintenant nous allons l'installer. Donc, je clique sur l'installation et il sera installé dans mes extensions. Une autre extension que nous devons installer aussi pour accélérer nos performances est appelée React Native, act slash snippets Redox pour ES6, ES 7. Donc, nous allons utiliser cela dans ce cours. Alors, c'est quoi cette extension ? Celui-ci est comme faire pour nous quelques raccourcis que nous pouvons écrire et il générera pour nous le code complet. Par exemple, comme vous le voyez ici, j'ai quelques importations, par exemple Iran EMR, et puis il va fonctionner, il va coder pour moi importer React de réaction. Donc, c'est comme un raccourci que nous pouvons écrire et il va importer pour nous en fonction des choses. Par exemple, j'ai IM, RPC, il va importer pour moi un composant pur de réaction. C' est donc quelques raccourcis que nous devons utiliser comme nous le verrons plus tard dans le cours. Et cela accélérera la productivité. Extension, que nous avons besoin d'installer est appelé plus joli. Prettier est comme une très belle extension qui est utilisée pour le formatage du code. Ainsi, lorsque vous enregistrez un fichier, il formera automatiquement votre code en fonction une configuration qui viendra avec l'installation React Native comme nous le verrons plus tard. Donc, d'abord, vous avez juste besoin d'installer cette extension et assurez-vous que vous avez l'option qui est appelée coffre-fort ou format sur Enregistrer. Alors, comment vous pouvez trouver cette option, vous avez juste besoin d'aller aux paramètres de VS Code. Donc, vous allez simplement dans le code, puis vous sélectionnez Préférences, puis Paramètres. Ainsi, lorsque vous cliquez sur les paramètres, vous pouvez trouver quelque chose appelé format sur Enregistrer. C' est donc le commentaire. Donc, vous avez juste besoin d'être sûr que le format sur Enregistrer, cette option est activée sinon, le format sur coffre-fort ne fonctionnera pas pour vous. Donc c'est tout pour l'instant. Nous verrons comment nous utiliserions plus jolie. Comme je vous l'ai dit, il sera installé automatiquement cette configuration avec un projet React Native. La dernière chose ou la dernière extension dont nous avons besoin est quelque chose comme facultative. Si vous le souhaitez, vous pouvez l'installer ou non. C' est ce qu'on appelle matériel, puis Icône Thème. Donc, c'est comme vous donner, comme lorsque vous avez une structure de fichier, il mettra les icônes des fichiers en fonction du type du fichier. Donc, il vaut mieux aussi l'installer pour rendre très confortable pour la liste de fichiers que vous avez ici. Après l'installation, il vous donnera sélectionner Fichier Icône Thème. Tu as juste besoin de l'utiliser. Donc, je vais utiliser Material Icone Theme ou seti. Utilisons celui-ci. Et puis vous verrez comme votre liste de fichiers B avec une icône spécifique des fichiers dans l'éditeur. Donc, ces icônes, vous les voyez par exemple, comme ceci. Donc, chaque fichier finit avec CSS, il aura une icône comme celle-ci. Chaque finition de fichier, par exemple, avec MPM aura comme ceci, JavaScript et cetera. Donc toutes les icônes sont disponibles, ce qui vous rendra facile de jeter un oeil à travers votre structure de fichier et de ramasser le fichier que vous voulez, les extensions dont nous avons besoin pour l'instant, nous allons construire notre premier ou un projet React Native, et nous verrons toute l'efficacité de toutes ces extensions plus tard. 11. Créer du projet de réagir natif: Ok, Maintenant, nous sommes prêts pour démarrer une nouvelle application avec React Native. Dans la documentation, il y a un outil qui est appelé MAX, qui fournit la possibilité de créer des applications comme une plaque de chaudière. Et ce MPS fait partie de MPM. Il est toujours livré avec la dernière version de Node. Assurez-vous donc que la dernière version de Node est installée. Donc, lorsque nous exécutons cette commande, nous allons créer un nouveau projet dans React Native. Donc, pour vous assurer que tout fonctionne bien, exécutons ce commentaire. Tout d'abord, j'irai à mon terminal. Donc, si vous vous souvenez, nous avons ce terminal ou ligne de commande qui peut être disponible sur Windows. Assurez-vous donc que vous êtes sur le bureau ou n'importe quel dossier où vous préférez, par exemple, sur votre disque dur. Donc ici, j'ai utilisé le bureau, donc je vais utiliser ce dossier pour créer mon projet. Donc, je vais copier cette commande comme vous le voyez, comme MPI x React Native dedans. Ensuite, vous spécifiez le nom du projet avec lequel vous allez travailler. Alors essayons ça. Donc, je vais d'abord au terminal, puis je vais coller cette commande, mais je vais donner, par exemple le nom. On peut dire projet de cours. Donc, comme pour l'instant, pour s'assurer que tout fonctionne bien pour nous, il est préférable d'avoir toujours comme les lettres majuscules de l', comme le nom du projet. Donc nous pouvons avoir un projet de cours comme celui-ci. Alors maintenant, je vais appuyer sur Entrée. Et puis il va créer pour moi sur le bureau un dossier où il s'appellera le projet de Gore. Si je vais sur mon bureau, comme vous le voyez ici, il va créer pour moi un nouveau projet. Mais ce processus prendra un peu de temps car il va télécharger des ressources pour créer le projet. Donc, comme vous le voyez ici, ses propres progrès. Je vais sauter cette vidéo parce que cela prend environ cinq minutes. Donc je vais sauter cette vidéo et je vous montrerai quand elle sera prête. Donc, comme vous le voyez ici, cette installation est faite. Donc, en téléchargeant certains modèles, copiant le modèle de traitement, puis quelques CocoaPods, les dépendances comme nous l'avons vu précédemment. Et voici quelques instructions pour exécuter le projet sur Android et aussi des instructions pour l'exécuter sur iOS. Donc maintenant comme vous le voyez ici, est installé, si je vais maintenant à mon bureau, je vais voir le projet est déjà ici. Donc, comme vous le voyez, j'ai entendu dire que j'ai ici ce projet de cours. Allons donc à Visual Studio Code et ouvrons le projet là. Donc, comme vous le voyez, nous avons ici ce dossier et nous pouvons cliquer sur ce dossier explorateur ou Explorateur de fichiers. Et puis vous verrez l'icône ou le bouton, qui est appelé Ouvrir le dossier. Et ici, nous allons ouvrir le dossier de notre projet où nous avons situé sur le bureau. Donc j'irai ici, projet de cours, et j'ouvrirai ce dossier comme vous le voyez ici. Donc, si vous jetez un oeil, nous aurons tout le fichier ici, donc nous sommes prêts pour la programmation. Jetons un coup d'oeil à travers la structure de fichiers du projet. Commençons de haut en bas. Donc, d'abord, nous aurons un test, qui sera comme un fichier de test pour tester l'application comme un test de bout en bout ou un test unitaire, qui sera créé ici aussi. Nous allons avoir un code VS assis. Ainsi, toujours lorsque vous voulez avoir des paramètres, paramètres spécifiques avec votre projet, vous pouvez ajouter ces paramètres de Visual Studio Code si vous êtes toute l'équipe utilise Visual Studio Code. Par exemple, la taille de police du code, comme vous le voyez ici. Ainsi, vous pouvez remplacer leurs paramètres par défaut dans votre éditeur par les paramètres qui sont spécifiés dans ce fichier ou ce dossier. Et nous le verrons plus tard. Et maintenant, nous avons le projet Android. Ce sera un projet Android pur, donc il sera écrit en Java. Vous verrez ici Gradle, nous ne allons pas gérer ou travailler avec ce projet parce que comme je vous l'ai dit que React Native interagit avec le projet Android et iOS pour générer pour nous une applications natives. Donc, nous ne allons pas travailler autant avec ces deux dossiers seulement quand nous voulons ajouter ou supprimer certains modules spécifiques, comme je vous montrerai plus tard, module de noeud est les bibliothèques Node JS. Donc, où nous allons installer les bibliothèques en JavaScript dont nous avons besoin pour exécuter notre projet. Par exemple, si vous ouvrez ce dossier, vous verrez que vous avez React bibliothèque native. Vous avez TypeScript, vous avez beaucoup de bibliothèques qui sont nécessaires pour Duran ce projet, buck config est quelque chose comme pour maven est un serveur qui peut être exécuté pour Android. Donc, nous allons aussi travailler avec elle si nous en avons besoin. Editeur Config est quelque chose comme, si vous vous souvenez, j'ai parlé d'un plus beau. Vous pouvez également définir une configuration pour votre éditeur comme ici. Vous pouvez avoir une configuration pour cet éditeur, mais il sera remplacé par le plus beau RC de glace comme j'en parlerai plus tard. Es lint est aussi quelque chose d'important pour le projet. Es lint est un outil qui vient avec une extension si vous le souhaitez, vous pouvez l'installer, qui s'appelle ES lint. Et lorsque vous installez ES Lint, cela vous montrerait en direct les erreurs de code que vous avez dans votre projet. Par exemple, si je vais ici à ArcJS, j'aurai une erreur, qui me montre que, ok, il y en a. Cela ne peut être utilisé que dans TypeScript, mais ne peut pas être utilisé dans le fichier JavaScript. Donc je veux dire l'importation. Donc, dans ce cas, vous pouvez aussi bien ignorer cette règle. Vous pouvez modifier la règle dans le fichier Eastland RC. Donc, le fichier ES Lint RC est un fichier où contiennent les règles pour votre code. Donc, dans ce cas, d'accord, c'est un projet va s'exécuter, mais vous aurez une erreur de frappe. Par exemple, si je mets ici citation double, C'est, le projet ne l'aimera pas. Ou l'agent de l'ESA ne l'aimera pas. Il dira, il est préférable d'avoir un seul devis car il est fixé dans les règles du projet. Donc, pour regarder plus ou sur ES peluches, vous pouvez simplement aller à ES peluches et vous ne pouvez pas vérifier les règles. Il y a beaucoup de règles que vous pouvez définir pour votre projet. Donc, par exemple, je vais prendre l'un d'eux. Par exemple, aucune console, journal de la console est lourd pour le navigateur lorsque vous les oubliez, lorsque votre projet, le projet s'exécutera avec journal de la console, puis il fera pour vous quelques problèmes de performance. Il est donc préférable de toujours supprimer le journal de la console du projet. Ici, il y a une loi ou une règle pour Eastland. Chaque fois qu'il y a un journal de console, il s'affichera sous l'erreur. Donc, vous devez le montrer, ok, s' il vous plaît supprimer le journal de la console. Donc, quand vous voulez travailler sur l'une de ces règles, par exemple, comme nous voyons ici que nous avons pris celle-ci, je vais juste ici et vérifier à la fin quelque chose appelé Règles. Et puis vous pouvez spécifier la règle qui est appelée aucune console de tous, vous pouvez la définir sur un ou 0. Donc, dans React, nous pouvons utiliser cela aussi, ces règles. Donc, si vous allez à leur projet et allez Eastland RC, vous avez juste besoin d'ajouter un champ qui est appelé règles. Et ces règles seront un objet. Et à l'intérieur de cet objet, vous mettez votre rôle. Par exemple, je vais mettre qu'aucune console, comme vous le voyez ici, par exemple, si nous allons et nous copions celui-ci, donc nous dirons tout ce que nous n'aurons pas de console. Donc, ici, nous mettons celui-ci, mais comme nous l'avons dit, cela n'aimera qu'une citation unique. Nous l'avons donc mis en citation unique. Et nous disons ici qu'allumer, comme allumer pour moi ou cette console d'erreur, allumez-le. Quand tu économises. Comme vous le voyez ici, il est déjà formaté, comme je vous l'ai dit précédemment, parce que nous avons mis sur le format dit. Un plus joli l'a déjà formaté pour moi. Donc, quand je vais à l'application, par exemple, je veux ajouter ici une console, le journal de la console. Donc, nous pouvons ajouter comme un journal de console ici, comme vous le voyez. Donc, il me donnera l'erreur instruction de console inattendue. Donc, il vaut mieux l'allumer. Rappelez-vous toujours que j'ai une erreur de journal de console dans mon application. Donc, si vous voulez le désactiver, il suffit d'aller à nouveau sur la route et juste mettre ici de comme il est écrit dans la description du projet. Et comme vous le voyez maintenant, l'erreur ne s'affiche pas ou l'avertissement ne s'affiche plus. Alors c'est tout. Vous pouvez donc spécifier la règle que vous voulez. Vous devez rechercher des règles. Et puis vous pouvez faire ce que vous voulez avec ces règles. Et vous pouvez rendre votre projet stable et unifié par code de toute l'équipe, qui est, qui partagent la base de code. Donnons donc cette règle, par exemple, et supprimons le journal de la console. Et continuons avec le flux de structure fine Config. Tu n'en as pas besoin pour l'instant. Il s'agit juste de la façon dont le flux d'exportation et de construction du projet se comportera. De bons attributs aussi vous n'en avez pas besoin pour l'instant être ignoré. Dossier très important où vous allez. Par exemple, lorsque vous liez le projet à un dépôt Git, vous n'avez pas besoin de pousser certains fichiers. Par exemple, les modules de noeud sont très énormes. va de même de ce dossier d'environ 300 mégaoctet lorsque vous démarrez un nouveau projet React Native. Donc, vous n'avez pas besoin de pousser ce code ou ce dossier dans le dépôt Git. Vous avez juste besoin de pousser les bibliothèques que vous réduisez à l'intérieur de votre projet. Donc, j'exclut les modules de noeud du bien à pousser avec mes commits et pousse à la base de code sur GitHub. Plus jolie, comme je vous l'ai dit, il y a déjà une configuration plus jolie qui configure cette plus jolie. Et comme vous le voyez ici, que nous avons du pain ici est défini ici, ICC vers le bas et il vous montrera toujours les erreurs et les règles qui suivent basées sur ce fichier jusqu'à JSON est le fichier qui est le point d'entrée pour notre projet. Comme par exemple, nous pouvons dire la page d'accueil de l'application. Comme nous le verrons plus tard quand nous allons exécuter l'application, nous verrons comment tout cela rendu dans notre téléphone et nous verrons comment nous pouvons le modifier et ajuster pour faire notre application. Et nous parlerons de ce dossier plus tard. Abc JSON est tout comme certaines propriétés pour l'application, comme le nom et le nom d'affichage. Ainsi, vous pouvez ajouter une propriété que vous voulez. Babel config est quelque chose pour ESR, ES6 ans cinq est un constructeur qui convertit leur JavaScript ES6 ans cinq en JavaScript Vanilla. Et vous pouvez, le navigateur ou n'importe quel navigateur peut le comprendre. Index js. C'est aussi le point d'entrée principal de votre candidature. Donc ici l'application est spécifiée ISA comme index deux ans quand j'ai commencé le projet, il va commencer à partir d'ici, index.js. Et je spécifie le nom du fichier, qui est appelé nom de l'application. Et ici, il va commencer pour moi le nom de l'application de l'application, que j'ai celle importée d'ici. Donc, le app.js est réellement appelé dans l'index GS, qui est le point principal racine, racine de votre projet. Et maintenant, nous avons metro config, qui transfère le projet de JavaScript Bayes à une base de code native comme nous l'avons vu plus tard. Et il est également utilisé comme un compilateur. Et il vous montre les erreurs lorsque vous faites des erreurs dans le code. Lorsque nous faisons comme paquet de développement JSON est utilisé pour les bibliothèques dont nous avons besoin. Ainsi, nous pouvons installer des bibliothèques et supprimer des bibliothèques aussi, comme seulement des bibliothèques JavaScript. Nous pouvons donc les ajouter ou les supprimer en fonction du paquet JSON. Et comme nous le verrons plus tard, comment nous allons appeler plusieurs bibliothèques dont nous avons besoin pour construire notre projet. Voici donc un aperçu rapide de la structure des fichiers du projet React Native. Nous verrons plus tard de plus en plus de détails sur tous ces fichiers. Premièrement, nous allons construire notre projet. 12. Foncer sur le simulateur iOS: Ok, dans cette conférence, nous allons voir comment nous pouvons exécuter le projet sur le simulateur iOS. Donc, comme vous le voyez ici, nous avons les instructions sur iOS dont nous avons besoin pour naviguer vers notre projet. Et puis nous devons exécuter la commande npm, React Native, exécuter iOS. Essayons ça. Mais je l'essayerais à partir de notre VS Code ou Visual Studio Code. Nous n'allons plus utiliser ces terminaux parce que vous savez que le code VS contenait déjà la ligne commune qui est utilisée pour utiliser ou insérer des commandes dont nous avons besoin pour notre projet. Ok, donc prenons cette recommandation et copions d'abord ce commentaire, puis nous allons au code Visual Studio. Donc, lorsque nous fermons cette ligne commune, nous allons au code Visual Studio. Donc, pour ouvrir le terminal dans le code Visual Studio, vous devez simplement appuyer sur Contrôle J sur Windows ou Commande J sur Mac. Alors essayons ça. Et vous verrez que vous obtiendrez le terminal et le fichier bash ou vous pouvez avoir aussi bien le zed que NMAC. Alors maintenant, nous allons coller le commentaire que nous avions précédemment. Mais rappelez-vous, vous avez déjà installé le Xcode et aussi le simulateur. Donc, nous verrons automatiquement que nous avons simulateur qui est sera sur iPhone. Alors essayons ça. Il faudra un certain temps pour exécuter le projet et inclure les paquets. Et comme vous le voyez ici, il lance l'iPhone 12 est le simulateur que j'ai installé précédemment, et maintenant il se charge. Donc, comme vous le voyez ici, le simulateur qui a lancé et maintenant nous construisons l'application. Alors qu'avons-nous ici que le simulateur ou le compilateur essayant de construire le projet en utilisant le projet iOS, que nous avons créé précédemment en utilisant notre commentaire React Native. Et comme vous le voyez, ce processus peut prendre un certain temps, vous devez donc être patient dessus. Cela dépend de votre mémoire de votre PC et aussi du processeur. Peut-être que vous remarquerez que le ventilateur du PC sera plus élevé et le processeur sera surchargé, mais pas de problème. Il arrivera quand tout sera lancé. Donc maintenant, après que le projet de loi ait été couronné de succès, comme vous le voyez ici, nous avons ouvert un nouveau terminal. Et ce terminal nous montre que le projet groupé index.js a été exécuté. Et comme je vous l'ai dit précédemment, cet indice GS contient le point d'entrée de notre application. Et comme vous le voyez ici, nous avons tout le compilateur, qui s'appelle Metro. Et aussi bien ici, nous avons le simulateur et l'application qui est par défaut vient par React Native boilerplate. Donc maintenant, quand vous allez faire un changement dans le code, par exemple, je vais changer cette étape 1, cette phrase à autre chose. Alors allons là-bas au code et trouvons dans app.js, comme je vous l'ai dit, ce serait le point d'entrée de notre projet. Donc, voici notre app.js. Donc, comme vous le voyez ici, le déterminant que nous avons ouvert précédemment, il est fait et a fait son propre travail, donc vous n'en avez plus besoin ici. Donc, quand je vais chercher l'étape 1, peu importe ce code, comment vous le voyez ici. Je vais l'expliquer étape par étape, mais changeons cette phrase étape une ici. Donc, je vais le changer, par exemple, pour React Native goals. Et quand j'économise, nous verrons les changements sont immédiatement reflétés sur le téléphone. Et cette application sera une application vraiment native. Il est violé par métro au projet iOS pour exécuter JavaScript dans iOS et converti en une application native, comme vous le voyez ici. Donc, chaque fois que je change quelque chose, ça se refléterait ici. Donc, ce sera très utile pour nous pour le codage. Vous n'avez pas besoin de recharger toute l'application car c'est ce qu'on appelle le rechargement à chaud. Cela reflète donc directement les changements que nous allons faire. Donc, lorsque nous construisons l'application, nous n'avons pas besoin de recharger chaque changement que nous faisons. Donc il suffit de l'enregistrer et il serait directement exécuté ici. Donc, c'est la façon dont nous exécutons l'application. Donc, quand vous étiez là est comme par exemple, une erreur. Comme vous le voyez, je vais faire une erreur. Il vous montrera l'erreur directement ici. Donc, sur le téléphone lui-même, et aussi sur Metro, ce terminal qui s'est automatiquement ouvert, il vous montrera la ligne exacte où l'erreur s'est produite. Donc, vous n'avez pas à vous soucier des erreurs. Vous ne pouvez donc pas les voir directement lorsque vous appuyez sur Enregistrer et que vous avez déjà une erreur. Donc, je l'ai remis et le projet s'exécute à nouveau. Donc, après vous vous assurer que votre Xcode installé et aussi vous avez téléchargé en tant que simulateur comme je vous l'ai montré précédemment. Maintenant, nous sommes en mesure d'exécuter le projet très facilement et en douceur. Donc, de cette façon, vous serez en mesure d'exécuter l'application sur le téléphone iOS. 13. Courir sur l'émulateur Android: Ok, maintenant dans cette conférence, nous allons exécuter notre projet sur l'appareil Android. Ce périphérique sera émulateur comme un périphérique virtuel. Comment nous avons fait exactement était appareil iOS. Alors maintenant, je vais aller à la documentation d'Android ou en cours d'exécution sur Android. Donc, la même documentation que nous suivions, je veux dire cible Android. Donc maintenant, si nous descendons, nous verrons ce commentaire où nous allons exécuter le projet. Nous avons donc créé un projet précédemment, comme vous l'avez vu. Maintenant, nous allons exécuter le projet sur un appareil. Mais ici, il y a quelques instructions que nous devons faire d'abord. Donc, tout d'abord, nous devons créer un périphérique physique ou un périphérique virtuel. Dans cette conférence, je vais vous montrer comment créer un périphérique virtuel. Nous devons donc suivre les instructions qui sont écrites ici. Et peut-être qu'ils seront mis à jour à l'avenir après avoir enregistré ce cours. Mais maintenant vous pouvez suivre cette instruction qui existe ici. Ce sera toujours la même chose pour l'avenir. Donc, d'abord, créons un nouvel AVD. Il s'appelle appareil virtuel, appareil virtuel Android. Donc, d'abord, nous allons android Studio, comme vous le voyez ici, et nous cliquons sur Configurer, puis AVD Manager, nous cliquons dessus et nous aurons une autre fenêtre. Et dans cette fenêtre, comme vous le voyez, vous pouvez ajouter vos appareils comme vous le souhaitez. Donc, il y a un appareil par défaut qui est utilisé dans, déjà dans Android Studio, mais nous allons utiliser un ou un par défaut qui est recommandé par la documentation React Native. Je vais donc cliquer sur Créer un périphérique virtuel. Et bien sûr, ce sera une forme. Bien sûr, si vous développez pour tablette ou par exemple, automobile ou TV, ce serait différent, mais le système d'exploitation sera toujours le même. Alors maintenant, nous allons sélectionner un de ces appareils. Donc, je recommande, par exemple, d'utiliser le Pixel 3 ou Pixel 2. Pas de problème. Ainsi, vous pouvez avoir un dimensionnement approprié de votre application. Alors maintenant, nous cliquons sur Suivant. Et puis comme vous le voyez dans la documentation, ils ont dit qu'il est préférable d'utiliser le système Q où nous avons 29 image. Donc, si nous allons à l'Android Studio, nous devons rechercher des images X86. On doit aller chercher des images. Et puis nous sélectionnerons celui qui s'appelle Q. Celui-ci que nous avons téléchargé précédemment, comme vous vous en souvenez, lorsque nous installions Android Studio. Et après cela, vous cliquez sur Suivant et vous donnez un nom pour cet appareil. Et vous pouvez choisir s'il s'agit d'un paysage ou d'un portrait. Mais ça n'a pas d'importance. Vous pouvez le modifier pendant l'exécution du périphérique, puis vous cliquez sur Terminer. Après cela, vous aurez l'appareil est ici. Donc maintenant, nous devons exécuter l'appareil que nous avons installé. Donc, après cela, nous pouvons aller ici et nous cliquons sur le bouton Play. Donc, si vous voyez ce bouton Play, alors il le fera, il va exécuter l'AVD. Il va ouvrir un téléphone pour vous forme virtuelle, exactement comment nous avons fait dans iOS et la différence ici que nous devons exécuter le téléphone manuellement ici. Et puis on doit attendre que le téléphone s'éteigne ou qu'il se lance. Ensuite, nous devons faire quelque chose pour exécuter notre application sur l'appareil. Donc, comme vous le voyez ici, nous avons maintenant l'appareil fonctionne, tout va bien. On a un vrai téléphone. Comme vous le voyez ici, il a une caméra, il a des applications, et c'est exactement comme un vrai téléphone. Donc maintenant, nous devons exécuter l'application que nous avons créée précédemment avec React Native sur ce lien. Ce que nous devons faire d'abord, tout d'abord, ils recommandent de trouver l'appareil par AVD, ou ligne commune d'Android. Alors, comment peut-on faire ça ? Donc, pour cela, nous devons nous assurer que vraiment l'appareil est attaché à Android. Je veux dire que React Native peut voir l'appareil que nous pouvons exécuter l'application dessus. Alors, comment nous pouvons faire cela, nous pouvons ouvrir une nouvelle fenêtre de terminal dans le code Visual Studio et exécuter la commande périphériques ADB. Donc ADB est comme la ligne commune que nous avons créée à la, au début lorsque nous installons Android Studio. Donc, ici, lorsque nous exécutons la commande ADB, il aura quelques options. L' un d'eux est des appareils. Donc, quand nous cliquons sur Entrée, nous verrons que nous avons émulateur 55, 54 dispositif. Si vous ne voyez rien ici, vous devez vous assurer que vous exécutez l'émulateur. Sinon, vous ne pourrez pas exécuter votre application avec React Nate. Après cela, nous devons exécuter l'application en utilisant et aussi comment nous l'avons fait précédemment avec quand nous étions en cours d'exécution ou nous avons installé l'application. Donc, si vous vous souvenez, nous avions cette commande qui s'appelle MAX React Native run Android. Vous pouvez ignorer cette étape parce que ce commentaire va exécuter cette commande automatiquement après cela, qui est comme courir métro, comme nous l'avons dit précédemment. Alors maintenant, exécutons la commande que nous avons exécutée Android lorsque vous voulez exécuter iOS, qui vient de le remplacer par iOS. Alors exécutons maintenant l'application. Encore une fois. Il va le construire et il faudra un certain temps jusqu'à ce qu'il exécute l'application sur cet appareil. Tu n'as rien à faire. Tu as juste besoin d'attendre. Et quand il est terminé, il ouvrira un nouveau terminal pour le métro et aussi UTILISER l'application est créée ici. Donc je vais mettre deux simulateurs. L' un est l'iPhone que nous avons fait précédemment, et ici celui avec Android. Et je vais sauter cette vidéo pour rendre rapide pour le chargement et l'exécution de l'application. Donc, comme vous le voyez ici, le bâtiment est terminé et il construit l'application sur le téléphone lentement. Et il va exécuter l'application, l' installer sur le téléphone, et nous verrons exactement comment nous avons fait avec iOS. Donc, comme vous le voyez ici, Metro est toujours en cours d'exécution et de pont vers les dispositifs de cartes. Donc maintenant, il convertit le code JavaScript en code Android et iOS. Et il nous montre cette mise en œuvre ici. Alors changeons quelque chose dans leur dieu, je vais juste rendre ça plus petit ici. Et ensuite, on pourra fermer ça. Et je vais mettre, par exemple, un cours React Native. Et je vais cliquer sur Enregistrer. Nous verrons que les changements sont appliqués sur les deux formulaires. Donc, sans aucun problème et sans aucun problème. Et comme vous le voyez ici, nous avons toutes les mises à jour immédiatement, qui vient comme un rechargement à chaud. Donc, pour voir notre application en cours d'exécution et nous pouvons faire nos changements immédiatement. Donc, c'est un moyen de faire fonctionner l'appareil Android. Si vous avez des problèmes, vous pouvez aller toujours faire le dépannage, qui se trouve ici dans la page de dépannage. Donc, ici, ils collectaient quelques problèmes courants et ils les résolvent grâce à ce dépannage, dont vous avez toujours besoin si vous avez quelques problèmes. Alors c'est tout. Vous avez juste besoin si vous avez un problème, allez simplement au dépannage ou demandez-moi dans le Q et un, ou vous pouvez également demander sur leur référentiel GitHub pour les problèmes. Et vous pouvez ouvrir un nouveau problème et ils vous répondront sur la façon de le résoudre. Mais j'espère que si vous suivez mes étapes, que je vous ai expliquées, vous n'aurez aucun problème lors de l'exécution de votre application. 14. Foncer sur votre appareil mobile sur Vysor: Certaines fonctionnalités que nous utilisons sur notre appareil ou émulateur Android ne seront pas disponibles, comme la façon dont nous avons un appareil à rayons. Donc aussi, certaines personnes souffrent que Android Studio est très lourd pour leur ordinateur et ils ont une quantité limitée de RAM. Donc, vous savez que Android Studio a besoin de beaucoup de RAM et beaucoup de ressources jusqu'à présent que vous pouvez également développer sur votre propre téléphone mobile. Donc, soit il peut être iPhone ou Android. Je vais vous montrer comment je vais connecter mon appareil Android et je vais développer dessus. Mais première étape, nous devons le faire pour nous assurer que l'émulateur est éteint. Nous devons donc désactiver l'émulateur, qui fonctionne sur Android Studio. Vous ne pouvez donc pas cliquer sur ce bouton, qui s'appelle puissance. Et puis il s'éteindrait pour vous cet appareil totalement. Donc, après le Dunning de l'appareil, vous devez aussi le fermer à partir d'ici. Donc, vous devez fermer l'appareil totalement de votre machine et aussi de votre émulateur. Vous devez être sûr que sur Android Studio, vous avez quelque chose en cours d'exécution dans vos appareils virtuels. Après cela, nous allons déplacer et installer un programme ou une application qui s'appelle Visor. Et cette visière, vous pouvez aller à la visière du site Web dot io, et vous pouvez le télécharger pour tous vos systèmes d'exploitation, Windows , Mac, Linux, et aussi vous pouvez l'installer sur le navigateur en utilisant une extension. Ok, comment on peut utiliser cette visière ? J' ai déjà téléchargé cette application, et comme vous le voyez ici, je l'exécute sur mon appareil. Donc, nous avons ici deux options, les appareils Android et les appareils iOS. Je vais montrer comment nous pouvons développer sur l'appareil Android. Donc, je vais vous montrer moi-même et puis je vous montre comment je connecte mon appareil et activer ce mode de débogage, le mode débogage USB, comme il est mentionné ici. Bonjour et bienvenue. Je suis de la famille et je vais vous montrer comment connecter votre appareil Android. Pour calculer que, tout d'abord, vous devez utiliser le câble d'origine, le câble USB, qui vient avec le téléphone à l'origine. Donc, sinon, vous aurez quelques problèmes avec la connexion à votre PC. abord, je vais le connecter, l'utiliser, cet USB. Et puis vous aurez sur le téléphone plusieurs options lorsque vous glissez vers le bas ou lorsque vous avez une liste déroulante, cette liste déroulante, il est dit comme charger via USB comme vous le voyez ici. Mais maintenant ce que je vais, je vais cliquer sur ce chargement via USB. Vous aurez plusieurs options. C' est donc différent du mobile au mobile. Donc, certains appareils qu'ils ont seulement transférer des photos, transférer des fichiers, charger uniquement, et inverser la charge, et importer midi. Ainsi, certains appareils fonctionnent directement avec leur ordinateur lorsque vous dites transférer des fichiers. Mais certains d'entre eux, vous devez avoir quelque chose appelé Import midi. Comme mon appareil dit ici, j'ai le téléphone Huawei et c'est, J'ai cette option ici. Donc, je vais sélectionner cette option à la fin. Donc, comme vous le voyez ici, puis le comportement de l'appareil sera changé. Donc jusqu'à maintenant, comme vous voyez cette visière, ils n'ont rien détecté parce que nous devons activer le mode de débogage ou le mode développeur, comment pouvons-nous le faire ? Tout d'abord, vous devez aller aux paramètres de votre téléphone. Donc, je vais aller à Paramètres et Paramètres. À la fin, vous verrez quelque chose sur le téléphone. Vous cliquez dessus. Et puis vous aurez quelque chose appelé numéro de construction. Et comme vous le voyez ici dans le numéro de build, je vais cliquer plusieurs fois dessus. Comme je vais mettre mon doigt et le faire comme d'une manière que j'aurai des options. Comme il me dira que vous vous comportez maintenant en tant que développeur. Ok, maintenant tout va bien. Mon appareil intestin en tant que développeur, mais nous devons activer le débogage Android USB. Donc, comme vous le voyez ici, nous pouvons aussi bien chercher dans le cadre. Donc, quand je vais à mon réglage sur mon appareil, comme vous le voyez ici, nous avons une poussée sur le dessus. Pour que nous puissions chercher dans le cadre. Et dans cette recherche, vous pouvez taper le débogage Android ou USB. Et il sera trouvé directement à la deuxième option de vos options dans les paramètres. Nous cliquons dessus. Et puis il vous emmènera à quelque chose appelé les options des développeurs. Et dans ces options de développeur, vous devez activer le mode de débogage. Il suffit de faire défiler vers le bas et vous verrez le débogage USB comme vous le voyez ici. Donc, dans le débogage USB, vous avez juste besoin de l'autoriser. Je vais donc permettre cela. Et cliquez, OK. Et vous aurez comme certains, une notification disant que le conseiller essaie de se connecter à votre appareil, alors vous devez l'autoriser. Donc, vous devez appuyer dans cette affaire. D' accord. Donc je suis plus OK. Et maintenant tout est parti et va bien. Et comme vous le voyez sur la visière que mon appareil a été détecté. Donc, quand nous allons sur mon appareil sur l'ordinateur portable ou l'ordinateur, quand je clique sur jouer, je vais voir que mon appareil fonctionne sur l'émulateur ici. Donc, je vais avoir quelque chose exactement comme l'émulateur que nous avions précédemment avec Android Studio. Et il montrera un anneau métallique de mon appareil ici. Donc maintenant comme vous le voyez, j'ai toutes les informations ou montrer mon téléphone totalement en direct avec cette application. Donc, avec cela, vous pouvez ensuite déployer l'application sur votre appareil, sur votre mobile. Et puis il fonctionnera sur votre appareil mobile au NIH, pensez qu'il serait installé sur votre application. Il serait sauvé ici. Vous n'avez donc pas à vous embêter à réinstaller l'application ou à la déployer, puis à la mettre sur votre appareil. Il sera déjà déployé sur l'appareil. Donc si vous n'avez pas vu ces options, dont j'ai parlé avant, c'est là. Donc, quand je clique, comme vous le voyez, j'ai fait des photos de sphère, transférer des fichiers. Certains ions mobiles ont une entrée midi. Donc quelque chose qui est comme l'équipement de musique, cela ne fonctionne pas d'une autre manière, mais certains appareils fonctionnent avec des fichiers de transfert. Donc, de cette façon, vous avez juste besoin de basculer jusqu'à ce que vous êtes plus sage application détecter ce changement. Et dans ce cas, vous pouvez sélectionner ce que vous voulez. Alors continuons et déployons notre application sur le téléphone mobile. On se voit avec ça. Ok, Donc maintenant comme vous le voyez ici, mon téléphone est déjà connecté à cette visière et nous allons déployer l'application sur cet appareil. Comme je vous l'ai dit, vous devez vous assurer que l'émulateur Android, que nous avons installé avec Android Studio, il doit être éteint. Donc, pour nous en assurer également, nous devons faire les mêmes étapes que nous l'avons fait auparavant. Donc, d'abord, nous devons d'abord exécuter les périphériques ADB, comme vous vous en souvenez ici. Donc, lorsque j'exécute des appareils ADB, mon appareil serait détecté automatiquement. C' est le code de mon appareil, et puis il serait là. Assurez-vous donc que vous n'avez qu'un seul appareil dans la liste. Sinon, l'application React ne fonctionnera pas correctement. Alors exécutons à nouveau l'application en utilisant Android. Je vais remettre le commandement. Donc, comme vous le voyez, il installe l'application. Il va installer l'application sur mon téléphone, sur la forme physique à laquelle est connecté. Donc, il faudra aussi un peu de temps de construction. Mais comme vous le voyez ici, que ça devient plus rapide que l'émulateur. Parce que ici l'application a été installée et a été déployée directement sur l'appareil, et elle utilise les ressources de l'appareil. Nous n'avons pas besoin d'utiliser les ressources du PC pour déboguer leur code, puis le déployer là. Donc, chaque fois que je fais quelque chose avec mon application, je vais changer ici à nouveau, les cœurs et enregistrer. Nous verrons le directement, le changement sera détecté ici. Et aussi le simulateur de l'iPhone fonctionne et fonctionne toujours bien. Donc, comme vous le voyez ici, vous avez une liberté. Vous pouvez utiliser un émulateur ou un émulateur iOS ou un simulateur. Et vous pouvez également utiliser votre appareil. Et comme vous le voyez, vous pouvez également passer hors ligne. Vous pouvez désactiver le, totalement le développement ou pour l'application. Et vous verrez que l'application est déployée sur votre appareil. Donc, je vais vous montrer rapidement. Et comme vous le voyez, l'application est ici, les projets de cœurs. Donc, quand je clique sur cette application, je vous verrai directement ouvert et aussi un je déconnecte le téléphone. Nous verrons toujours l'application et en cours d'exécution sans aucun problème. C' est comme installé sur mon téléphone. Donc, c'est une grande fonctionnalité parce qu'il utilise l'Android natif. C' est pourquoi je préfère utiliser l'interface de ligne de commande React Native que x bar, x bar. Ok, Vous pouvez exécuter l'application, mais sur un pont qui est appelé application x bar, vous devez l'avoir installé sur votre téléphone et aussi sur votre PC. Mais ici, l'application est stockée directement et vous pouvez l'utiliser sur votre appareil. 15. Application de Bonjour World et logging: Le moyen le plus simple de déboguer l'application ou l'application mobile est de faire et de journaliser. Journalisation. Je veux dire que je fais un journal de console, comme je vous l'ai déjà montré, que nous avons console.log et ensuite nous avons une donnée. Donc journal de la console, il va me chercher dans le terminal, mais quel terminal ? Le terminal qui fonctionne sous le métro. Metro Bundler, va me montrer tous les journaux de console que je fais. Et c'est comme notre console. Donc, de cette façon, si vous conservez quelque chose et enregistrez l'application, il va y enregistrer les données. Mais rendons ce code plus simple. Tu sais que c'est un peu compliqué. Nous devons donc simplifier les choses pour pouvoir passer étape par étape. Si vous allez dans l'application elle-même, vous verrez quelque chose appelé les bases. C' est comme une application Helloworld. Alors, cliquez sur ce lien et cela nous mènera à quelque chose comme l'introduction. Et nous aurons ici un exemple dont nous serons une application complète pour Hello World. Copions donc tout ce code. Je vais l'expliquer plus tard. Donc, nous allons à nouveau à notre application dans app.js. Comme je vous l'ai dit, le point d'entrée de notre application, nous supprimons tout. Et puis nous ferions ce code, ouvrons contre le simulateur et puis nous appuyons sur Enregistrer. Nous allons donc sauvegarder notre code. Comme vous le voyez, il est automatiquement formaté. Et comme vous le voyez ici, j'ai ici mon application est déboguée et chargée. Donc, si je change cela, je dirai, par exemple, ici, Bonjour monde. Donc juste pour être sûr que tout fonctionne bien. Ok, gentil. Nous avons ici Hello World. Si nous allons aux parties de l'application, vous verrez que c'est très simple. Donc, nous devons d'abord importer React à partir de la bibliothèque React, et aussi nous devons importer certains composants. Et ces composants sont toujours utilisés. L' application, comme vous le savez, React Native n'est pas HTML ou CSS. Non. C' est quelque chose comme nous pouvons dire des composants, nous utilisons un composant et ensuite nous appelons ces composants et plaçons quelques données à l'intérieur d'eux pour les afficher dans notre application, nous allons aller dans notre cours pour les composants dont nous aurons besoin pour construire notre application. Donc, pour cela, je vais expliquer les composants dont nous avons besoin pour le cours lui-même. Donc, par exemple, nous avons ici à ce point de vue. Cette vue est quelque chose comme vous pouvez le dire en HTML, est un div et div qui contiendra, par exemple, quelque chose d'autre composant à l'intérieur, ou par exemple, des textes ou des boutons ou des zones de texte. Donc, ici, comme vous voyez que cette vue est en train d'implémenter comme un div dans mon application. Aussi, je peux avoir une vue à l'intérieur de toi. Donc, nous pouvons utiliser comme div à l'intérieur div exactement de la même manière. Texte. Si vous voulez placer un texte, vous pouvez également l'utiliser. Comme vous pouvez placer n'importe quel texte est comme une plage ou nous pouvons dire paragraphe. Ensuite, vous pouvez placer le texte à l'intérieur de cette balise ici. Donc maintenant, après cela, nous pouvons dire que notre application de composant est appelée votre application. Nous pouvons dire que celle-ci, votre application, est chargée ici. Donc, quand je crée mon propre composant et le place ici, alors le composant sera appelé à l'intérieur de mon point d'entrée de mon application. Alors, renommons tout ça. On peut dire que c'est AB et c'est AP. Il montre que c'est une fonction et cette fonction retourne pour moi ce modèle React Native. Et cette fonction sera exportée et appelée dans le index.js comme vous le voyez ici. Et il sera chargé et enregistrer le composant principal comme AB et AB registre fera pour moi l'exécution de l'application. Cet historique abrégé, si nous y allons, il communique avec Android et aussi avec bibliothèques iOS pour exécuter l'application et le changer en une application native. Nous n'allons pas y aller en détail. Nous allons faire des choses pratiques. Je n'aime pas faire beaucoup de Théorie. J' aime aussi faire toujours quelque chose de pratique. C' est pourquoi mes cours ne sont pas pratiques. Parce qu'en fait, j'aime apprendre de choses pratiques. J' ai besoin de voir quelque chose devant moi. Alors faisons un journal de console. Comme je vous l'ai dit, nous allons faire un journal de console. Donc, la journalisation peut être comme nous pouvons dire que le point d'entrée de mon application sera à l'intérieur de cette fonction. Donc, cette fonction va retourner pour moi ce modèle. Mais avant cela, vous pouvez écrire n'importe quel code JavaScript, comme je vous l'ai dit. Donc, code JavaScript, nous pouvons dire console.log et nous pouvons dire bonjour monde. Pour que nous puissions consigner nos affaires. Et où je verrai cela apparaîtra, il apparaîtra dans mon terminal, qui s'appelle Metro, comme je vous l'ai montré, qu'il fonctionnera immédiatement après le regroupement de l'application. Alors nous allons zoomer ça. Je veux le rendre plus grand. Et comme vous le voyez ici, nous avons Hello World. Joli. Donc maintenant, si je vais à nouveau à ma demande et changer cela, comme je le dis ici, Bonjour monde. Donc, nous verrons que la connexion est toujours connectée ici, et c'est des informations qui s'appelle journal. Ok, génial, alors définissons, par exemple, constante, aligner constante et je dis x. et ce x aura, par exemple, de la valeur, mon cours. Et puis je vais mettre ceci, et maintenant je vais console ce x pour que nous puissions supprimer celui-ci, sauver tout. mise en forme automatique fonctionne bien. Et quand je vais au terminal, encore une fois, je verrai mon parcours. Joli. Donc, c'est JavaScript. En fait, nous écrivons ici JavaScript, que nous allons utiliser à l'intérieur de nos composants pour cette partie, qui est appelée style. C' est comme le style, mais Nazi SS, C'est React style natif. Et nous verrons plus tard comment nous allons styler notre application. Je vais parler de toutes les choses que nous avons besoin de styliser pour nos composants. Ainsi, vous pouvez consoles consigner et déboguer votre application à l'aide de la console de votre application. 16. Débugger Chrome: Ok, dans cette conférence, je vais vous montrer comment déboguer notre application. Bien sûr, le débogage est une très grande fonctionnalité, donc nous pouvons l'utiliser pour suivre nos problèmes, comme je vous l'ai dit, ok, Nous pouvons utiliser le journal de la console, mais il vaut mieux utiliser le débogage. Il y a deux façons de déboguer dans React Native. Le premier d'entre eux est d'utiliser Google Chrome. Oui, en utilisant le navigateur. Bien sûr, vous pouvez aussi utiliser un navigateur pour déboguer votre application. Comment nous pouvons faire ça. abord, vous devez cliquer sur votre simulateur, puis il y a un raccourci. Vous devez le faire, qui est Control D sur Windows ou Command D sur Mac. Ainsi, lorsque vous cliquez sur Contrôle D, vous aurez un menu comme celui-ci. Donc, vous aurez plusieurs options. L' un d'eux débogue avec le Chrome. Donc, lorsque vous cliquez sur le bogue avec Chrome, il s'ouvrira pour vous au débogueur. Donc, je débogage la page. Donc, comme vous le voyez ici, nous pouvons voir que nous avons une page de débogage. Et cette page contient quelques informations. Vous pouvez donc commencer le débogage. Ok, donc je vais créer le débogueur. Comment je peux voir, comme comment je peux placer un point d'arrêt dans mon Chrome. Donc, d'abord, nous devons ouvrir ce DevTools. Alors, comment ouvrir les DevTools ? Vous appuyez simplement sur F2 en appuyant sur F2. Comme vous le voyez, j'ai ici l'inspecteur, les DevTools de Chrome. Ok, maintenant je dois placer, par exemple, un point d'arrêt, mais où, comment je peux accéder au fichier, qui est par exemple, pour moi, le fichier ab.js. Donc, d'abord, si vous vous souvenez, nous avons un journal de console ici. Donc, je suis sûr que si vous ouvrez celui-ci et ouvrez la console aussi, vous verrez le message que nous avons imprimé. Il sera situé dans la console ici. Alors je l'ai dit comme ça. Donc, quand j'appuie sur recharger, je verrai que mon application a été rechargée. Maintenant, nous pouvons voir ce message. Donc, quand je clique sur ce app.js six, il me montrera dans le code où j'ai placé ce commentaire, où j'ai placé ce journal de console, et il ouvrira pour moi le code exactement comment je l'ai dans le code Visual Studio. Ainsi, vous pouvez créer un point d'arrêt. Vous savez, dans Chrome, vous pouvez créer un point d'arrêt en cliquant sur le numéro de ligne. Donc, quand je clique ici, j'ai créé un point d'arrêt. Ok, rechargeons maintenant l'application. Et comme nous voyons que nous avons arrêté sur le point d'arrêt automatiquement. Donc maintenant, je peux voir et vérifier la valeur de x, par exemple, en plaçant simplement la souris dessus. Et je vois ce qui se passe ici. Donc, quand je veux faire un pas de plus, je clique sur cette flèche. Pour qu'on puisse faire un pas de plus. Et puis je verrai que x a de la valeur, mon cours. Donc, de cette façon, nous faisons le débogage via Chrome. Et bien sûr, après avoir terminé le débogage, vous appuyez sur Play et l'application continue le chargement. Vous ne pouvez donc pas traiter le fichier app.js exactement à partir des sources ici, comme vous le savez toujours. Mais vous devez placer un journal de console ou vous pouvez activer celui-ci et activer les arcs d'extrémité sur les exceptions de couche. Donc, quand il y a une exception, il vous montrera dans votre code d'application où l'exception est placée. 17. Débugger avec VSCode: Une autre façon de déboguer notre application est d'utiliser le débogueur Visual Studio Code. Visual Studio fournit également un outil de débogueur que nous pouvons utiliser aussi bien comment nous l'avons fait avec Chrome. Mais tout d'abord, et des informations très importantes que vous devez faire avant de configurer le débogueur dans le code Visual Studio, vous devez désactiver Metro. Metro comment il est ouvert dans notre terminal automatiquement lorsque nous exécutons iOS, React application native. Donc, dans ce cas, nous devons fermer Metro. La même chose peut arriver avec Android. Alors fermons ça. Donc je vais juste arrêter ça ici. Comme en appuyant sur le Contrôle C ou le Commandement C. Et puis je vais le fermer complètement. Et comme vous le voyez ici, que nous n'avons plus de débogage et notre application ne peut pas être chargée et que nous avons maintenant une forme normale. Donc, dans ce cas, nous allons maintenant configurer un débogueur en utilisant Visual Studio Code. Alors, comment peut-on faire ça ? abord, vous devez aller à ce bouton. Nous pouvons dire courir et déboguer. Et puis vous trouverez ici quelque chose comme créer un fichier JSON Aidan et le fichier JSON de blanchisserie est le fichier où nous allons mettre la configuration pour notre débogueur. Donc, lorsque vous cliquez sur ce lien, alors vous obtiendrez quelques options. L' un d'eux doit être natif AC. Mais comme vous le voyez ici, je n'ai pas cette option car je dois installer l'extension de l'outil React Native, que je vous ai déjà dit. Voici les outils natifs de React. Donc, dans un cas où cela ne fonctionne pas, parfois il est demandé à geu de recharger. Ainsi, vous pouvez simplement recharger l'application ou cliquer sur recharger. Ou par exemple, vous pouvez simplement le désactiver et l'activer à nouveau, et vous aurez cette option. Donc, par exemple, j'ai encore ici juste pour être sûr que ça marche, ok, c'est bon. Maintenant, je vais cliquer sur l'outil de débogage et je vais créer, créer un long fichier JSON. Maintenant, j'ai l'option React Native. Donc, si vous n'avez pas cette option juste pour démarrer l'extension et vous l'aurez à nouveau, ok, vous cliquez sur React Native, alors vous obtiendrez d'autres options. L' un d'eux est attaché à l'emballer. Il existe plusieurs moyens de débogage, mais par exemple, attacher à packager est le plus facile. Donc, nous pouvons décocher celui-ci et l'ajouter à packager. Maintenant, je clique sur OK. Et il va générer pour moi un fichier, fichier JSON, où il a une configuration appelée attacher au packager. Et cette tentative de budget et de packager a quelques commentaires où cela fonctionnera avec mon débogueur. Ok, maintenant nous devons exécuter notre application. Nous n'allons pas exécuter notre application d'une manière comme nous l'avons fait auparavant. Comme, je n'irai pas à la ligne de commande et je dirai en px React Native ou un iOS ou non. Nous allons laisser le joindre à packager pour exécuter l'application pour moi. Donc, si je vais ici au débogage, Bien sûr, comme si vous êtes sur la liste des fichiers, vous allez à nouveau au débogueur. Vous aurez le bouton ici et ce bouton, il s'appelle run and debug. Et vous aurez plusieurs options. L' un d'eux est à cela pour emballeur. Il est basé sur la configuration que nous avons ici dans le prêt JSON. Et si vous êtes curieux de savoir où est ce long Jason est créé. Comme vous le voyez, il sera dans le dossier de code point v. Comme je vous l'ai déjà dit, que dans ce dossier, nous mettons une configuration que nous avons partagée avec l'équipe, comme je paramètres comme lancement, comme par exemple, une recommandation pour les extensions, etc Donc maintenant nous pouvons ajouter et exécutez notre application. Donc, nous allons cliquer sur courir. Et comme vous le voyez, il va exécuter l'application exactement comment Metro va. Si vous vous souvenez que nous avons le même signe ici et maintenant l'emballeur a commencé. Ok, gentil. Mais maintenant mon application qui n'a pas démarré automatiquement, vous devez donc le faire et l'exécuter automatiquement ou manuellement, désolé. Donc, il suffit de cliquer dessus. Et vous avez, bien sûr, comme je vous l'ai dit, l'application sera installée sur votre machine ou sur votre appareil et vous venez de l'exécuter. Et comme vous le voyez, comme l'attaquant est déjà sait qu'il ya un téléphone est en cours d'exécution de l'application. Donc maintenant, nous pouvons commencer à le déboguer. Ok, essayons de placer un point de rupture. Je vais mettre ici un point d'arrêt sur notre constante que nous avons créée avant. Par exemple, celui-ci, puis enregistrez. Donc, comme vous le voyez, le débogage commence à fonctionner. Donc, je vais maintenant étape par étape. Et ici, j'ai la valeur de x, exactement comment nous avions avec le Chrome. D' accord ? Parfois, le point d'arrêt ne fonctionnera pas pour vous car nous devons activer le débogage avec Chrome. Donc, je ne sais pas, ils l'appellent active le travail avec grown, mais ça devrait être comme seulement activer le débogage. Alors, comment nous pouvons activer le débogage, si vous vous souvenez, nous avons appuyé sur le raccourci, qui est le contrôle D ou la commande D sur Mac. Et parfois, vous devez appuyer plusieurs fois sur Control D parce qu'il n'apparaît pas. Rapide, donc vous devez le faire plusieurs fois jusqu'à ce qu'il arrive ici. Donc maintenant, après cela, vous voyez ici commencer le débogage avec Chrome et puis vous cliquez dessus. Si vous ne cliquez pas dessus, par exemple, je vais arrêter le débogage. Et puis d'accord, je dois continuer ma demande. OK, continuons. Vous voyez qu'il n'y a plus de réponse car elle n'est pas attachée au débogage parce que je ne peux pas maintenant déboguer mon application. Ce point d'arrêt ne peut pas voir ce qui se passe dans l'application. Il est donc très important d'activer le bug avec Chrome. Ok, c'est écrit avec Chrome, mais c'est avec tout ce qui est comme attaché à packager. Donc, nous pouvons juste ici, débogueur attaché ou débogage avec Chrome. Maintenant, je peux placer mon point d'arrêt, recharger l'application, je me suis arrêté sur le point d'arrêt. Donc, vous devez être sûr que deux choses. abord, fermez le métro, ce terminal, que nous avons fermé au début. Deuxièmement, vous devez activer le débogage ici dans les DevTools de l'application sont nous l'avons ici. Une autre information importante si vous voulez arrêter le débogage, car vous savez que le débogage rend l'application très lente. Donc, vous devez arrêter le débogage. Vous devez arrêter le débogage en faisant beaucoup de choses. abord, vous devez cliquer sur ce débogueur d'arrêt et également arrêté le débogage dans les DevTools comme vous le voyez ici. Et aussi, vous devez trouver un commentaire en appuyant sur F1 et la F1, vous devez rechercher React Native. Arrêtez l'emballeur. Il est très important de le faire parce que sinon le packager est toujours en cours d'exécution en arrière-plan. Et lorsque vous exécutez le paquet ou à nouveau, ou que vous exécutez une nouvelle application, il vous dira que le packager est déjà exécution et vous ne le saurez pas parce que vous avez tout arrêté et que vous l'avez arrêté à partir d'ici et c'est toujours en cours d'exécution et vous ne savez pas d'où l'arrêter. Donc, la meilleure façon de le faire est de faire et d'appuyer sur F1 et de trouver le packager d'arrêt à partir de la commande native React. Et puis il arrêtera le paquet ou totalement. Et vous serez en mesure d'exécuter, par exemple, l'application à nouveau aussi normale que nous l'avons vu dans le terminal. Ou vous pouvez l'exécuter à nouveau avec attaché au paquet ou en mentionnant l'erreur que je vous ai dit, peut-être que vous obtiendrez ce problème comme vous le voyez ici, que vous obtiendrez la somme. Un autre débogueur est déjà connecté au packager. Veuillez le fermer avant d'essayer de déboguer avec le code VS. C' est donc très important. Donc, vous devez aussi arrêter l'emballeur, comme je vous l'ai dit ici, arrêter cet emballeur, paquet ou arrêté. Et vous devez également vérifier le terminal. Tout va bien, tu n'as rien en cours. Et aussi que le méné alors, que nous avons utilisé ici. Donc, vous devez savoir ça ou brillant totalement. Donc je l'ai ici. Arrêtez. D' accord. Vous avez maintenant sur votre téléphone déconnecté de Metro et puis vous exécutez attacher à packager et l'application va fonctionner à nouveau. Donc, comme vous le voyez, je l'ai à nouveau en cours d'exécution, mais je n'ai aucune application. Vous avez donc juste besoin d'ouvrir à nouveau les DevTools. Et par exemple, peut-être que vous pouvez dire recharger l'application juste pour la reconnecter. Et aussi déboguer avec Chrome pour activer le débogage avec des points de rupture. Donc, tous ces dépannages, vous devez prendre soin. Regardez cette vidéo plusieurs fois. Si vous avez des problèmes, alors vous saurez comment déboguer avec VS Code. 18. Aperçu de l'API de données de films de l'API: Ok, maintenant nous commençons la deuxième section après avoir préparé notre vitamine et ajouter installé ce qui est requis de nous. Tout d'abord, nous avons besoin d'une API, nous avons besoin d'une donnée, nous avons besoin d'images des films. On doit filmer une vidéo du film. Donc, pour cela, nous avons besoin de quelque chose appelé API. Et l'API nous fournira une liste de données sous forme de données JSON, que nous pouvons utiliser dans notre application et montrer comment il a vu ici sur le site. Il existe un site Web qui s'appelle le film db.org ou le film database.org, qui offre cette API. Donc, comme vous le voyez ici, nous avons la liste des films est juste aller. Quelques critiques sur les films est juste montrer comme quelques images qui sont les acteurs et quelqu'un vues, et cetera. Je vais donc utiliser l'API de ce site Web. Et encore une fois, nous allons afficher cette information mais sur l'application mobile. Mais bien sûr, si vous voulez construire votre propre framework, vous devez construire une API. Et en construisant une API, vous pouvez utiliser plusieurs technologies backend, comme par exemple, NodeJS, tous C-Sharp. Même vous pouvez utiliser une Firebase. Mais pour le rendre rapide, parce que nous sommes spécialisés ici en avant et, et le développement mobile. Nous ne sommes pas des développeurs back-end. Nous allons utiliser cette API qui est déjà implémentée. Et si vous voulez savoir comment construire une API qui est comme basée sur le dos et basée sur Node.JS. Vous pouvez suivre à ma page où c'est des bits bleus par Dev, j'ai un cours complet sur la construction d'une API web e-commerce complète. Cette API vous le ferez, ou dans ce projet, vous apprendrez comment construire l'API par vous-même. Dans notre cas, ce sera comme l'API d'un film. Vous êtes, vous pouvez les stocker des films, par exemple. Faites-les toujours un filtrage de toutes ces informations. C' est donc un vrai projet pratique avec le commerce électronique, mais aussi, vous pouvez savoir comment télécharger des images, comment créer les API, et comment les sécuriser. Pour notre cours, nous allons utiliser l'API qui est fournie sur ce site, qui est gratuit et disponible pour tout le monde. Tout d'abord, nous devons cliquer sur Join, CMDB. Nous devons nous y inscrire et créer un compte pour avoir accès à leur API. Je vais donc remplir ce formulaire rapidement. Et comme vous le voyez ici, j'ai rempli mes données et je vais m'inscrire. Et après cela, vous recevrez un e-mail et transmettrez cet e-mail dont vous avez besoin. Vérifiez votre compte, donc vous devez aller à l'e-mail. Vous y obtiendrez un lien, puis vous cliquez sur le lien et votre compte sera vérifié. Donc, je vais maintenant à mon email. J' ai reçu des informations selon lesquelles mon email a été vérifié. Donc, je vais maintenant me connecter. Donc, ici, nous avons déjà l'écran. Je vais mettre mon mot de passe à nouveau et ensuite regarder dans. Alors regardons après que mon application ou notre compte a été créé. Donc maintenant, j'ai le compte est créé. Nous pouvons aussi bien utiliser l'API pour cela. Donc, comment nous pouvons commencer à utiliser l'API, c'est très facile. Tu sais que l'EPI, c'est quelque chose comme un lien. Et ce lien, vous pouvez l'obtenir et vous pouvez obtenir des données à partir de lui, comment nous pouvons utiliser ce lien ou comment nous pouvons le trouver. Tout d'abord, vous devez aller aux paramètres de votre profil. Vous devrez donc cliquer ici, puis vous cliquez sur Paramètres. Et après ces réglages, vous voyez que j'ai toutes mes informations. J' ai quelque chose appelé API. Et pour l'API, nous devons demander une clé API. Ok, passons d'abord, la documentation de cette API. Il a dit que notre documentation principale se trouve à ce lien. Donc, vous allez à ce lien et comme vous le voyez ici, nous obtenons toutes les informations et toutes les étapes, comment nous pouvons utiliser cette API. Maintenant, je vais vous montrer ces pas rapidement. Donc, tout d'abord, nous devons aller à notre compte là-bas, puis API. Et puis je veux générer ou demander une clé d'API parce que chaque API a besoin d'une clé. Vous permettre, vous pouvez choisir l'option développer parce que nous sommes des développeurs et nous allons utiliser cette API. Et nous disons que notre projet à but non lucratif. Nous devons donc approuver un accord afin que nous puissions lire toutes ces informations et ensuite nous pouvons accepter cela. Et après cela, quel type d'utilisation. Vous devez donc savoir quel est le type d'utilisation pour votre application. Par exemple, je dis une application mobile, ou par exemple, une application de bureau ou un site Web. C' est à vous de décider. Pour l'instant, je vais utiliser une application mobile, par exemple. Nom de l'application. Nous pouvons dire Movies application par juste un nom, ce qui est simple. Et puis vous cliquez sur Soumettre. Et après cela, vous avez une notification que vous devez remplir tout le formulaire. Je vais donc le remplir rapidement devant vous et je clique sur Soumettre. Donc, je me sens en bas toutes les informations requises. J' ai juste mis en face de vous des informations aléatoires pour la vie privée. Donc, je vais mettre soumettre. Donc, s'il est dit ici, l'état de l' adresse ne peut pas être vide. Donc, je peux mettre ici état un, et ensuite nous pouvons cliquer sur Soumettre. Nos changements ont été faits, puis j'obtiens une clé API. Cette clé API, vous pouvez l'utiliser pour obtenir des données de la base de données de ce site Web. Ainsi, par exemple, il y a un exemple ici, les requêtes API. Nous pouvons donc prendre cette URL, ce lien, et ensuite nous pouvons aller à Postman ou tout autre outil où vous suivez ou voyez une donnée. Par exemple, vous pouvez également utiliser cette URL dans le navigateur. Donc, par exemple, je vais aller ici et puis je vais mettre le lien sur le navigateur. Et comme vous le voyez, j'ai plusieurs données et informations sur un film. Donc, par exemple, je reçois des chutes d'adultes, toutes ces informations pour ça. Comme vous le voyez ici, cette API est moche. J' utilise donc un outil qui s'appelle Facteur. Donc, ce post-argent, vous pouvez le télécharger à partir de leur site d'origine. Alors j'irai ici. Et comme vous le voyez, nous avons sur Google le premier lien. Et dans le premier lien, vous pouvez installer et télécharger un facteur. Ou si vous ne trouvez pas le lien facilement, vous pouvez aller directement ici sur Google pour télécharger Postman, puis vous aurez télécharger l'application directement en fonction de votre système d'exploitation. Donc, après avoir téléchargé le facteur, comme vous le voyez ici, j'ai eu cette vue ou l'écran. C' est donc un facteur que nous allons utiliser ou tester notre API. Donc, je vais ouvrir un nouvel onglet. Et cet onglet me montrera plusieurs méthodes pour GET, post, PUT, etc. Toutes ces informations sont des informations que je vais expliquer pour obtenir les données. Nous sommes GET demande, nous faisons une demande get. Donc, alors vous venez de coller l'URL ici. Comme vous le voyez, l'API est un lien qui est fourni et il suffixe toujours avec la clé API. Et cette clé API, ce que nous avons pour notre compte. Donc, après avoir collé cet exemple API, nous pouvons ensuite cliquer sur Envoyer. Et quand j'envoie une demande, alors j'obtiendrai toutes les données sur, par exemple, un film. Et ce film s'appelle Fight Club. Et il y a une description sur la popularité du film et toutes ces informations et critiques dans les pays, exécution, la langue parlée, toutes les données dont j'ai besoin. Et ce sont exactement les mêmes données que vous voyez sur leur site principal. Donc, par exemple, j'irai ici et je vais vérifier Fight Club, qui est comme un film. Ou nous pouvons cliquer sur n'importe quel film, par exemple, les Simpson. Et puis vous voyez la description aperçu, et vous voyez qui sont l'acteur. Tout cela vient avec l'API, que je vous ai montré maintenant dans le facteur. Donc, pour cela, vous devez aussi utiliser cette API dans votre application pour afficher, par exemple, comme vous voyez aussi une image afin que l'utilisateur puisse cliquer dessus et voir quelques détails. Ok, jetons un oeil à la documentation de cette API. Comme vous le voyez, il y a beaucoup d'informations dont vous avez besoin. Ainsi, par exemple, il y a des films et des films à l'intérieur, il y a beaucoup d'informations comme obtenir des images, obtenir des crédits, de bons changements. Raid film par exemple, obtenir les derniers films, obtenir maintenant jouer des films qui sont, par exemple, je veux obtenir des films populaires et des films populaires. Comme vous le voyez, allez essayer. Vous verrez le même lien ici. Donc, pour tester cette API, vous avez juste besoin de copier toute cette URL, aller à Postman, puis placez-la ici. Et puis vous devez remplacer cette clé d'API entre toutes ces flèches par votre clé. Donc, je vais à nouveau sur mon compte. Et puis je vais copier la clé API. Et puis j'irai remplacer par cette clé d'API comme vous le voyez ici. Maintenant, j'ai toutes les informations. Il a d'autres informations comme la langue et les pages parce que ce sera plusieurs pages, comme la page 1, la page 2, etc. Donc, nous allons cliquer envoyer et attendre la réponse. Joli. On a une réponse. Nous avons plusieurs pages ou plusieurs résultats similaires. L' un ou l'autre est le premier film et le deuxième film, troisième film, comme vous le voyez ici. Et chaque film a comme un nom ou un titre et il a comme une image et un aperçu. Jusqu' à présent, vous devez toujours suivre la documentation pour obtenir ce que nous voulons. Et pendant le cours, je vais utiliser cette documentation pour remplir ce dont nous avons besoin pour notre application. Donc, ce qui est requis de vous maintenant, il suffit de vous inscrire sur ce site Web, de créer une clé API, puis nous allons passer à cette documentation. Et nous verrons dans la prochaine conférence lors de la construction de notre application. 19. Créer un projet d'application de films: Ok, maintenant créons un nouveau projet. Le projet que nous avons vu précédemment que nous avons créé un projet Hello World ou quelque chose comme le projet de cours, que nous avons vu dans l'introduction. Mais maintenant, nous allons créer un nouveau projet pour notre application de films. Pour ce faire, nous faisons la même étape. Nous ouvrons le terminal en cliquant sur Control J. Et puis nous allons écrire la commande MP x React Native dedans, puis le nom de votre projet. Mais avant cela, nous devons savoir où sommes-nous. Donc maintenant j'ouvre le terminal ay, vous devez créer un dossier. Donc, je préfère créer le dossier sur mon bureau. Donc, disons, par exemple, de savoir que j'utilise maintenant le système Mac. Bien sûr, lorsque vous êtes sur Windows, vous verrez le dossier dans lequel vous ouvrez Visual Studio Code. Mais maintenant, je viens d'ouvrir Visual Studio Code. Je ne suis dans aucun dossier parce que si vous cliquez ici, il n'y a rien. Donc, tout d'abord, on peut ouvrir le terminal et vérifier où en sommes-nous ? Donc, je vais taper LS, comme la liste pour moi, les dossiers où je suis. Donc j'ai ici tous ces dossiers. Je vais au bureau. Ainsi, vous pouvez dire bureau et vous appuyez sur Tab, il fera auto-complétion. Et puis vous pouvez dire clair, comme vous pouvez effacer l'écran. Maintenant, vous êtes sous le répertoire Bureau. Donc, créons maintenant un nouveau répertoire. Nous pouvons lui donner un nom, Par exemple, projets ou par exemple, applications en général, comme où vous allez faire vos applications. Donc, je vais le donner pour l'examen faire dire, qui est la création d'un répertoire. Il va créer pour moi un dossier sur mon bureau et je vais lui donner un nom, des applications, pas seulement cela. Alors maintenant je vais dire CD, comme l'accès, les applications. Comme je suis maintenant sous Applications ici, je peux mettre ma commande native React, comme nous l'avons vu précédemment pour créer une application. Alors, comment nous pouvons le faire et px React Native, puis en elle. Et puis je donne un nom pour l'application. Par exemple, je vais donner des films à, dans ce cas, je vais courir et il va télécharger pour moi modèles et tous les fichiers requis comme nous l'avons vu précédemment dans l'introduction. Donc, je vais sauter cette vidéo et revenir vers vous quand tous les fichiers seront installés. Ok, donc maintenant mon application a été installée et nous avons maintenant leurs recommandations pour lesquelles nous nous sommes habitués. Donc, je vais aller ou naviguer vers le répertoire. Je dirais cd, application de films. Et puis je vais aller à l'intérieur de l'application cinéma. Soyons sûrs que nous sommes à l'intérieur. On tape ls, ok, on est à l'intérieur. Alors maintenant, ouvrons le projet dans le code Visual Studio. Donc, je vais aller ici et puis je dirais Ouvrir le dossier. Je vais aller dans mon dossier, dans les applications de bureau, puis je vais choisir l'application de films, puis ouvrir le projet. Donc, comme vous le voyez ici, nous avons tous les dossiers dont nous avons parlé auparavant. Alors ouvrons à nouveau le terminal, MP x, React, Native, puis exécutez. Donc, ici, vous pouvez choisir un système sur lequel vous voulez travailler. Dans ce cours. Je vais travailler sur le système iOS. Et bien sûr, quand nous aurons terminé l'application, je vais vous le montrer sur Android aussi. Alors exécutons l'application sur iOS. Donc mon simulateur par où commencer. Et puis nous serons en mesure de l'utiliser et de voir l'application que nous avons créée. Donc, notre application est en cours d'exécution maintenant comme vous le voyez sur le système iOS. Donc, ce que nous devons faire pour remplacer tout leur code par défaut que nous avions ou avions créé ici, et le remplacer par quelque chose comme Hello world. Si vous vous en souvenez, nous avons créé une application qui s'appelle Hello World. Et pour récupérer le code de cette application, vous pouvez aller à la documentation de React Native, puis vous dites introduction. Et puis dans l'introduction il y a une application helloworld. Vous pouvez l'utiliser pour le démarrage dans ce projet. Donc, tout d'abord, je vais copier ce code. Il existe deux types de style de code de style React Native. Pour qu'on puisse utiliser l'un d'eux. Pour moi, je préfère utiliser le composant de fonction car il est plus court et plus facile à lire, pas comme un composant de classe. Ainsi, vous pouvez à vous, vous pouvez choisir l'un d'entre eux. Composant de fonction. Prenons celui-ci et prenons tout ce code. Revenez à notre Visual Studio. Faisons l'écran comme normalement je développe d'une manière comme je mets cet écran comme cette petite taille. Et voici l'application. Et aussi nous faisons cela plus petit ici. Pour que nous puissions travailler avec plus de liberté. Donc, dans le app.js, Supprimons tout et mettons ici notre code. Et puis nous sauvegardons à notre application sera érodé et redémarré et vous pouvez commencer à coder ici. Donc, si vous vous souvenez que nous avons mis en place tout comme plus joli, toute la configuration que nous sommes nécessaires pour le codage dans React Native. Donc, tous, ils ont configuré par défaut, vous pouvez ajouter votre configuration comme vous le souhaitez. Donc, ici, nous avons l'application de l'application. Supprimons tout cela et renommez-le, par exemple, en application uniquement. Comme vous n'avez pas besoin d'avoir l'application Hello World, ce n'est pas sympa. Donc, nous pouvons simplement renommer tous ceux-ci pour ajouter dans index.js. Vous y allez et vous assurez-vous juste que vous importez l'application uniquement et tout fonctionnera bien. Donc, nous économisons, nous avons app.js et maintenant nous sommes prêts pour le codage. 20. Créer des films populaires de services de données: Ok, nous avons vu avant comment nous pouvons récupérer des données de l'API de films, que nous avons construit précédemment, ou que nous avons obtenu de la base de données des films. Donc, comme vous le voyez ici, j'utilise Postman et ce facteur, par exemple, j'utilise l'une des API pour récupérer des films populaires. Et les films populaires sont retournés de cette façon. Il y a donc un champ appelé page pour référencer le nombre de pages que nous avons et aussi leurs résultats. Donc, à l'intérieur, c'est tout, ce sera un tableau de films. Donc, ce que nous allons faire maintenant que nous devons afficher, par exemple, la liste des noms de films populaires qui proviennent de cette API. Donc, pour ce faire, nous devons utiliser un service. Et en utilisant un service pour récupérer des données de l'API, nous avons besoin d'une bibliothèque appelée axe. Donc, nous allons au terminal et nous devons installer une bibliothèque qui s'appelle axe. Et cet axe, vous pouvez l'installer par MPM ou NPM installer puis axiom. Donc, après l'installation de ceci, assurez-vous que vous êtes dans le dossier de votre application dans le même niveau de package Jason. Et vous allez vérifier le paquet Jason, vous verrez que l'axe est ajouté. Donc, après cela, nous pouvons utiliser des axes facilement. Alors, comment utiliser les axes ? Allons au app.js. Et ici, nous pouvons dire d'importer des axiomes de l'axe. C' est donc très facile parce que nous l'avons déjà installé. Donc, je peux dire l'axe d'importation de l'axe. Donc, avant d'ouvrir l'application, je vais ici et je définit une constante comme en général. Et je lui ai donné un nom, par exemple, obtenir des films populaires. Et ce sera une fonction définissant une fonction sera de cette façon. Donc, nous pouvons dire que nous avons une fonction de ligne, comme nous l'avons vu avec la fonction de l'application. Donc, l'application est fonction flèche et il est ouvert de cette façon. Et tu peux faire ce qu'il y a dedans. C' est comme la fonction et ensuite obtenir des films populaires. Et puis j'ai ouvert ces taxes. Donc c'est exactement de la même façon. Mais ici, nous le faisons d'une manière différente parce que nous utilisons le script e-commerce ou ES6. Nous devons donc nous habituer au style des fonctions. Donc, je veux stocker la liste renvoyée des films populaires dans certaines variables. Donc, j'ai ici constante. Et j'ai donné cette constante comme un nom. Nous disons réponse, qui est la réponse qui vient de l'API comme celle-ci. Et puis je vais avoir la réponse en utilisant l'axe. Donc, je vais avoir ici axe, que j'ai importé ici. Axioms se comporte comme Facteur que l'on peut dire en arrière-plan. Parce que je donne un GET ou un post ou les deux, ou supprime quoi que ce soit de l'API. Donc, nous allons utiliser get. Donc, quand vous mettez un point, alors vous obtiendrez ici plusieurs méthodes. L' un d'eux est obtenir. Donc, pour obtenir les données, comme vous le voyez, il me demande de fournir l'URL et cette chaîne d'URL. Si vous vous en souvenez, nous l'avons déjà et nous avons vu comment nous construisons cette URL. Nous l'avons obtenu à partir de l'API des films et nous avons passé la clé API entre elle. Donc maintenant je vais utiliser ce lien et je n'ai pas besoin d'avoir les autres paramètres comme la langue EN nous à moins que si vous voulez avoir une langue différente des films pour l'instant, je vais juste l'utiliser comme ça. Donc, je vais prendre l'URL principale de l'API, puis des films populaires. On a vu comment on l'a déjà fait. Et puis la clé API. Donc, je vais copier cette partie et ensuite revenir au code. Et ici, je vais placer la même chaîne que j'ai obtenu de l'API des films. Donc on place ce verre. Et puis la meilleure façon de savoir si nous recevons vraiment une réponse. Nous avons utilisé le journal de la console, journal de recherche, puis le REEE, et c'est tout. Voyons donc quel axe revient pour moi. Mais d'abord, où je peux appeler ce missile, devons-nous appeler cette méthode lorsque l'application est en cours d'exécution ? Donc, si vous vous souvenez, nous avons consolé globe quelque chose avant le retour et il était exécuté chaque fois que je recharge ou actualise l'application. Donc on peut l'utiliser ici. Donc, je peux dire obtient des films populaires, la même méthode que j'ai créée ici. Alors, sauvegardons tout. Et maintenant, après avoir enregistré l'IC que l'application est chargée, mais nous avons besoin de voir le journal de la console à l'apparence de la console est dans le terminal. Si vous vous souvenez, notre terminal, nous avons créé et il est ouvert automatiquement lorsque nous exécutons l'application. Donc je vais le rendre plus grand pour voir ces données. Et comme vous le voyez ici que nous devions null parce que nous disons ici, comme nous obtenons une API ou une réponse, mais c'est vide. C' est totalement vide. Nous ne recevons rien comme si vous étiez 0 quelque chose et compréhensible. Nous avons donc besoin d'obtenir les bonnes données. Cela parce que cette méthode, ceux-ci obtiennent des films populaires est exécuté avant cette getMethod, qui est fourni par axe. Parce que cette méthode, vous devez fournir comme attendre jusqu'à ce que cela se produise, et alors nous pouvons console la réponse. Donc, la réponse ici ne reçoit rien de l'axe parce qu'elle n'est pas encore terminée. On a besoin d'un temps, on doit attendre. L' API OK, m'a répondu et puis je peux continuer à leur journal de la console. Alors, comment nous pouvons résoudre cela, nous devons utiliser JavaScript asynchrone. Nous pouvons ajouter un mot-clé avant les axes dot obtenir. Nous pouvons dire comme Attendre, attendre jusqu'à ce que la réponse soit prête, puis continuer avec le code. Alors comment nous pouvons faire cela, nous disons juste ici, attendre mot clé. Ce mot-clé wait est réservé en JavaScript, mais il nécessite quelque chose que la méthode conteneur, qui est celle-ci, doit être un puits. Nous devons le rendre asynchrone comme comment nous pouvons dire comme c'est la méthode synchronisée de glace, c'est du JavaScript isochrone. Nous devons attendre la réponse ici. Nous devons donc rendre cette méthode asynchrone. Alors sauvegardons ça. Et puis notre application sera rechargée. Allons au terminal. Et vous voyez qu'on a toutes les données. Nous avons toutes les données dans le journal de la console exactement comment nous les avons dans Postman. Donc, il nous montre que toutes les données sont à venir, ce qui comme nous le voulions avec des données supplémentaires. Et comme vous le voyez, c'est un peu sale. Nous devons l'aligner car il vient en JSON et nous devons aligner ces données JSON, comment elles arrivent dans le back-end. Donc, pour voir la réponse telle que nous l'avons dans Postman, comme vous le voyez ici dans le journal de la console, nous pouvons faire comme un truc qui sera en JavaScript. Donc, je peux utiliser une bibliothèque JSON. Donc, il s'appelle JSON ou avec lettre majuscule, puis stringify. Et cette méthode stringify, je peux entourer leur réponse autour d'elle, mais vous devez avoir des paramètres supplémentaires qui sont nulles comme ceci. Et puis la valeur, une valeur qui est un espace qui sera 2. Donc, de cette façon, il donnera un format pour le JSON exactement comment nous le voyons dans Postman. Donc, je suis une chaîne de poussière définissant la réponse. Et je veux l'afficher en quelque sorte plus stylé et formaté. Donc, lorsque vous enregistrez et allez à nouveau au terminal, nous verrons que la réponse fonctionne par cela. Ainsi, vous pouvez voir la réponse JSON de manière plus agréable. Donc, de cette façon, nous sommes prêts à saisir l'API. Mais d'abord axiome met des données supplémentaires sur l'API. Donc, par exemple, vous mettez des données et puis il a mis une autre information sur l'API, sur les en-têtes dont nous n'avons pas besoin et dont nous ne nous soucions pas. Donc, nous devons obtenir seulement les données parce que les données ne retourneront pour moi que la page et les résultats dans la mesure où, comme vous le savez, nous avons besoin de vérifier comment la réponse contenait. Donc ce qui contient, donc je, j' ai mis point et comme vous le voyez ici, cet axe a retourné pour moi des champs supplémentaires pour cette réponse. L' un d'eux est des données. Ici, les données sont stockées des données qui proviennent de l'API. D' autres choses comme les en-têtes de statut, nous les verrons. Nous verrons comme par exemple, le statut de 0 pour comme l'API introuvable, et cetera. Donc, pour l'instant, je vais obtenir seulement les données qui entrent dans cette réponse. Disons d'aller à nouveau au terminal pour vérifier si tout va bien. On va à notre terminal. Ok, gentil. Nous recevons maintenant seulement les données, mais c'est une liste très longue. Prenons un film. Donc ici, si vous vous souvenez, je reçois les données et à l'intérieur des résultats, c'est tableau. Et à l'intérieur de ce tableau contiendra des films. Donc, chaque membre de ce tableau est un film. Prenons le premier. Donc, je vais revenir au code et puis je dirai ici, ne revenez pas pour moi, toutes les données retournées pour moi, les résultats. Ok, vous ne pouvez pas trouver ici les résultats parce que les données sont toutes, elles sont inconnues. Nous ne pouvons pas voir dans l'éditeur ce que l'API est très minuscule retour. Donc je dois m'assurer que ça va, j'obtiens des résultats. Et puis exactement comment on a été gaufré homme ou dans le terminal. Et puis j'aurai le premier résultat. Pour obtenir des résultats pires, nous mettons ces balises de tableau et nous mettons 0. Donc, première entrée de ce tableau. Alors je vais au terminal. Encore une fois, nous allons à la fin. On peut voir le lobe ici. Donc ça veut dire qu'il a commencé un nouveau journal. Et dans ce journal, tu vois qu'on a un film. Donc c'est très génial. Maintenant, nous sommes prêts à afficher ce film dans notre application ici. 21. Affichage de données de film: Ok, Donc maintenant, au lieu d'afficher bonjour monde, affichons un film et le film qu'on a dans la console. Nous allons l'afficher ici. Ok, Tout d'abord, nous devons faire la distinction entre le modèle ou le modèle de React Native et le code JavaScript. Donc, de cette façon, quand je reçois des données via un service, je veux les afficher dans le modèle. Comment nous pouvons faire ça. Je ne peux pas faire comme ça. Par exemple, je vais ici et je mets la méthode ici et puis ok, que, que j'ai été affiché. Non, ce n'est pas possible comme ça. Nous devons d'abord obtenir les données à notre application, qui est dans la fonction AP, puis afficher les données qui sont retournées à partir de l'API ou du service lui-même. Donc, tout d'abord, nous devons retourner les données. Donc, au lieu de consigner les données, je veux retourner ces données. Donc, nous pouvons dire de cette façon retourner et les données que nous n'avons plus besoin de la stringify JSON parce que nous l'avons utilisé seulement pour styler ce code dans l'ordre de sortie dans le journal de la console. Maintenant, nous avons plus et le film retourné par cette méthode. Ou nous pouvons appeler cette méthode obtenir film populaire, mais maintenant nous avons des films. Alors retournons d'abord tous les films. Donc, cette méthode reviendra pour moi des films populaires. Mais cette méthode, Comment maintenant je peux l'utiliser dans l'application. Donc, si je vais maintenant ici et je dis point après la méthode, après que je l'ai appelé, je vais arriver ici, parce que ce film est maintenant de retour une promesse. Pourquoi ça rend une promesse ? Parce que je l'ai utilisé comme méthode asynchrone. Et les méthodes asynchrones, retournant des promesses. Promets, comme je te promets de te donner des données une fois que je les aurai. Donc ici, cette méthode, elle nous promet avec git agit années lorsque les données sont prêtes, alors elle nous les retournera. Et puis est une fonction de rappel. Ainsi, nous pouvons utiliser le rappel pour obtenir les données qui sont retournées à partir de cette fonction. Donc je peux faire ici comme un truc comme on peut dire des films. Et après cela, c'est une fonction de rappel. Donc, nous pouvons utiliser une méthode de ligne pour récupérer les films. Donc on peut juste, pour un test rapide, je veux juste consigner ici. Donc pour être sûr que je reçois vraiment les films ici. Alors prenons aussi le premier film, car ici nous avons retourné seulement les résultats. Donc après ça, je vais au journal de la console, ok, tout va bien. J' ai eu le premier film. Ok, maintenant notre affaire est juste de remplacer ce Hello World, par exemple, par le nom du film. Comme je veux utiliser le champ de titre original. Donc, je veux seulement imprimer le titre original afin que je puisse dire original et soulignement serré. Ok, maintenant, comme vous le voyez dans le journal, je n'ai que le titre original. Ok, donc en quelque sorte nous devons remplacer ce HelloWorld par la méthode ou quelque chose de précieux que je peux créer. Par exemple, je peux lui donner un nom comme titre. Et ce titre aura, par exemple, au départ, un titre. Donc, si je veux utiliser cette variable à l'intérieur du texte ici, donc au lieu de bonjour monde, je peux le mettre ici, mais pas seulement le titre, mais nous pouvons l'entourer de crochets incurvés. Donc ici, je peux faire un parenthèses incurvées. Et puis j'ai scanné dire ici par exemple, nom du film. Ok, j'ai ici le titre, nom du film est imprimé ici. D' accord ? Maintenant, si je vais et je dis, ok, ne conservez pas le journal mais faites le titre est égal au nom du film ou au titre original du film. Quand je sauve, alors je verrai que je reçois toujours le nom d'origine. Et c'est comme si elle n'était jamais allée ici. C' est comme le titre, ça ne change pas. Donc, quand je recharge l'application save, c'est toujours sur le nom du film. Le problème ici est que le titre est défini après l'initialisation du modèle. Donc peut-être que cela est alors exécuté après Le titre Gut initialisé dans le modèle et rendu et affiché. Nous avons donc besoin de mettre à jour le titre. Même le modèle est chargé. Donc, pour cela, nous devons utiliser quelque chose appelé état React natif. L' État est très important. Nous n'utilisons pas de variables normales comme celle-ci. On utilise l'état. Donc, tout ou toute variable que vous voulez créer et afficher dans le modèle, vous devez l'utiliser comme un état, surtout lorsque cette variable est mise à jour après un certain laps de temps. Alors comment on peut le faire pour définir un état, je vais utiliser la même chose. Donc nous pouvons dire const. Et puis j'ouvre un tableau, et ce tableau aura deux choses. Par exemple, le nom de la variable que vous souhaitez créer. Par exemple, je vais donner un but comme un film. Et le deuxième paramètre de notre deuxième élément de ce tableau sera de définir le film. Donc je veux faire du tournage. Donc, ce sera une méthode où je vais utiliser dans mon application et l'utiliser ici lorsque les données sont prêtes. Donc nous pouvons aller ici et dire Equal pour utiliser l'état, utilise la date. Il va être importé de réagir. Donc c'est quelque chose d'interne dans React. Donc, nous allons utiliser cette valeur comme une variable d'état afin qu'elle puisse être mise à jour après que j'ai fait, par exemple, le rendu ce modèle. Donc pour ça, je vais ici, je n'utilise plus de titre. Je dis juste jeu titre ou sets film. Et ce film, nous n'aurons pas seulement le titre parce que nous allons utiliser un titre ailleurs. Donc, nous avons mis le premier film qui revient du service pour mettre le film. Dans ce cas, film, nous aurons un état ou il a une valeur du premier film qui est renvoyé par le service. Donc, quand je vais ici au film et le remplacer ici, puis nous enregistrons, nous aurons une erreur parce que toujours un état que vous devez initialiser en quelque sorte. Ce n'est pas toujours, mais il vaut mieux l'initialiser. Donc maintenant, par exemple, je peux l'initialiser avec une chaîne vide. Donc, cette date ou ce film sera initialisé comme une chaîne vide. Bien sûr, nous allons voir comment nous pouvons gérer cela de manière différente, mais nous allons étape par étape. Alors maintenant je sauve, mais nous recevons toujours une erreur. Il dit que les objets ne sont pas valides dans React enfant car ici film est défini sur un film et ce film est un objet. Si vous vous souvenez, facteur, ce film est un objet, contient auteur adulte, vous un aperçu, popularité, et cetera. Nous devons donc utiliser un des champs de ce film. Donc, je vais dire ici, ce film point titre original. Donc je veux un champ de ce film. Donc, quand je recharge l'application et enregistrer, je vais voir que j'ai obtenu le titre du film. Ok, tu peux ajouter une autre chose. Par exemple, nous pouvons ajouter, comme nous pouvons le dire, vérifions les champs ici en langue Bozeman. Ok, on ne peut pas avoir la langue originale et on peut l'afficher ici. L' impie et puis E n. Bien sûr, vous pouvez mélanger aussi avec les cordes de sorte que vous pouvez dire nom du film. Et ce sera quelque chose comme l'impie. Et aussi la langue. Vous pouvez dire que ce sera e n. Ajoutons un autre champ de texte. Par exemple, prenons dupliquer celui-ci. Et par exemple, nous allons à notre API et nous obtenons la date de sortie. Et on va à la date de sortie, on le met ici. Et nous pouvons taper ici release. Et nous allons recharger l'application et nous verrons la date de sortie est là. Donc, dans ce cas, nous avons utilisé l'état, ce qui est très important parce que l'état définit automatiquement la variable après un certain temps ou la période de temps, je veux dire, voici les données du serveur . C' est ainsi que nous affichons les données de l'API à notre application. 22. Utiliser des effets: Après la conférence précédente et peut-être vous avez remarqué que le CPU de votre PC a obtenu un plus élevé et il utilise beaucoup de ressources en raison du changement que nous avons fait précédemment. J' ai donc fait une conférence séparée pour cela parce qu'il est très important avant de commencer notre projet de connaître ce problème. Donc, comme vous le voyez ici, nous avons notre application Movi dans mon moniteur d'activité ou dans le Gestionnaire des tâches sous Windows, vous verrez qu'elle utilise 183% du CPU. C' est parce que nous avons fait la gestion de l'Etat sans utiliser les effets. Affecter est quelque chose pour vous permettre d'effectuer des effets secondaires dans un composant de fonction, ce qui est comme refléter la relation entre le DOM et aussi cet état de votre application. C' est très important lorsque vous utilisez des méthodes asynchrones et que vous êtes assis domaines ou définissez une variable, vous choses succession, vous devez utiliser des effets. Alors, comment peut-on utiliser ces effets ? Normalement, les effets peuvent être utilisés après avoir défini les variables d'état. Donc, vous allez juste ici et vous pouvez dire exactement comment nous avons fait ici utilise l'état, vous allez utiliser l'effet. Donc on peut dire utiliser l'effet. Je l'explique en mots plus simples si vous n'êtes pas familier avec React. Donc maintenant, nous avons cet effet énorme. Il aura une fonction de rappel ou une méthode de rappel, qui contiendrait et exécuterait pour moi l'API que j'ai obtenue ou le service que j'ai créé pour définir un film. Donc toujours avec cette FH King configuration abonnement et changements manuels dans le dortoir avec React nécessaire pour utiliser les effets. Il est donc préférable de les avoir n'ont pas de boucle illimitée entre le DOM et aussi la gestion de l'état dans React. Donc, les effets ne fonctionnent qu'une seule fois pour s' assurer que nous n'obtenons les données qu'une seule fois. Donc, pour cela aussi, vous devez passer un paramètre qui arrive à la fin en tant que deuxième paramètre OF US fonction d'effet, qui sera un tableau vide. Donc, si vous voulez mettre à jour les données ou appeler cette fonction asynchrone plusieurs fois, vous pouvez spécifier l'heure ici. Je veux mettre à jour mes données toutes les 1 secondes. Ainsi, vous verrez dans votre application ces données sont récupérées à partir de la base de données ou de l'API toutes les 1 secondes. Pour l'instant, nous n'avions besoin d'être exécutés qu'une seule fois. Et l'effet d'utilisation vient aussi bien de réagir exactement comment nous allons utiliser la succession. Alors sauvegardons cela à nouveau et rechargeons l'application. Et vous verrez maintenant comment mon moniteur d'activité se calme. Donc, comme vous le voyez ici, application film utilise maintenant 0,3% du processeur. De cette façon, nous faisons ce qu'il faut. Sois prudent. Vous devez toujours utiliser les effets pour faire la bonne gestion des états entre le DOM et votre état dans l'application de React Native lorsque vous voulez vérifier les performances de votre application. Par exemple, pour voir combien de mémoire il utilise et combien, par exemple, quelles sont les requêtes qui y sont acheminées. Il est donc préférable d'utiliser l'outil qui est fourni ici avec les outils de développement. Vous pouvez ainsi surveiller votre réseau ainsi que vos performances. Donc vous avez juste besoin au téléphone pour appuyer sur Control D. Et sur Control D vous verrez un inspecteur court. Donc, avec Show Inspector, vous verrez plusieurs choses. L' un d'eux est le réseau. Ainsi, par exemple, lorsque je recharge l'application, je verrai que mon application envoie une requête à cette API. Et puis lorsque vous cliquez dessus, vous verrez les détails de celui-ci. Il est donc très important de l'utiliser pour savoir ce qui se passe là-bas. Donc, je veux vous montrer comment, ce qui se passera quand je mets cette méthode, que j'appelle les données pour en dehors des effets, comme comment nous l' avons fait, comment cela a été fait avant. Et je vais vous montrer comment il fait ça. Temps illimité. Donc, quand je clique dessus, vous voyez que c'est illimité. Il demande des données du serveur, ce qui est totalement faux. Arrêtons vite de ne pas avoir de problème ici. Donc maintenant, si nous voyons que nous n'avons plus cette boucle. En outre, il y a quelque chose d'autre que vous pouvez appuyer sur Contrôle D à C aussi le moniteur de performance. Il vous montrera toujours combien d'application ou votre application fonctionne ici, ce qui est très utile, bénéfique pour votre application. Ainsi, vous pouvez toujours regarder combien de RAM utilise et combien d'autres données, qui sont très utiles pour vous pendant le développement. Si vous voulez savoir sur le crochet d'impact, qui vient de React, vous allez simplement dans la documentation React js.org et puis vous comptez trouver l'effet canular. Vous le comprendrez plus avec vous ne savez rien sur React. Mais dans ce cas ici, vous pouvez simplement considérer que l'effet est de gérer leur état et leurs fonctions et de récupérer les données entre le DOM et aussi l'application React Native. 23. Gestion des erreurs des services de services: Ok, et si nous avons un problème avec notre API et que le serveur ne répond pas. Donc, nous voulons afficher un message à l'utilisateur quelque part ici pour dire que d'accord, il y a une erreur dans le serveur. Donc, pour ce faire, c'est très facile. Nous pouvons le mettre en œuvre très rapidement. Donc, tout d'abord, nous devons voir si nous avons une erreur ou non. Donc, après, la méthode then, comme vous le voyez ici, nous pouvons avoir quelque chose comme attraper et attraper. Vous pouvez attraper les erreurs qui peuvent se produire dans votre API. Donc, je vais dire ici erreur, et ce sera exactement une méthode de rappel aussi. Donc, cette méthode de rappel, je peux faire quelque chose comme console l'erreur ou remplacer le message d'erreur. Jusqu' à présent, je vais utiliser une autre constante d'état, qui sera appelée erreur. Donc celui-ci sera là, erreur. Et puis je peux dire définir l'erreur. Et aussi, nous allons utiliser l'état. Donc, pour cela, je dirai que l'erreur de jeu sera ici, l'erreur elle-même. Donc, après cela, nous allons afficher un message d'erreur à l'utilisateur s'il y a une erreur détectée. Jusqu' à présent, nous pouvons, par exemple, utiliser la balise de texte, exactement comme nous l'avons fait précédemment. Je suis juste en train de rendre les choses simples. Vous pouvez le comprendre. Donc, ici, nous aurons un texte et puis nous pouvons afficher comme erreur dans le serveur. Et aussi vous pouvez faire un peu de style dessus. Tu fais juste un style. Et ce style que vous pouvez être, il peut être un objet comme vous le voyez ici. C' est exactement la même chose que la valeur par défaut. Donc, ce style peut être aussi de la couleur. Nous pouvons donner de la couleur, et cette couleur sera rouge, par exemple. Et gardons ça pour voir que tout va bien, ok, nous avons une erreur dans le serveur. Donc, je veux montrer ce message quand il y a une erreur. Alors, comment peut-on faire ça ? Donc, tout d'abord, vous faites un objet. Donc ici, vous devez ouvrir deux crochets. Et ces crochets nous contiennent la constante d'état que nous avons créée précédemment. Et puis vous pouvez dire et ajouter à l'intérieur de cet objet, vous mettez ce texte, donc vous le coupez et le mettez ici. Donc, quand il y a une erreur, alors montrez ce texte. C' est comme s'il y a une erreur et du texte, alors montrez-le. Donc, comme ça. Donc quand on économise et comme vous le voyez, j'ai eu une erreur. Il dit que la chaîne de texte doit être rendue dans un composant de texte car cette erreur est initialisée en tant que chaîne, donc nous devons lui donner une valeur initiale. Par conséquent, l'erreur par défaut est false. Comme nous ne voyons aucune erreur par défaut. Mais lorsque cette esquisse mettra à jour l'erreur et de rendre l'erreur définie comme erreur. Et puis il aura une valeur et ce sera quelque chose qui peut être rendu ici. Donc, pour cela, nous pouvons juste initialiser ceci à false. Et puis, ok, tout fonctionne bien. Nous n'avons pas d'erreur. Faisons erreur dans notre API, par exemple, je vais supprimer cette lettre ici, le b. Donc, quand je fais Enregistrer, je verrai que j'ai sur ou dans le serveur. Lorsque je le supprime, l'erreur restera parce que nous n'avons pas trois chargé complètement l'application. On doit vider leur état. Ici, nous utilisons juste un rechargement à chaud. Hot Reload est juste de faire les choses qui sont mises à jour dans le DOM. Mais nous devons aussi recharger l'application, pour recharger toute cette date ici. Alors, comment peut-on faire ça ? Donc, vous avez juste besoin d'aller à nouveau dans les DevTools. Et puis nous voulons recharger totalement l'application. Donc, vous pouvez cliquer sur Contrôle D et puis vous avez quelque chose ici, recharger. Donc, de cette façon, vous allez recharger l'ensemble de l'application. Et vous vous assurerez que vous ne mettez pas à jour ou n'avez pas cette erreur à nouveau parce que nous avons la bonne API. Donc, ce rechargement signifie que j'ouvre l'application. L' utilisateur vient sur mon téléphone et ouvre l'application pour la première fois. C' est donc le sens de ce rechargement. Il est très important de savoir que vous pouvez recharger votre application ou vous pouvez également appuyer sur. Contrôlez nos contrôles sont vous aidera à recharger l'application totalement sans ouvrir le menu Outils de développement. Donc, quand nous faisons une erreur ici et économisons, ok, Nous aurons l'erreur. Rechargeons l'application. Ok, nous avons des arborescences de langage de nom de film, ils sont vides, donc nous n'avons pas de données ici parce que notre API est incorrecte et cela nous donne une erreur dans le serveur. Nous ferons tout cela beau dans les prochaines conférences pendant notre cours. 24. Refactorisation des premières sections: Ok, dans cette conférence, faisons un peu de refactoring. Par exemple, toujours les services qui saisissent des données du serveur, quelque chose comme ça, viennent dans un fichier séparé. Donc, je vais créer un nouveau dossier ici. Nous pouvons le faire dans la racine du dossier. Ainsi, nous pouvons créer un dossier, nous pouvons appeler les services informatiques. Et ces services vont contenir mes services, que je veux créer ici. J' ai donc créé un dossier et puis nous avons un fichier. Nous pouvons l'appeler services dot js. À l'intérieur des services, je vais avoir l'appel de cette API, par exemple, je vais prendre celui-ci et aller aux services et le mettre ici. Donc, ce dont j'ai besoin pour que l'axe d'importation. Nous avons donc besoin de copier cette importation et de revenir à nos services, puis de le mettre ici. Donc maintenant, nous avons des films populaires, mais les films populaires sont maintenant indéfinis ici. Nous devons donc l'importer. Donc, d'abord, j'ai besoin d'exporter cette méthode. Soyez donc prudent, vous devez toujours exporter les choses de manière à les utiliser dans d'autres fichiers. Donc ici, je vais également importer et je vais importer cette méthode. Donc voici la méthode. Et puis je dis de, et puis ce sera point comme je suis dans le chemin actuel de app.js et puis je dirai services, puis je sélectionnerais le fichier de service. Donc, de cette façon, j'ai importé la méthode de la bonne manière. Après ça, sauvegardons tout. Donc, je sauvegarde les services ici et aussi bien enregistrer leurs services dans le app.js. Maintenant, nous nous assurons que tout fonctionne bien. Nous avons séparé nos services. Donc, une autre étape que nous pouvons faire ici que nous pouvons faire quelques commentaires, nous ajoutons côté comme un commentaire. Nous pouvons dire comme expliquer cette méthode. Donc, par exemple, je peux dire obtenir des films populaires. Donc, de cette façon, vous pouvez expliquer aux autres développeurs que c'est un service pour obtenir des films populaires. En outre, nous pouvons faire quelque chose de génial comme nous n'avons pas besoin d'ajouter tous ces Nyquist va, nous allons créer d'autres services à l'avenir, donc nous n'avons pas à répéter cette URL plusieurs fois. Donc, pour cela, je préfère utiliser quelque chose comme une variable. Et nous pouvons utiliser cette variable partout. Donc, je peux dire ici const, et ensuite je peux donner un nom précieux. Nous pouvons dire URL API. À cette URL d'API, nous aurons cette chose ici. Donc, après cela, nous pouvons utiliser cette URL API comme nous le voyons ici. Et puis nous pouvons le combiner avec ce tableau de films. Alors comment on peut faire ça, on a juste besoin d'ouvrir quelque chose comme un « backticks », ce signe et cette ligne que tu peux utiliser comme dollar. Et puis avec cela, comme l'avocat peut mettre des variables qui sont dans le même fichier. Donc, vous pouvez avoir ici l'URL de l'API et à l'intérieur de cette URL d'API ou après, vous pouvez dire barre oblique. Donc, il serait considéré comme une chaîne ici. Donc, tout cela, ce qui est écrit ici, cela peut être une chaîne, donc je peux copier toute cette partie et supprimer cette chaîne aussi et collé ici. Aussi la clé est très agréable de l'avoir séparé, également précieux. Donc, nous pouvons aussi bien créer ici une clé. On peut appeler ça une constante. Et puis la clé API de notre API, et nous la donnons à l'intérieur de cette chaîne. Donc, ici, nous avons des clés API, ou j'ai juste besoin de les appeler à nouveau comme signe dollar. Et après cela, je vais mettre la clé API de cette façon. Donc, je vais m'assurer de l'URL. Donc, l'URL déjà construite comme avec ce préfixe, comme nous le voyons dans notre API. Et puis nous pouvons avoir une barre oblique et puis plus v populaire. Qu' est-ce qu'on veut obtenir ? Parce que nous deviendrons populaires. On aurait des films de famille, on aurait des films à venir. C' est le virage. Et puis je passerai un point d'interrogation pour passer le paramètre de la clé API, que j'ai stocké dans la clé API ici. Alors sauvegardons tout et vérifions si tout fonctionne bien. Faisons le rechargement à chaud ou le rechargement complet. Ok, gentil. Nous n'avons aucun problème ici. Donc maintenant, nous avons les services dans un fichier séparé et vous pouvez créer d'autres méthodes. Par exemple, ici, nous pouvons faire les films populaires, nous pouvons faire des films à venir pop. Par exemple, l'API des films à venir sera suivie avec le prochain. Et c'est déjà, je sais par la documentation de l'API de ce film. Donc, nous pouvons dire ici, films à venir parce que nous allons l'utiliser aussi dans notre application. Vérifions également une autre API. Par exemple, enregistrez ici. Et prenons une autre API que nous pouvons avoir à partir de la documentation. Donc, je vais à nouveau à la documentation API de la base de données de film. Alors nous allons zoomer un peu trop, pour que vous puissiez le voir bien. Donc ici, je vais aller au cinéma, par exemple. Où est ici, les films. Nous allons donc obtenir quelques API qui vont utiliser dans notre application. Par exemple, nous allons avoir populaire et à venir, comme je vous l'ai dit, peut-être que vous pouvez aussi obtenir la meilleure note. Prenons une série télé. Donc, par exemple, nous avons une équipe et obtenir aussi la populaire. Alors, soyons populaires. Et ici, c'est exactement la même chose. Donc c'est exactement comme les films, mais nous avons juste besoin d'ajouter ici. Donc, nous copions les films populaires un et puis nous avons collé ici. Et on peut dire que la télévision populaire est d dt de films. Et ici, nous aurons aussi la télévision comme nous pouvons faire cette méthode obtenir la télévision populaire. Et nous avons juste changé à la télé est Td de films comme nous avons vu la documentation. Donc nous économisons, maintenant nous avons la télévision populaire. Donc, de cette façon, nous avons obtenu toutes les API dont nous aurons besoin. Peut-être que nous aurons besoin de plus comme nous le verrons dans l'application. Nous allons donc les ajouter aux services et comment nous avons édité l'affacturage ici. Donc, dans la section suivante, ou pour l'instant pour cette section, nous avons appris à utiliser l'API. Nous avons donc appris à saisir des données du serveur et à les afficher sur notre téléphone. Et puis nous verrons plus tard comment coiffer les choses. Nous commencerons par la page d'accueil et nous construirons la première page de notre application dans la section suivante. 25. Créer des composants de l'écran à la maison: Très bien, maintenant dans cette section, nous allons voir comment nous pouvons créer le composant de page d'accueil. Comme vous le voyez ici, je suis capable de naviguer sur les films à travers un curseur où je vais créer sur la page d'accueil. Et aussi, j'ai plusieurs curseurs pour chaque type de films. Par exemple, comme vous le voyez ici, nous avons une émission de télévision populaire, nous avons de la famille, nous avons des documentaires, tous, nous les appelons dans les services. J' ai donc cette version en cours d'exécution sur mon appareil. J' utilise visière, mais bien sûr, nous allons mettre en œuvre cela et continuer notre codage pour atteindre ce niveau comme vous le voyez ici. Donc, tout d'abord, nous allons créer un composant de page d'accueil. Et ce composant de page d'accueil, nous l'appellerons dans le composant App ou au point d'entrée de notre application. Donc, quand j'ouvrirai l'application, je verrai ça. Commençons donc maintenant avec la création du composant de page d'accueil. Ok, au début, je voudrais déplacer tout ce code que nous avons créé précédemment vers un nouveau composant. Nous l'appelons un composant de page d'accueil. Donc, tout d'abord, créons un fichier ou un dossier. On appelle ça des écrans. Donc, je clique ici sur cette icône et je dis que je veux des écrans. Et si vous voyez comme parfois il est créé dans un autre dossier, suffit de cliquer à nouveau et puis cliquez simplement , par exemple, sur app.js pour être au niveau racine. Donc, vous serez en mesure de créer le dossier au niveau racine. Donc, je vais donner ce nom de ce dossier sera écrans. Et à l'intérieur de ces greens, je vais créer un nouveau fichier. Et ce fichier sera appelé home dot js. Donc, nous pouvons dire que c'est la page d'accueil de ma candidature. Donc, si vous vous souvenez avant, je vous ai dit d'installer une extension est très important pour accélérer notre code. Donc, par exemple, je veux créer un composant rapidement. Ainsi, avec les outils React Native snippets, vous pouvez également créer un composant. Alors je veux te montrer ça. Donc, lorsque vous allez aux extensions que nous avons installées précédemment, vous verrez beaucoup de commentaires. L' un d'eux comme nous pouvons créer un retour de composant sans état. Nous allons donc utiliser ce format parce que comme vous le voyez ici avec React, nous avons un composant et ensuite nous avons un retour. Donc ici, nous pouvons définir nos variables parce que je veux vous montrer les deux cas. Donc, si vous allez ici, nous dirons , par exemple, créons ce composant sans état. Donc, je dirai comme L et il se terminera automatiquement pour moi. Donc, je créerais un composant, mais dans ce cas, je n'ai pas de retour, donc je ne peux pas définir mes variables. Facile. Donc, maintenant, nous pouvons créer un autre composant, qui est avec le retour S L, le retour de composant sans état. Donc, avec cela, il créerait pour moi un composant et aussi si le retour et toutes les choses dans chaque composant aussi bien. Il est très important d'importer React. Donc, il y a aussi un commentaire pour cela. Donc, dans cette extension, si vous y allez, voir IMR import React. Alors comment nous pouvons le faire rapidement. Donc vous venez de mettre ici moi, M. et puis il va importer pour vous réagir rapidement. Alors maintenant, nous allons déplacer le code de l'application puis vers la page d'accueil. Donc, si vous vous souvenez, nous avons dans le app.js, nous définissons certains précieux. Déplaçons tous. Faisons un instinct comme si on pouvait les couper complètement avant le retour. Donc, toutes ces variables avant le retour, nous allons les prendre et les placer ici avant le retour de notre application d'accueil ou de notre page d'accueil ou composant Hong. Maintenant, nous allons prendre tout ce qui est à l'intérieur de cette vue. Donc, nous pouvons aussi prendre tout cela, tout ce que nous pouvons prendre tout le point de vue. Donc tout ce qu'il a éteint app.js. Donc, nous allons ici et nous le collons à l'intérieur d'un retour du composant maison. Donc nous collons tout ici. Et nous n'oublions pas que nous copions les importations. Nous allons maintenant les copier, pas les avoir parce que nous aurons besoin de certains d'entre eux plus tard. Alors maintenant je vais les copier tous et les coller ici. Donc, quand j'appuie sur Enregistrer OK, il sera automatiquement formaté parce que j'ai plus beau, sympa. Maintenant, je vais à AS et puis j'enregistre, alors nous n'aurions pas d'erreur jeton inattendu parce que nous devons mettre quelque chose dans cette application. Nous devons mettre une vue afin que nous puissions aussi bien mettre ce point de vue qui était ici avec l'application Hello World. Si vous vous souvenez, il est venu avec un style. Donc, copions la même chose et mettez-le à l'intérieur ici, la vue, et la vue va être fermée comme vous le voyez ici. Donc après ça, on économise, ok, tout va bien. Mais maintenant, nous avons app.js vide. Nous devons donc appeler ici la composante maison, la maison que nous avons créée ici. Donc, pour cela, nous pouvons simplement taper comme une maison de tag. Et comme vous le voyez, il m'est suggéré de l'importer depuis les écrans de la maison. Donc, de cette façon, je peux aussi importer celui-ci. Et comme vous le voyez ici, nous avons importer à la maison des écrans. Quand je sauve, nous obtenons une erreur. Cette erreur provient du composant d'accueil comme vous le voyez, car le composant d'accueil si vous vous en souvenez, se trouve à l'intérieur du dossier d'écrans. Donc, lorsque nous importons le service de film populaire de marchandises, nous ne devons pas être sur le même niveau du dossier car ici nous avons à l'intérieur de ce dossier vert sur JS est à l'intérieur des écrans. Donc nous devons passer d'un pas vers le haut et ensuite nous appelons le service. Donc je dois monter. Et puis j'entre dans le dossier du composant de service ou des services, puis j'appelle les services JS. Donc, pour être sûr plus, vous pouvez supprimer tout cela et vous mettez point, puis barre oblique. Et il vous suggérerait le dossier. Donc, vous verrez qu'il n'y a pas de dossier. Donc, vous devez monter un niveau. Donc, quand vous montez d'un niveau, vous aurez accès aux dossiers que nous avons créés au niveau supérieur de ce composant personnel. Donc, je vais à Services, puis barre oblique, puis j'appelle les services, les services point js. Donc maintenant tout va bien pour le composant maison. Et comme vous le voyez, le app.js a appelé le composant d'accueil à l'intérieur de cette vue. Et puis il sera rendu exactement comme nous l'avons créé ici. Donc, c'est un moyen de diviser votre application. Vous pouvez dire, par exemple, j'aurai l'écran d'accueil, j'ai cherché écran, j'aurai aussi un détail de l'écran de film. Ainsi, nous serons en mesure de diviser notre application. Et aussi, vous devez vous rappeler que si vous n'obtenez pas tout ce que vous ne mettez pas le style ici, peut-être que vous ne verrez rien si vous mettez seulement la vue. Parce que maintenant vous ne pouvez pas voir car tous les éléments sont ici. Donc, nous allons parler de style plus tard. Donnons les choses comme ça maintenant. Et nous économisons comme il est. Et juste à la fin, nous supprimons les importations dont nous n'avons pas besoin. Par exemple, nous n'avons pas besoin de celui-ci. Nous n'avons pas besoin de, eh bien les effets et nous n'avons pas besoin de celui-ci, qui s'appelle texte. Alors sauvegardons tout. Maintenant, nous sommes verts et nous pouvons bien travailler. Dans la prochaine conférence, nous allons voir comment nous pouvons créer le curseur, la première page, ou le curseur qui est en haut, qui contient des images de mes films. 26. Slide image de films de la Latest: Très bien, Dans cette conférence, nous allons voir comment nous pouvons créer ce curseur. Nous prendrions les dernières images de leurs films, des derniers films. Et nous allons juste faire un curseur pour qu'il puisse être balayé automatiquement afin que les gens, quand ils ont ouvert mon application, puissent voir les images des derniers films. Donc, pour ce curseur, il y a un composant qui est appelé curseur React Native. Nous allons l'utiliser. Ainsi, l'utilisation de composants nécessite toujours d'installer certaines bibliothèques externes. Pour cela, nous allons installer une bibliothèque qui contiendra ce curseur et nous l'utiliserons dans nos composants de page d'accueil. Alors passons à notre code. Il y a une bibliothèque qui est appelée React Native image curseur boîte. Alors mettons-le sur Google. On peut dire React Native image, slider books. Donc, tout ce nom, vous le recherchez et vous l'aurez dans la bibliothèque NPM. Maintenant, nous allons dans cette bibliothèque et nous pouvons voir la documentation à ce sujet et comment nous pouvons l'utiliser. Comme vous le voyez, nous avons ici la bibliothèque. Donc, tout d'abord, nous devons l'installer. Donc, nous allons à npm, installer React Native image curseur boîte. Alors allons-y et nous allons ouvrir le terminal et ensuite nous collons notre commentaire. Donc npm installer, React Native image curseur boîte. Donc, jusqu'à la fin de l'installation, jetons un oeil ici. Donc, nous pouvons avoir, tout d' abord, quelques composants. Et ces composants, nous pouvons l'utiliser dans notre modèle. Il y a aussi un exemple. Donc, vous pouvez dire ici, importer la boîte de curseur. Nous devons importer cette boîte de curseur dans notre code. Et puis nous créons une vue. Et cette vue, qui sera une boîte de curseur, contiendra un tableau d'images. Nous allons donc aussi construire ce tableau d'images. Donc ici notre bibliothèque a été installée. Allons là-bas et à la documentation. Et nous allons voir d'abord, comme nous avons besoin d'importer la boîte de curseur à partir de la boîte de curseur d'image native. Donc, nous allons ici et dans le composant de page d'accueil, nous allons importer cette boîte de curseur. Et après ça, fermons le terminal ou cachons-le d'une manière ou d'une autre pour avoir plus d'espace ici. Et puis nous allons voir comment il utilise ce composant. Donc, dans la diapositive là, une boîte dans React Native, il a curseur évoque des images. Il nous faut donc avoir des images. Supprimons donc la partie qui a créé précédemment ce nom de film et toutes ces choses. Donc, supprimez-les pour que nous puissions garder seulement la vue parce que je vous ai dit la vue, ce sera comme un div pour moi, un div ou un conteneur qui contiendra tout à l'intérieur. Alors nous allons ensuite à leur documentation et nous appelons cette ligne. Donc, nous disons diapositive il marche des images. On y repartira. Et nous appelons cette boîte de diapositive là comme nous l'avons importé ici. Alors sauvegardons ça. Nous allons entrer dans le simulateur et l'erreur. Mais ne vous inquiétez pas parce que nous n'avons pas les bonnes images ici. Donc, nous devons tous créer les images. Donc, pour cela, tout d'abord, nous devons créer une variable d'état. Et cette variable d'état, elle sera remplie avec les images des films à venir. Alors appelons cette constante pas un film. On peut appeler ça des images de film par exemple. Donc, nous avons besoin de définir aussi cela pour être des films ou des images de films ou plus de ces images. Donc, de cette façon, nous avons le bon nom. Et maintenant, nous allons l'utiliser pour obtenir des films populaires. Mais dans notre cas, nous voulons prendre les films à venir. Donc nous avons créé un service avant, comme vous vous en souvenez, nous venons d'appeler obtenir amorphe à venir. Alors, allons les chercher. Et je vais garder celui-ci, garder cette méthode. Donc, nous allons créer un autre appel pour garder les films à venir. Et ces films continuent à venir, nous allons l'appeler à nouveau de cette airless. De cette façon, nous devons aussi l'importer. Et ce sera exactement la même chose. Donc, nous aurons besoin aussi alors et attraper. Donc, nous pouvons aussi bien utiliser la même syntaxe que nous avons créée ici pour les films populaires, mais nous n'avons plus de set movie. Donc, nous pouvons supprimer cette partie n'aura pas un AdWords. Nous reviendrons donc à ce service plus tard lorsque nous allons utiliser ou créer les autres curseurs. Donc, pour l'instant, nous allons avoir mis des images de films ici, mais où nous allons l'utiliser. Donc, nous avons besoin d'images ici en quelque sorte. On ne peut pas avoir les films, tout le film. Donc pour ça, si vous vous souvenez, je retourne les films avec leur rappel ici. Nous pouvons donc utiliser ce rappel pour créer une constante. Donc, je vais créer constante, je peux lui donner un nom qui est appelé images de films. Mais les images de ce film pour ne pas avoir un conflit avec ce nom. On lui donnerait aussi un suffixe. On ne peut pas appeler ça un tableau. Donc, de cette façon, il sera initialisé avec un tableau vide. Quand j'aurai les films à venir, je n'ai rien dans ce tableau. Donc, nous allons remplir ce tableau. Donc nous allons dire des films. Images, point de tableau push. Donc nous allons pousser film par film. Donc de cette façon, nous aurons ici plusieurs films. Donc avant cela, je vais aller ici à une autre ligne et je vais dire des films point pour chacun. Mais on peut écrire ça, pas de problème. Donc, vous pouvez avoir des films pour chacun. Parce que si vous vous souvenez, nous revenions de ce prochain service. Nous retournons toujours les résultats des points de données. Et si nous allons à Postman, comme vous vous en souvenez, nous avons ici dans les résultats du tableau. Donc tous avec Viens ici. Revenons donc à notre code et ensuite nous ajouterons exactement la même syntaxe. Donc, pour chaque film à l'intérieur du tableau de films, qui est retourné à partir de l'API, je vais obtenir un film. Donc, à partir de cela, pour chacun, je vais obtenir un film et ce film ou une fonction de rappel où il, je peux l'utiliser pour utiliser ce film à partir de cette fonction de rappel. Donc je peux déplacer ensuite ces films tableau pour pousser le film, que je suis arrivé ici. Mais nous ne voulons pas pousser le film lui-même où vous devez pousser seulement l'image de ce film. Donc, si nous allons à nouveau à Postman pour voir quel est le contenu de cette API, Prenons le premier film, par exemple, comme je vous l'ai dit, les résultats contiennent plusieurs films. Alors obtenons le premier résultat. Un de ces domaines, nous avons renforcé chemin. Et dans ce chemin d'affiche, je vais obtenir l'image du film. Alors prenons celui-ci. J' irai ici et j'en dirai plus. On n'affiche pas le chemin. Alors poussez pour moi le chemin de l'affiche de film. Et après cela, le tableau d'images de films sera défini images de films. Nous devons donc définir cette variable ou cette variable de date que nous avons créée. Donc ici, je vais dire que le tableau d'images de films sera à l'intérieur des images de films. Alors, sauvegardons tout. Maintenant, nous avons formaté notre code, et de cette façon, nous serons en mesure d'utiliser des images de films où dans le curseur. Donc, nous aurons ici des images de boîte de curseur. Ce seront les images des films. Donc le champ filme des images. Sauvegardons ça et allons à notre simulateur. Et nous verrons que nous ne pouvons rien voir parce que nous avons besoin des partenaires. Nous avons aussi besoin du chemin complet. Si nous allons à Postman, nous ne verrons qu'une partie de l'image, comme seulement le nom de l'image. Donc, cela doit être préfixé avec quelque chose. Si nous allons à la documentation du film qui obéit à l'API, il y a quelque chose ici après l'introduction qui s'appelle images. A l'intérieur de ces images, il nous montrera comment nous pouvons obtenir ces images parce que comme je vous l'ai dit que Boston Bath ne retourne que le nom de l'image. Donc, pour obtenir le chemin complet de l'image, vous devez le préfixer avec le lien où vous obtiendrez cette image. Alors préfixons notre chemin d'image avec ce nom. Donc de cette façon, donc quand je pousse les éléments dans le tableau, de cette façon, j'ai juste besoin de pousser aussi bien le chemin. Donc, nous pouvons dire ici, il suffit de pousser ce lien que nous avons copié avant, et ensuite nous disons plus. Donc, vous pouvez dire cela comme préfixe. Et puis le chemin de l'affiche qui vient avec le film comme vous le voyez ici. Et ça arrive toujours avec une barre oblique. Donc, vous n'avez pas besoin de mettre une barre oblique dans le code. Donc, nous pouvons supprimer cette barre oblique, car de cette façon vous obtiendrez deux barres obliques. Donc après ça, nous pouvons tout sauver, aller à notre simulateur. Et comme vous le voyez, nous avons ici les images. Maintenant, nous recevons les dernières images des derniers films ou films à venir. 27. Slide de mise en page de films de la photo de films de la photo de la photo: Ok, maintenant dans cette conférence, nous allons voir comment styler ce curseur. Tout d'abord, si vous voyez ici que nous avons quelques plaintes de ES peluches, ce qui est comme réparer pour moi les erreurs dans mon code comme live, j'ai parlé de ES lié précédemment. Donc ES nommé se plaint que nous devons mettre les styles quelque part en dehors du composant. C' est comme le style de codage, comme ni les styles en ligne. C' est ce qu'on appelle le style en ligne. Donc, quand vous avez Inline style ES peluches, nous nous plaignons à ce sujet. Il est donc préférable de les mettre quelque part en dehors de ces composants. Alors, comment peut-on faire ça ? Nous ne pouvons pas définir en dehors du composant d'accueil, comme vous le voyez ici. Dehors, nous pouvons définir une constante. Nous l'appelons les styles en général, comme les styles normaux. Et ces styles proviennent de la feuille de style et du composant de feuille de style. Nous devons l'importer à partir de React Native. Donc, j'irai ici et j'appellerai la feuille de style React Native de React Native. Donc, quand nous reviendrons ici maintenant, j'aurai une méthode à l'intérieur de cela qui s'appellera create. Donc, je vais créer un fichier de style ou plusieurs styles que je peux utiliser à l'intérieur de mon composant. C' est comme pour nous en cas de HTML, comme un fichier CSS. Et ce fichier CSS contiendra des classes, donc je peux les utiliser dans mes composants ou dans mes balises HTML. Alors, comment nous pouvons créer une classe, appelons-le une classe maintenant. Donc, comme nous avons un objet et ensuite vous définissez vos classes. Par exemple, pour cette vue, je l'appellerai un conteneur de style ou un conteneur de curseur. Donc, nous pouvons avoir ici le conteneur curseur. Et ce conteneur de curseur aura quelques propriétés. Notre exactement mentionné ici. Donc je peux couper tout ça et ensuite le baser ici. C' est ainsi que j'ai défini mes lunettes. Donc tout est au centre, au centre. Donc, bien sûr, quand vous supprimez tout ça, je vous montrerai plus tard. Donc, nous devons utiliser ce conteneur de curseur de classe quelque part ici. Donc, comment nous pouvons faire cela, nous disons juste que les styles parsèment les styles. Lequel ? C' est celui-là, qui est la constante que nous définissons. Donc les styles. Et puis j'ai mis le conteneur de curseur comme vous le voyez ici. Donc, les styles dot curseur conteneur, il appellera les styles qui sont créés ici. Donc, quand nous économisons, nous verrons que tout reste le même. Donnons, par exemple, un peu d'espace par le haut. Par exemple, ceci juste pour un exemple pour vous montrer que les styles fonctionnent. Alors, comment nous pouvons donner un peu d'espace, nous pouvons utiliser le dessus de rembourrage de bâton est de faire un espace à l'intérieur du récipient par le haut, comme pas à l'extérieur, ne pas pousser tout le conteneur. Si vous voulez pousser tout le conteneur, vous pouvez utiliser la marge. Donc, nous pouvons dire marge supérieure, et ensuite vous donnez une valeur en pixels, donc nous pouvons dire 20. Et maintenant, comme vous le voyez, il est un peu poussé par le haut. Donc, de cette façon, nous sommes sûrs que notre conteneur utilise cette classe ou cette feuille de style. Nous pouvons dire que si vous vous souvenez que nous avons comme une certaine hauteur de ce curseur, il prenait presque la moitié de l'écran ou les trois quarts de l'écran. Donc, nous devons donner une hauteur pour les livres de slider. Donc, quand nous revenons à la documentation du curseur, nous verrons plusieurs propriétés. Par exemple, nous pouvons dire les images que nous avons utilisées précédemment propriétés. Je veux dire qu'ils sont des accessoires que je peux passer à ce composant, par exemple, je peux passer des images, je peux passer d'autres options qui peuvent m'aider à le styliser ou à faire quelque chose avec. Par exemple, désactivez en appuyant sur. C' est comme si présent, alors le sein d'image non gardé sera désactivé. Par exemple, la boîte Slider cacher celui-ci dont nous avons besoin. Ce sera par pixel. Il donnera une hauteur pour le curseur et également acheté en elle couleur point car il y a quelques points autoplay. C' est sympa. Utilisons-le. Nous pouvons dire auto-play comme il glissera automatiquement chaque fois que vous ouvrez l'application. Donc, nous pouvons définir cette propriété aussi. Après les images, j'ai fait de l'espace. Et puis je dis auto-play. Et puis j'ouvre un objet et je le mets à true. Donc c'est booléen, ça prend la balle des valeurs. Donc true ou false, la valeur par défaut est false. Il y a aussi, cycle, boucle, boucle de cycle. Ça veut dire qu'on peut dire une boucle infinie. Donc, l'utilisateur, quand il glisse et quand nous obtenons les dernières images, il revenait à la première image quand il glisse ou glisse encore. Donc, nous pouvons aussi adapter celui-ci à vrai. Donc, nous pouvons aller au code de la même manière. Nous mettons de l'espace et puis nous ouvrons un objet et à l'intérieur, nous avons dit à la règle, gardons cela. Voyons si notre application est toujours bonne. Joli. Donc, si je vais maintenant aux images de la maison, comme d'une manière ou d'une autre. Je continue de glisser. Je reviendrai à la première image. Donc si je continue à glisser maintenant, je vais vous faire voir la première image à nouveau. Donc, nous glissons dans une boucle. Donc, comme je vous l'ai dit, nous allons utiliser la hauteur de la boîte de curseur. Donc, nous pouvons utiliser aussi cette propriété et nous la définissons à entier à un nombre. Et ce nombre implémentera pour moi la hauteur de ce curseur en pixels. Donc nous pouvons mettre, donc nous disons ici l'espace. Et puis nous avons mis la propriété que nous voulions mettre. Donc, nous aurons la hauteur du curseur et ensuite nous donnons une valeur. Donc, je vais mettre ici égale, et ensuite nous pouvons mettre une valeur, par exemple, 600. On peut oublier, disons comme ici, 600, il sera en pixel. Et comme vous le voyez, j'ai ici, donc plus léger, plus grand. Mais nous avons un problème ici. Qu' en est-il des petites formes ? Parce que quand je mets ici à la hauteur statique, alors peut-être sur les petits formulaires, ce curseur sera plus grand que la taille de la police. Et puis je vais avoir comme la moitié de l'image attrayante, ce qui n'est pas agréable. Donc, il est préférable d'obtenir la hauteur de ce téléphone ou de n'importe quelle forme où mon application est en cours d'exécution ? Et puis calculez ceci. Donc on peut dire 1, 0,5. Donc, ce que nous pouvons dire, par exemple, utiliser les trois quarts de l'écran pour le curseur. Donc, comment nous pouvons faire cela dans React Native est de me fournir les dimensions du téléphone que j'utilise. Alors, comment peut-on faire ça ? Nous pouvons importer quelque chose de React Native, qui est appelé dimensions. Et ces dimensions, il contient deux propriétés, largeur et la hauteur et la largeur et la hauteur me donneront la hauteur du téléphone et la largeur de celui-ci. Donc, pour le prouver, je veux vous montrer, nous pouvons définir une constante. On peut l'appeler dimension ou week-end, définir cette constante quelque part. Donc, je dis ici const. Et puis les dimensions, on peut dire des Russes de diamant. Et cette dimension contiendra aussi une propriété qui s'appelle get. Et ce Get, il a une propriété qui est appelée écran. Et puis nous disons l'écran git. Et de cette façon, je vais obtenir la dimension de cet écran. Donc, sauvegardons cela et nous pouvons consoles enregistrer cette propriété. Nous pouvons consigner la dimension pour voir dans la console quelle est la dimension que j'ai eue ? Donc, nous pouvons aller, par exemple, au début de ma demande et nous pouvons le faire ici. Donc, nous pouvons dire à la maison, faire au début console.log, console.log. Et puis je vais mettre ici les dimensions que j'ai définies ici. Donc, quand nous économisons, nous ouvrons à nouveau ce terminal pour voir ce que nous avons dans le journal. Comme vous le voyez, nous avons ici Font Scale. Je dois le rendre plus grand juste pour le rendre visible. Donc, nous avons ici maintenant police, échelle, hauteur et aussi échelle et aussi largeurs. J' ai donc besoin de la hauteur, afin que nous puissions obtenir la hauteur de la propriété et l'utiliser pour mesurer notre curseur. Alors comment on va faire ça si facilement ? Nous pouvons dire ici dimensions point hauteur. Donc, dans ce cas, je peux utiliser cette variable de dimension. Donc, quand nous allons à la cache des livres de curseur, je vais dire hauteur de point de dimension, comme vous le voyez ici dans l'auto-complétion, puis divisé par 1.5, c'est comme un trois-quarts de cet écran. Donc, quand je le mets, par exemple, un, il faudrait plein écran comme vous le voyez ici. Mais nous n'avons besoin que du 1.5. Alors, prenons celui-ci. Et comme vous voyez ce que je l'ai mis sur plein, il y a à la fin, au fond quelques points. Donc, nous devons supprimer tous ces points parce que nous allons mettre un autre conteneur sous notre curseur. Des curseurs. Donc, pour supprimer cela aussi, nous pouvons aller aux propriétés de notre curseur d'image, et nous verrons une propriété qui est appelée style de point. Dot est Dy. Donc, nous pouvons donner un style pour ces points comme la hauteur ou le rayon et etc Je vais faire cette hauteur de ces points zéros donc il peut être 0, il ne peut plus être vu. Donc, nous devons dire ici, le style de point sera Masquer, puis 0. Donc, comme vous le voyez ici, c'est Eastland se plaint à nouveau qu'aucun style en ligne. On ne peut donc pas donner de style à cette boîte plus légère. Par exemple, je peux dire des styles dot. On peut lui donner un style de curseur. On peut dire du tout. Et ce style de curseur, nous allons le définir à l'intérieur, ici, à l'intérieur de nos styles et de notre style, votre style aura un objet et cet objet aura une hauteur, et cette hauteur sera 0. Ainsi, nous ne pourrons pas voir ces points. Mais nous avons une erreur ici parce que ici j'ai des crochets supplémentaires. Enlevez-les totalement. Donc c'est assez comme ça. Maintenant, nous avons pleine taille et ces points sont disparus. De cette façon, nous avons enlevé les points. Donc, ramenons la hauteur à 1,5. Et puis nous aurons plus silencieux de l'écran. Et vous voyez maintenant nous avons le style du curseur. 28. Travailler avec des listes de films de carousels: Ok, dans cette conférence, nous allons voir comment continuer avec notre page d'accueil et commencer par les carousels. carousels, je veux dire, avec les composants que nous verrons ici, que nous pouvons glisser parmi nos films multiples. Comme nous avons des catégories de films comme populaire, populaire émission de télévision et famille et documentaires. Donc, nous pouvons aussi bien avoir un curseur ici pour que nous puissions voir les derniers films populaires. Donc, nous avons fini le curseur, qui était sur ce dessus ici. Et nous allons travailler avec ce film qui est populaire. Donc, nous allons commencer simple et nous allons le styliser et avoir la bonne façon de créer des composants et comment nous pouvons aussi bien travailler avec ces listes. Donc, tout d'abord, travaillons avec une liste ou un carrousel très simple. Alors, comment nous pouvons le mettre ici dans notre application comme vous le voyez sous le curseur. Donc, nous pouvons travailler sur cela avec l'utilisation d'un composant qui est appelé une liste plate. Si vous vous souvenez, je vous l'ai dit dans React Native, il a aussi dans la documentation quelques composants. Donc, nous pouvons aller au bouton composants ici. Et nous verrons qu'il y a beaucoup de composants qui peuvent être utiles et utiles pour vos applications dans React Native. L' un de ces composants est une liste plate. Et avec une liste à plat, vous pouvez créer une liste de composants ou une liste de decks, ou une liste de n'importe quoi dans React Native. Et tu peux faire Cardozo avec ça. Donc l'utilisation ici, alors laissez-moi zoomer un peu. Donc, vous voyez ici que nous avons une liste et cette liste, par exemple, maintenant c'est vertical. Nous allons voir comment nous pouvons le rendre horizontal. Il a beaucoup de propriétés. Ce composant, vous devez tous les lire. Nous allons utiliser. De quoi avons-nous besoin pour créer notre carrousel pour l'amorphe ? Donc, l'exemple le plus simple que nous pouvons utiliser est celui-ci, le début. Donc, nous ne pouvons pas dire ou créer une vue. Et cette vue contiendra pour moi le nom ou la liste que nous allons appeler une liste plate ici. Donc la dernière liste sera à l'intérieur de certains d'entre vous. Donc, créons une autre vue dans notre code. Donc, nous pouvons aller ici à Visual Studio Code et ensuite nous allons créer une autre vue. Disons que ce serait le même. On peut le donner comme celui-là. Et nous pouvons dire ici, pas le conteneur curseur, nous pouvons dire la cellule de coupure. Et cette cellule aura les mêmes propriétés que ces conteneurs plus légers. Donc nous pouvons aussi bien aller ici, définir le carrousel et le carrousel, nous aurons les mêmes propriétés. Alors copions-les et sauvegardons tout. Comme vous le voyez ici, nous recevons une erreur. Donc, cette erreur, je voulais mentionner que nous ne pouvons pas mettre deux composants sur le même niveau dans leur retour car cela ne fonctionne pas comme React Native, vous devez les mettre dans un composant conteneur. Vous pouvez les mettre, par exemple, dans une autre vue. Et ces points de vue seront à l'intérieur de la mauvaise interview. Mais pour ça, ce sera un peu délicat. Donc, React Native fourni avec quelque chose appelé fragment de point React. Et ce fragment de point React, C'est comme un conteneur div, mais il n'est pas rendu dans l'application. Donc, vous ne pouvez pas voir, lorsque vous inspectez dans l'application, vous ne verrez rien de lié à ce fragment. Donc, à cause de cela, comme vous le voyez, notre curseur est devenu plus petit. Donc, vous devez le rendre un peu plus grand, comme nous le verrons plus tard et comment nous allons le styliser et faire un peu de refactoring. Donc, tout d'abord, maintenant je suis capable d'avoir deux vues dans un composant ou dans un fragment. Donc, de cette façon, je peux aussi avoir ma liste plate ici. Alors appelons notre liste plate à partir de l'importation. Donc, je vais aller à React Native import et je vais demander une liste plate. C' est de React Native comme vous le voyez ici. Donc, nous allons ici et nous disons que nous voulons avoir une liste fixe appelée ici. Et nous allons passer les propriétés que nous verrons dans la documentation. Donc, comme vous le voyez ici dans cet exemple, nous avons un élément de données et de rendu et un extracteur. Donc, d'abord, voyons ce que sont les données. Les données seront, par exemple, nos films. Donc, nous pouvons dire la liste des films populaires. Prenons d'abord la liste des films populaires. Donc, nous allons ici et encore, nous avons déjà défini des films populaires. On peut aussi appeler un état constant. On peut le définir comme des films populaires. Donc on peut dire ici, pas des films, des images, mais on peut dire des films populaires. Et dans ce film populaire, nous devons aussi le définir. Donc, de cette façon, nous aurons nos films populaires, mais les films populaires viendront de obtenir le service de films populaires comme nous l'avons vu précédemment. Donc, je dirais l'année des films populaires avec des films. Donc, plus le rappel de visa de ce service sera retourné à définir nos films populaires ici. Donc, les données de cette liste plate. Comme vous le voyez ici que nous avons besoin de définir les données seront nos films populaires. Alors voyons d'autres propriétés. La propriété est appelée élément de rendu. Nous avons donc besoin d'un élément de rendu. Nous devons diviser l'affichage de l'élément, le film lui-même, comme vous le voyez ici, nous avons ici plusieurs films et nous affichons article, article, article. Chaque article est un film pour moi. Commençons maintenant avec le nom du film uniquement. Comme il aura un texte pour ne pas le rendre très compliqué, nous allons avoir étape par étape pour grandir dans l'application. Nous allons donc utiliser l'élément de rendu comme un élément de rendu. Et qu'est-ce que l'élément de rendu ici ? Il s'agit d'une fonction Retour élément, et l'élément sera utilisé comme un composant, ou il a défini son propre composant ici, qui est appelé élément. Et il sera défini quelque part dans l'application, par exemple ici. Et il a une vue et il est coté au texte. Je vous montre un SEMP. Je vais te montrer la façon la plus simple. Donc, nous devons aller d'abord pour rendre l'élément. Donc, l'élément de rendu aura un rappel comme celui-ci. Donc, nous allons à nouveau à notre code et nous verrons comment nous pouvons créer un élément de rendu. Donc, rendre l'élément, ce sera, comme je vous l'ai dit, un rappel qui est appelé élément. Mais cet élément sera à l'intérieur d'un objet comme vous le voyez ici. Donc, nous avons ici élément comme un objet, cet élément va présenter pour moi chaque film qui est retourné à partir de ces données. Donc, de cette façon, je peux mettre ceci dans un objet et puis le rappel de cette fonction retournera pour moi un composant de composants React Native que je peux créer par moi-même ou utiliser l'un de leurs composants prêts que nous avons dans Réagissez natif. Maintenant, je vais utiliser le texte. Donc, nous pouvons dire ce composant de texte, que nous avions vu auparavant. Et je dirai que l'intérieur de ce composant de texte mis pour moi élément. Et cet article sera comme ça. Nous avons objet, titre point point d'objet. Pourquoi le titre ? Parce que les films me sont retournés ici avec un titre. Si vous vous souvenez de Postman, nous avons tous les films, comme les films populaires. Donc, le film populaire, chaque film y est tout 310 avec un titre ou une autre propriété. Prenons donc maintenant par exemple, ce titre. Donc, je vais dire ici l'élément de rendu sera le titre de point de l'article. Alors sauvegardons ici car nous verrons ce qui se passera. Donc je vais enregistrer ceci et je vais retourner le nom du film ou le titre du film. Alors voyons notre simulateur. Qu' est-ce qu'il y a ? Ok, gentil. J' ai la moindre liste de noms de films. Et l'une des propriétés qui sont définies dans ce composant, qui est appelé horizontal. Donc, si vous faites défiler ou lisez la documentation, je ne vais pas faire toutes les propriétés. Vous voyez juste ce dont vous avez besoin et ensuite vous pouvez l'utiliser. Ce dont j'ai besoin maintenant est quelque chose appelé Horizontal. Horizontal doit être défini sur true. Ensuite, dans ce cas, je peux utiliser ces éléments comme listes, liste plate comme horizontale, comme nous le voyons dans notre application, quelque chose comme ceci. Horizontalement, nous n'avons pas besoin d'une verticale. Donc, de cette façon, je dirai horizontal égal à vrai. Et puis nous économisons, retournerons à notre simulateur à nouveau. Et nous verrons que nous avons la liste ici. Mais c'est très petit et petit parce qu'il ne contient que les noms des films. Maintenant, nous sommes en mesure d'obtenir le film, donc c'est très génial. Donc, ce dont nous avons besoin ici pour créer un composant, qui est comme un composant fera pour moi comme une carte. Donc ce garde, on peut dire la carte de film, on peut dire ici. Alors celui-là, c'est le gardien. Donc, ils vont implémenter pour moi en tant que composant. Donc, je vous montre dans la prochaine conférence comment créer votre propre composant dans React natif pour le rendre ici et ne pas utiliser les composants prêts. 29. Créer des composants de liste: Ok, dans cette conférence, nous allons passer à un pas plus grand. Je vais vous montrer comment travailler dynamiquement avec React. Donc maintenant dans React Native, lorsque vous allez créer un composant qui contiendra plusieurs choses répétables, comme nous avons un composant et nous allons l'utiliser plusieurs fois. Donc, pour cela, par exemple, je peux dire que cette liste à plat contiendra un titre et aussi un autre composant qui sera exactement comme une liste à plat. Et puis nous allons l'afficher comme je vous l'ai montré dans la démo, nous avons un titre et ensuite une liste de films documentaires. Un autre titre qui est tenir des films populaires et des films moins populaires en dessous. Nous avons donc besoin de propriétés pour ce composant, titre et le contenu de ce composant. Jusqu' à présent, je vais créer un dossier qui peut être appelé composants. Nous allons simplement tenir les composants avec lesquels nous allons travailler. Donc composant. Et à l'intérieur de ce composant, nous allons mettre un fichier qui sera appelé le moins NodeJS, parce que je veux avoir une liste de films et cette liste de film a un titre. Donc, et dans ce cas, dans ma page d'accueil, je peux dire que je veux ce composant de liste plusieurs fois. Donc ici au lieu de cela, nous allons avoir au moins quatre films populaires, moins pour le documentaire, au moins quatre, par exemple, les films de famille, etc. Donc, pour créer un composant, comme vous le voyez ici, j'ai un et je vous ai montré précédemment les raccourcis, extraits de React Native. On utilise cette extension que je vous ai déjà dit. Pour cette extension, si nous allons à nouveau à React Native lits de sommeil, que nous avons téléchargé ici. Et vous verrez comme plusieurs raccourcis que nous avons parlé précédemment de React composants purs ou par exemple, composants sans état et avec retour. Donc, nous avons utilisé celui-ci, mais maintenant ici dans ce cas, nous allons utiliser un type différent, qui est appelé un composant pur. Et ce composant, nous allons l'utiliser comme composant aussi pour l'importer dans notre application. C' est la même chose que celui-ci, mais d'une manière différente. Donc, dans ce cours, je vous montre plusieurs choses à généraliser ou à aimer couvrir tous les sujets sur React Native. Alors allons ici et disons que je veux, par exemple, le raccourci, qui contiendra pour moi une classe de composant pure. Donc j'irai ici et je dis B, C, votre classe de composants. Et puis j'aurai ce composant. Et comme je vous l'ai déjà dit, nous voulons le composant qui a des entrées ou des accessoires. Et ces accessoires, nous pouvons les créer d'une manière comme la suivante. Donc vous n'avez pas besoin de cette étape 4 maintenant nous ne allons pas l'utiliser, mais à l'intérieur de la reddition et Rick, avant le retour, nous pouvons définir une constante. Et dans cette constante, nous pouvons définir un accessoire. Et ces accessoires, comment nous pouvons les définir, par exemple, j'ai besoin d'un titre. Je vais rendre un titre à l'intérieur de ce composant. Et aussi, je veux avoir un contenu, et le contenu sera la liste des films. Et cette constante que vous devez mettre comme ce point accessoires et ces invites viennent de React Native. Mais dans ce cas, vous ne voyez aucune saisie semi-automatique ici car vous devez importer un composant pur qui est étendu de sorte que le composant pur est une classe qui est utilisée dans le React Native. Vous pouvez l'importer à partir de React. Donc, pour cela, nous devons importer React aussi. Donc exactement comment nous l'avons ici dans les extraits, vous pouvez dire que je suis importer React. Donc nous avons là, je suis. Et puis vous obtiendrez réagir et ces composants, il s'étendra à partir de composant pur qui vient de réagir. Donc, de cette façon, vous aurez la bonne importation ici. Donc après ça, ce point accessoires, nous allons être définis. Bien sûr, parce que ce point accessoires vient avec le composant pur, comme c'est ce que nous étendons à partir des composants purs. Nous étendons donc aussi bien ses propriétés. Et l'une de ces propriétés ou variables est les accessoires. Alors essayons maintenant notre composant. Donc, par exemple, je veux rendre une vue, une vue normale. Donc nous pouvons dire que vous avez ici. Nous devons donc l'importer ici aussi. Donc, je vais dire ici Importer vue de React Native. Et disons que nous allons mettre seulement le composant, ou par exemple, le titre. Donc, nous pouvons dire ici, nous pouvons aussi importer le composant texte. Donc, ce composant de texte viendra aussi de React Native. Donc, j'ai hardi ici. Et puis ce texte ne contiendra que le, comme, du texte aléatoire. Il contiendra ce titre, ce titre qui est gomme en tant que propriété pour ce composant. Alors sauvegardons ça. Et puis nous allons utiliser ce composant, comment nous pouvons l'utiliser ou comment nous pouvons l'appeler. Donc, je vais ici pour créer une autre vue sous celle-ci, sous la liste plate. Donc le dipôle devrait apparaître ici en bas. Nous avons donc un autre point de vue. Et cette vue à l'intérieur, j'appellerai mon composant, quel composant je l'ai appelé liste. Et cette liste vient d'où ? À partir de ce composant. Donc, dans ce cas, j'ai besoin d'importer ce composant. Ici aussi. Donc, je dois dire ici Importer et ensuite la liste de. Et puis je dois dire comme des composants doubles et ensuite la liste. Donc ici, j'ai importé le bon composant à partir du dossier des composants. Alors on repart ici. Et comme je vous l'ai dit, il y a des accessoires. Comment nous pouvons utiliser les accessoires exactement après le nom du composant. Vous pouvez dire les accessoires que vous voulez. Donc ce que je veux ici, j'ai deux invites. L' un est diagonale, l'autre est contenu. Nous ne ferions que titre comme exemple. Donc, j'irai ici et je dirai titre, et puis je passerai comme n'importe quel texte codé en dur, Disons par exemple, mon moins composant, Python. Donc juste comme ça, parce que nous allons le voir ici. Alors quand j'économise, j'ai un adulte. Pourquoi avec ce type d'élément est invalide attendu une chaîne pour les composants de construction. Toujours, j'ai fait cette erreur par but, juste pour vous montrer que comment est la différence entre les composants aigus et que les composants de la fonction. Donc composant de fonction, quelque chose comme ça comme vous le voyez ici. Mais un composant pur, vous devez les appeler sans tous ces crochets exactement comment nous appelons réagir. Donc, lorsque vous voulez appeler un composant pur, vous devez l'importer comme ceci ou dans un composant de classe. Et puis sans tous ces crochets, cela fonctionnerait bien. Alors maintenant, sauvegardons à nouveau. Et nous remarquerons que nous n'avons rien vu parce que nous devons mettre un style pour cette vue. Et nous allons, par exemple, maintenant copier cette fois pour un spectacle rapide et enregistrer à nouveau. Et comme vous le voyez ici, j'ai dans mon titre, mon titre de composant de liste. Donc, de cette façon, je suis capable d'utiliser le composant z. Donc, quand je vais ici et je dis, par exemple, ajoutez pour moi une chaîne. Nous pouvons dire titre et un certain nombre, 2 à 2 par exemple. Et comme vous le voyez, il est venu ce composant avec cette entrée que j'ai spécifiée dans la maison. J' ai donc dit que le titre a une entrée, mon composant de liste, titre et à l'intérieur du composant de liste, je l'ai ajouté à cette chose. Donc, dans ce cas, je le vois aussi. Ainsi, de cette façon, vous pouvez créer un composant dynamique. Donc, pour cela, je vais déplacer cette liste, que nous avons ici dans la page d'accueil vers ce composant. Alors faisons-le vite. Tout d'abord, prenons toute cette partie. Donc, nous avons ici comme plus la vue, nous aurons seulement la liste. Donc j'ai eu cette liste plate. Donc, quand nous reviendrons ici à la liste, je retirerai ce texte. Je vais mettre ici que j'ai la liste plate, mais au moins nous devons l'appeler à nouveau comme un composant. Donc, à partir d'ici, nous devons toujours copier tous les composants importants dans ces composants cibles. Donc, nous pouvons avoir ici aussi dimensions plonger triche parce que nous aurons besoin d'eux plus tard. Donc, supprimons cet important d'avoir l'application. Tous sont importés de React Native. Et ici, comme vous le voyez ici, nous avons besoin d'une donnée. Et ces données, elles ne viendront pas du titre. Ils vont avec le contenu, ce contenu de manière appropriée. Donc, cette propriété de contenu de cette façon, j'ai besoin de le spécifier aussi dans le composant de liste ici. Donc, je vais avoir, en plus du titre, je dois dire contenu. Et aussi comme une propriété, qui sera, par exemple, mes films populaires. Je vais donc le mettre ici aussi. Donc, dans ce cas, vous serez sûr que vous avez les bonnes propriétés sont passées à ce composant de liste. Donc encore une fois, supprimons cette liste plate parce que nous n'en avons plus besoin. Et maintenant, nous avons la vue ici, nous n'en avons pas besoin aussi. Donc, nous avons ici pour guide de style ou cellule. Donc nous sauvegardons ici, et aussi nous sauvegardons ici, ok, nous recevons toujours quelques erreurs parce que le film populaire variable ne trouve pas ici. Donc, au lieu de films populaires, parce que je vous l'ai dit, films populaires, nous avons traversé cette propriété. Donc j'ai dit, le contenu sera des films populaires que j'ai obtenu du backend et je le passe à la liste. Donc, dans le composant de liste, nous devons utiliser ce contenu dans raide. Alors sauvegardons. Ok, nous avons maintenant cette liste. Donc, comme un résumé, rapidement, nous avons défini un nouveau composant qui est appelé liste. Et ce composant de liste contiendra pour moi un titre et un contenu. Et à l'intérieur de ce modèle de vérification, ce sera un titre le plus plat et aussi un peu. Alors peut-être que vous avez une autre vue comme ça. Donc, nous pouvons avoir une vue pour le titre. Donc, j'aurai aussi une vue ici. Et comme je vous l'ai dit, vous ne pouvez pas avoir une autre vue comme conteneur parce que vous ne pouvez pas mettre deux composants du même niveau directement dans le retour, vous devez les contenir tous dans un conteneur. Par exemple, ici, j'ai utilisé. Réagit fragment comme vous vous en souvenez, mais disons ici que nous pouvons utiliser la vue aussi. Donc, voir nous contiennent plusieurs vues. Et aussi j'ai besoin d'une autre vue pour cet article. Donc, dans ce cas, nous aurons vous et vues à l'intérieur comme vous le voyez ici. Et à l'intérieur de cette vue, je vais spécifier un texte, et ce texte contiendra pour moi le titre. Donc ici, j'ai aussi le combat. Donc, le titre qui viendrait du composant de la page d'accueil et que je spécifie ici dans le prop. Sauvons ça. Et comme vous le voyez, le titre est affiché, mais c'est sous le Cardozo parce que nous avons besoin de styliser tous ces trucs ici. Donc, nous allons créer comme nous allons l'entendre, une feuille de style. Donc, j'aurai la même chose. On peut avoir ici, une constante. Rappelle-toi de Stein. Et ceci est marées tiendra feuille de style, puis Créer. Et puis on pourra ouvrir et mettre nos cours ici. Donc première classe que je dois avoir ici comme style pour le texte, dire qu'il est mort. Et puis il viendra du texte point de Stein par exemple, nous allons définir cette classe. Donc, je vais revenir ici à mes cours. Je dirai la trouvaille pour moi, le verre de texte. Et à l'intérieur de cet objet texte aura la taille de la police. Par exemple, nous mettons 20 et 20. Ce serait comme un pixel. Et nous pouvons aussi mettre polit-weight. C' est exactement comme CSS, mais comme vous le voyez, nous n'avons pas de font-weight normalement en CSS, vous l'écrivez comme ceci. Mais ici, non, parce que nous utilisons des objets, des objets javascript, donc ce sera comme CamelCase. Donc, nous pouvons avoir ici le poids de la police et ce poids de la police, nous serons une chaîne, et cette chaîne sera en gras. Donc, de cette façon, c'est quelque chose comme CSS, mais vous le changez en syntaxe JavaScript d'une manière ou d'une autre. Et la couleur, peut-être que nous pouvons mettre une couleur qui sera noire ou n'importe quoi. Donc, de cette façon, vous pouvez mettre de la couleur. Et vous pouvez dire ici fond de remplissage, comme pousser le texte en dessous ou la liste en dessous. Quelques pixels. Donc on peut dire ici à 20 heures. Donc, comme vous le voyez, comme il est montré ici. Donc, la vue elle-même doit être poussée par le haut. Donc, pour ce point de vue, nous pouvons définir comme Will Stein et ce verre de style que nous avons contenu. Nous pouvons dire Styles et ensuite nous pouvons l'appeler le moins pour voir par exemple, oui, juste la liste. On peut dire comme ça. Donc on peut dire liste. Et la liste aura une autre classe. Donc on ne peut pas dire liste. Et nous pouvons le donner comme le dessus de frapper ou le haut de la marge par exemple, je dirais. Et ce haut de marge aime pousser la liste du haut d'environ 25 pixels de cette façon. Et nous voilà, j'ai oublié la virgule. Et comme vous le voyez, nous avons le titre de la bonne façon pour cette liste. Dans la prochaine conférence, nous allons faire plus de style et aussi, nous allons montrer les images des films comme nous l'avons vu dans la démo. 30. Créer des composants de cartes: Ok, dans cette conférence, nous allons voir comment nous pouvons styler et rendre plus belle cette liste. Vous vous souvenez que nous n'avions que le titre. Qu' en est-il de l'affichage de quelques images ? Alors faisons cela d'une manière que nous voyons comme les images d'eux toujours. Donc, tout d'abord, si vous vous souvenez, nous savions comment nous pouvons créer un composant. Nous avons donc créé un composant de liste. Et ce composant de liste, il contient une liste plate, et cette liste rend un texte uniquement. Alors qu'en est-il, au lieu de cela, nous rendons un composant de carte, un dieu que je vais créer maintenant et le rendre cliquable. Donc, lorsque vous cliquez sur l'un des films, il nous faudra, comme nous le voyons plus loin dans la navigation qu'il naviguerait pour nous aux détails de ce film. Donc, au lieu de cela peut être, je vais passer l'élément à un composant qui serait appelé carte. Donc, créons un nouveau composant et nous allons l'appeler card dot js. Et ce chien de garde JS, j'utiliserais aussi, ce style de composant pur. Et de cette façon, je peux aussi utiliser exactement la façon dont nous avons fait avec les composants de liste. J' importerais ici les trois actes et aussi les composants React dot view. Quelles sont les propriétés de ce composant ? Nous pouvons définir une constante et nous lui donnons un nom comme élément. Et l'article sera comme le film, que nous allons montrer dans ce jardin. Donc, nous allons dire ce point accessoires. Donc, de cette façon, j'ai défini une constante qui est appelée élément. Et cet élément serait une propriété pour ce composant. Et bien sûr, cela devrait être à l'intérieur du rendu et avant le retour. Et nous aurons besoin de rendre cette garde comme un cliquable. Alors, comment peut-on faire ça ? Si vous vous souvenez, dans React Native, il existe plusieurs composants que nous pouvons utiliser. Un de ces composants appelé opacité touchable. Et l'opacité touchable vous donne la possibilité lorsque vous cliquez sur un bouton ou un composant ou un élément, si nous faisons comme une certaine opacité comme ombrée. Et il répondra pour les clics de l'utilisateur et sera affiché comme un réputé, comme vous le voyez ici. De cette façon, nous allons également utiliser ce composant. Nous devons donc importer un composant d'opacité touchable. Nous devons donc dire importer l'opacité touchable de React Native. Et de cette façon, j'ai l'opacité touchable et je peux l'appeler comme un composant, le retour ici. Donc, une opacité touchable aura aussi d'autres propriétés, comme nous le verrons plus tard, et nous leur donnerons quelques styles. Alors préparons notre fichier de style. On peut dire style. Et ces cadrans seraient comme de ces marées. Donc, nous avons besoin aussi constante, qui a appelé styles. Et il va créer une feuille de style ici. En outre, nous devons importer cette feuille de temps. Et cette feuille de style n'aurait pas de création. Et nous allons créer nos cours ici. Appelons donc ce style d'opacité touchable comme par exemple, nous lui donnons le nom et nous l'appelons conteneur, par exemple. Et ici, je vais aller au style et je dirai que j'ai un conteneur et ce conteneur aura l'objet et les propriétés suivantes. On peut donner un peu de frappeurs en général, quelque chose comme on peut dire cinq pixels. Et aussi nous pouvons dire que nous avons besoin d'une position parents. Je vous dirai pourquoi plus tard. Donc, de cette façon, nous préparons ce composant pour avoir quelques styles. Donc, nous avons ici le style sera les styles ici et l'opacité touchable. Donc, sauvegardons ce composant en général, et je vais l'importer dans ma liste. Donc, au lieu de textos, j'utiliserais la garde. Et ce garde a une propriété qui s'appelle élément. Et je vais passer ce que l'article qui revient de la liste des films comme vous vous en souvenez. Donc nous avons ici cet objet, qui est le patron à leur carte. Et cette carte, nous allons la fermer. Et donc vous n'avez pas besoin d'utiliser tout cela, donc nous pouvons utiliser ces balises de fermeture d'un côté. Nous devons donc importer cet article de panier. Donc, nous irons ici et je dois faire importer des protections de verre à partir de composants, qui seront dans ce même niveau du dossier de la liste. Donc, ce serait comme ça. Donc nous avons DIEU, à partir du fichier de carte parce qu'ils sont au même niveau du fichier. Donc, nous économisons et nous avons ici notre composant, article ou titre, mais nous n'avons rien ici parce qu'il est vide. Donc on va à cette carte, on doit mettre à l'intérieur de cette opacité touchable, quelque chose. Donc ça fonctionne maintenant comme une opacité touchable, mais c'est vide. Mettons aussi un autre composant qui est appelé image. Je vais mettre cette image du film à l'intérieur de ce composant. Donc, comme vous le voyez ici, il a aussi du style. Vous devez également l'importer. De React Native, puis vous pouvez l'utiliser. Et il a deux propriétés. L' un d'eux est mort, puis la source. La source serait la source de l'image que vous souhaitez utiliser à l'intérieur de ce composant. Donc, je vais aller importer l'image aussi à partir de React native. Je vais mettre ici l'image. Donc, je vais mettre ici ce composant d'image. Et l'image du composant a une propriété. Et ce sera aussi des composants d'un côté, donc nous n'avons rien à l'intérieur, donc vous devez l'utiliser comme ça. Donc d'abord, nous avons besoin de ce mort pour ce composant ou pour cette image. Donc, nous utiliserions aussi bien les styles. Donc je dirais des styles. L' image par exemple, ou l'image vidéo est à vous de décider. Et après cela, nous pouvons définir ce qui est mort ici. Donc, je vais ici et je dirais style, et nous avons besoin de la source comme nous l'avons vu dans la documentation. Alors, quelle sera la source ? La source, si vous vous souvenez que nous obtenons l'élément à ce composant de sorte que le contenu de ces films populaires ont été écrits pour moi tableau de films. Et ces tableaux de films sont utilisés dans la liste plate. Et la liste à plat les rendrait article par article, film par film. Et je passe tous les films à cette carte. Donc chaque année de cinéma est passée à cette carte. Donc, je peux utiliser les propriétés des films. Donc, je me souviens que la propriété que nous allons utiliser pour obtenir l'image sera celle qui se vante ou image. Donc, je peux mettre ici l'élément ce chemin de renforcement. Donc, comme vous vous en souvenez, nous avons ici réparé poster leur patron du film, que nous avons utilisé avant. Mais lisons la documentation plus attentivement. Je vais enregistrer ici, nous avons ici champ et il s'appelle comme si ça nous donnait une erreur, cette propriété invalide. Pourquoi ? Parce que l'année, lorsque vous voulez utiliser cette propriété et que vous voulez l'affichage de l'image source à partir de l'URL, vous devrez utiliser cet objet qui est appelé URI, ne peut pas mettre cette source de l'image ou, par exemple, la propriété de l'image directement. Dans ce cours, vous devrez utiliser une propriété appelée URI. Donc, pour cela, je ne suis pas suffisant pour utiliser seulement l'article. On doit mettre un autre objet à l'intérieur. Et à l'intérieur de cet objet, nous avons une propriété qui est appelée URI, comme ceci. Et puis, ok, l'image ne me donnerait aucune erreur. Mais nous ne voyons aucune image. Affaire maintenant. Pourquoi ? Parce que si vous vous souvenez, nous devons préfixer l'image avec un bain, comme nous l'avons fait avec ce Finder. Et nous avons créé le tableau d'images. Et ces images tableau est préfixé comme ceci. Nous devons donc utiliser aussi chaque image pour avoir un préfixe d'URL comme celui-ci. Copions cette partie aussi. Et va à notre garde. Et je dirai que u est l'URI, cette chaîne plus l'affiche point de l'article. Donc, quand nous économisons, nous verrons que nous ne voyons toujours rien parce que nous n'avons pas classe pour l'image jusqu'à présent que nous devons aller dans les Styles et donner un style, un nouveau nom de style, qui est appelé image comme nous l'avons défini ici. Et je vais donner une hauteur pour cette image, disons 200. Et aussi, nous pouvons donner, par exemple, le blé, qui sera 20 ou 120 week-end dire. Et nous pouvons voir aussi bien que vous le voyez, nous avons déjà cette liste des images, mais nous devons aussi la donner comme un rayon de frontière. Je montre juste ici comme quelques compétences CSS. Vous pouvez les faire comme vous le souhaitez en fonction de ce dont vous avez besoin pour votre conception. Donc je vais ici pour donner le rayon frontière 20. Et nous avons ici notre liste, et nous avons nos composants ou nos films. Et quand vous cliquez sur eux, comme vous le voyez, c'est exactement comme prévu de notre application. Parfois, si l'image du film est très petite, peut-être qu'elle serait coupée comme ça. Mais parce que nous utilisons la même API, nous avons des images fiables. Donc, de cette façon, il est préférable d'utiliser une propriété qui est appelée couverture de mode re-size et ce redimensionner le moule couvre. Nous couvrons le conteneur de cette image exactement dans la même hauteur et la même largeur que nous venons de spécifier ici. Donc, cette taille de l'image originale n'a pas d'importance. Il s'adaptera exactement dans cette largeur et cette hauteur. Donc, lorsque vous enregistrez, vous aurez la même largeur et hauteur, exactement comme vous avez spécifié ici, même l'image est plus petite. Donc, lorsque nous voulons utiliser plusieurs listes, nous pouvons simplement aller à la maison et nous dupliquons toutes ces vues. Je veux donc avoir un autre point de vue ici. Ensuite, je vais obtenir un autre film, et aussi je vais obtenir un autre film, etc. Donc, de cette façon, vous serez en mesure de trouver votre liste de films populaires. Bien sûr, il a besoin de plus de style comme nous le verrons plus tard. Mais de cette façon, nous réutilisons ce composant mais avec des données différentes. Ainsi, nous avons créé notre composant et nous voyons la liste des images. Alors allons ici à la page d'accueil et donnons à ce composant un nom comme ou cette liste, nous pouvons dire des films populaires. Donc on ne peut pas mettre ici des films populaires. Et il affichera pour moi les films populaires. Et plus tard, nous verrons comment nous pouvons lister de plus en plus de listes pour nos films. Mais nous allons faire plus d'étapes comme le style et le refactoring et affichage des images d'espace réservé pour rendre ce composant de carte plus efficace et plus dynamique. 31. Le spectateur d'image dans le composant de cartes: Ok, une des questions importantes auxquelles nous pourrons faire face à l'avenir s'il n'y a pas d'image affichée ici. Donc, quand nous ne pouvons pas recevoir de l'API aucune image. Alors, comment pouvons-nous résoudre ça ? Pour cela, j'utiliserais une image d'espace réservé et une image qui est stockée dans l'application. Et quand il y a une erreur de chargement de cette image, alors je montrerais un détenteur de place ici. Donc, pour cela, je veux stocker une image dans ma structure de dossiers. Ainsi, ce dossier peut être, par exemple, nommé en tant qu'actifs. Donc, dans ces actifs, vous pouvez mettre tout ce dont vous avez besoin pour votre application. L' un d'eux peut être comme des images. A l'intérieur des images du dossier. Je peux créer mes propres images et les placer ici. Donc, par exemple, j'ai créé une image de détenteur de lieu pour moi. Je l'ai bien fait avec Photoshop. Donc, avec Photoshop, je peux placer cette image place de l'image vidéo quand il n'y a pas d'image disponible. Donc, pour cela, nous pouvons nous en servir aussi. Alors, comment nous pouvons afficher cette image quand il n'y a pas d'image disponible. Alors quand je vais ici, définissons une constante. Nous pouvons appeler cette image d'espace réservé constant. Donc, disons une image de détenteur de place constante année. Cette image de détenteur de place serait requise à partir du bain que j'ai spécifié, qui sera dans le dossier assets. Donc, pour cela, j'utiliserais le dossier assets. Je vais aller une étape vers le haut des images d'actifs, puis je vais spécifier l'image que je veux. Et le nom de l'image sera l'espace réservé que B et G. Donc dans ce cas, j'aurai mon image à l'intérieur de l'image de l'espace réservé. Ainsi, dans le composant image, vous pouvez spécifier URI ou directement un fichier. Donc, lorsque vous voulez utiliser une amende, vous utilisez requis. C' est pour ça que j'ai utilisé ce nécessaire. Ainsi, la source de l'image peut être une URL ou un fichier. Donc, pour cela, j'ai besoin de spécifier quelque chose à l'intérieur de la source. Je dirai point point point point chemin de l'affiche. C' est comme si je le faisais ici. Et si, et puis je mets un point d'interrogation, cet or en ligne. Si. Ainsi, vous pouvez, par exemple, mettre un if dans une ligne afin qu'après le point d'interrogation, vous mettiez le point de valeur C'est à travers. Et puis vous mettez deux-points, puis la valeur sera quand elle est fausse. Donc, dans ce cas, ce sera quand bolster path a une valeur, ou il est défini, ou il a un contenu, et quand il est indéfini, il obtiendra cette valeur. Donc, pour cela, je voudrais utiliser quand il a une valeur, donnez-moi cet objet, qui sera vous êtes moi et toute l'image de l'affiche. Mais quand il n'a aucune valeur, je mettrai ici un deux-points. Et après cette colonne, je vais mettre l'image de l'espace réservé. Donc, dans ce cas, après que j'ai enregistré, c'est formaté. Si item, le chemin de l'affiche est indéfini ou il n'est pas disponible, tout cela est une erreur, ou il est vide, alors il ne montrera pas que vous devriez que je prenne l'image du détenteur du lieu. Mais quand il y a une valeur, il faudra la première valeur, qui est après le point d'interrogation, ce qui sera quand. Ok, alors comment on peut tester ça ? Nous pouvions donc cette image de détenteur d'une manière que nous avons retourné. Mais cette condition, alors mettons ici non. Donc, dans ce cas, quand il y a un affichage d'image d'affiche pour moi, cette image d'espace réservé et enregistrer, nous allons voir que nous avons les images d'espace réservé. Mais de cette façon, nous ne savons pas quel est le nom du film. Il est donc préférable d'afficher le nom du film. Donc, nous affichons le nom du film juste au cas où il n'y aurait qu'espace réservé à l'image. Donc, nous pouvons dire aussi une condition ici. Donc, je vais ajouter aussi, comme après l'image, j'aurai un texte composant et ce texte sera affiché quand il n'y a pas de chemin d'affiche. Donc, je vais dire ici et objet après l'image. Donc, nous avons ici, comme quand il y a un article, ce porte-place, ou quand il n'y a pas d'objet et de place, puis et faire des moments comme vous vous en souvenez, nous l'avons fait quand nous avons géré l'erreur. Donc, je vais placer un composant de texte. Donc, nous appelons un composant de texte ici. Et nous donnons à ce composant de texte une valeur qui sera le nom de point de l'élément. Donc, nous pouvons avoir le nom du film, ou dans ce cas, nous avons dans notre API, Il est appelé point point point point point. Donc quand je sauve alors ok. Je ne vois rien parce que j'ai dit quand il n'y a pas d'image d'affiche, mais dans notre cas, c'est une image d'affiche. Donc juste pour le test, comme je vous l'ai dit, nous retournons les conditions ici pour voir ce que nous allons faire avec l'image de l'espace réservé. Donc, comme vous le voyez, nous devons aussi importer ici le composant texte, donc je vais le copier et d'accord, gentil. Nous avons maintenant le nom du film, mais c'est moche parce que quand le nom du film est long, il pousse les autres films à proximité. Donc, pour ce faire, ou nous pouvons gérer cela en plaçant, par exemple, le nom du film ici au milieu de l'image du détenteur de place. Alors donnons à ce texte un peu de style que nous verrons ici. Style et ce style, nous pouvons aussi ajouter du verre qui peut être des styles. Et à l'intérieur de ça meurt, on ne peut pas dire le nom du film, par exemple. Et à l'intérieur de ce nom de film, nous allons styler notre nom du film dans le détenteur de place. Alors passons maintenant aux styles que j'ajouterai ici et à votre verre, qui sera le nom du film, nous avons comme nous avons nommé ici. Donc je vais dire ici que le nom du film sera un objet. Donc, la première propriété pour cette classe, nous allons lui donner une position, absolue. Je vais vous dire pourquoi. Et aussi, nous pouvons, par exemple, juste pour voir ce qui se passe. L' absolu de position localise le composant au milieu ou au début du composant parent. Donc, dans notre cas, nous, notre composant parent est ce conteneur, comme vous le voyez ici, opacité touchable. Il a notre composant parent du texte. Donc, dans ce cas, nous devons mettre le composant parent sont relatifs. Donc, quand j'ai une position relative ou absolue, alors ils seront liés les uns aux autres par un parent. Parce que lorsque je supprime ce parent, alors la position de cet élément, parfois ou un Android, il serait situé en haut de l'écran parce que je n'aurai pas une position élective pour cet enfant avec son brevet. Alors remettons-le. Nous avons maintenant la position absolue. Vous devez être sûr que vous avez la position relative. Et maintenant, je vais donner comme quelques propriétés. Par exemple, pour lui donner une certaine largeur, nous pouvons mettre le similaire, la largeur est la même sur la largeur de l'image mais moins comme 20. Et aussi, nous pouvons faire en sorte que ce texte soit aligné avec le centre. Donc on peut avoir ce texte au centre. Donc, c'est exactement comme nous faisons avec le CSS normalement. Et aussi, nous pouvons cet article situé au milieu ou le mettre au milieu, vous avez deux options. Ici. Vous pouvez faire le conteneur en tant qu'éléments de ligne. Vous pouvez le mettre d'une manière comme le centre, comme vous le voyez ici. Ou vous pouvez faire, dans ce cas sont l'article lui-même. Vous pouvez dire aligner vous-même et cela me laisserait, le composant aura une position centrale. Donc, l'une de ces deux options, je préfère utiliser nos éléments de ligne, comme je veux aligner tous les éléments à l'intérieur de ce conteneur au centre. Donc maintenant, nous devons pousser le texte sur le haut un peu comme par le haut pour ne pas être exactement sur la bordure de l'image. Donc, vous pouvez aussi bien le mettre ici au centre. Je tiens à vous dire qu'il est très important de mettre une hauteur pour le conteneur parce que notre conteneur dans ce cas est cette carte. Donc, de cette façon, si vous voyez, si vous alignez leurs composants comme vous le pouvez, par exemple, essayons de le mettre au centre ici. Les instructions pour que vous pouvez dire justifier le contenu sera centré. Donc, quand je sauvegarde cela, quand je mets justifier le centre de contenu, comme vous le voyez, tout le contenu a poussé vers le bas parce que la hauteur de ce conteneur a le reste de la vue. Donc, nous avons ici ce curseur, et puis nous avons le reste de la vue est automatiquement attribué parce que le conteneur principal est un flex. Donc, de cette façon, nous devons être prudents avec cela. Il vaut mieux donner de la hauteur pour ce conteneur. Donc, je vais le donner aussi à un pixel 100. Donc, dans ce cas, nous verrons que notre article est situé exactement au milieu et le nom du film est situé au milieu et la hauteur du conteneur est aussi bien à un 100. Donc, dans ce cas, vous devez garantir toutes les tailles pour ne pas avoir de problèmes à l'avenir. Dans mon cas, je ne mettrai pas le centre justify-contenu, mais je garderai la hauteur. Mais je vais pousser un peu ce texte ici du haut. Donc, nous pouvons dire ici DHAP du nom du film, il aura comme 10 pixels, nous pouvons dire. Donc, je vais mettre ici puis pixel. Donc, après avoir sauvegardé, nous verrons que le texte est plus bien quand le film n'a pas d'image. Donc maintenant, quand nous voulons que cela fonctionne normalement, nous devons retourner leurs conditions. Donc, quand il y a une image d'affiche ou un chemin d'affichage renforcé pour moi l'image que l'image normale. Donc on n'a pas besoin de ce noeud. Et il n'y a pas d'écran de bain post-doc pour moi, un texte où il contiendra le nom du film, donc nous n'en avons pas besoin comme ça. Donc nous disons quand il y a une image sans affiche, alors n'aime pas cette lame, ce texte. Donc nous gardons ça. Et puis nous aurons le comportement normal. Comme vous le voyez ici, tout fonctionne bien. Nous n'avons aucun problème. 32. Vérification de caractères dans React Native: Au fur et à mesure que votre application se développe, vous devez toujours attraper beaucoup de bugs et d'erreurs avec la vérification morte. Pour certaines applications, vous pouvez aussi utiliser des extensions JavaScript comme law ou TypeScript pour la vérification de type. Mais il y a un moyen plus facile avec le TypeScript ou JavaScript que nous utilisons ici. Ainsi, vous pouvez aussi bien vérifier la cuisse de vos variables, tous vos accessoires. Donc, quand vous voulez faire un type d'accessoire, nous pouvons aussi bien le faire ici. Donc, nous pouvons définir une constante, nous pouvons l'appeler gouttes types. Donc on ne peut pas dire ça. Et puis les types d'accessoires. Et ce type d'accessoire serait un objet. Et cet objet contiendra aussi ce prop que nous avons défini ici. Donc, nous avons défini ici élément, ce point accessoires. Et cet article ici, nous n'affecterons pas seulement comme une valeur ou quelque chose. On attribuerait une couche et je suis là où je peux apporter le type. Je ne peux pas apporter de couche sur une bibliothèque appelée type prop, et elle est déjà installée lorsque vous installez React Native ou allez-vous démarrer un projet ? Donc maintenant, nous avons un type de prop de types prop. Et ces prototypes nous contiennent tous les types dont vous avez besoin pour vos invites. Dans notre cas ici, nous avons l'article sera un objet. Donc, nous pouvons dire que le type d'accessoire de cet élément sera objet. Ou vous pouvez définir la chaîne. Vous pouvez également définir, par exemple, nombre. Vous pouvez donc définir n'importe quel type de votre choix. Donc ici, je vais dire que les types d'accessoires de cet élément ou de ces invites seront comme objet. Et puis cela ne suffit pas, vous avez aussi pour attacher ces prototypes au composant. Alors comment on fait ça ? Nous descendons quand nous allons exporter la classe ou le composant ou le composant pur, nous disons protéger le nom de la classe lui-même et ensuite abandonné les types. Comme vous le voyez ici. Vous pouvez alors dire que les types de prop, qui sont définis en haut. Donc, les types d'accessoires de cette garde seront les prototypes que nous avons définis sur le dessus. Donc, après avoir enregistré cela et lorsque vous déboguez votre application ou lorsque vous faites, par exemple, une affectation pour ces invites, cela vous donnera une erreur lorsque vous dites que cet élément est S3, sachez qu'il doit être un objet. Donc, faisons la même chose aussi bien pour l'élément de liste, nous avons aussi besoin du composant de liste que nous avons créé précédemment. Donc, nous avons aussi besoin de définir une constante, les types d'adaptation. Nous avons ici le titre. Donc, ce titre serait des types d'accessoires mais est mort de chaîne parce que nous recevons la chaîne du titre ou pour le film. Et aussi ce contenu aura un objet car il contiendrait toutes les informations sur le film. Donc, nous allons mettre ici aussi du contenu et nous n'oublions pas d'importer des types d'accessoires à partir de types de rock. Donc, ici, nous allons mettre aussi bien le livre Types. Et à la fin, vous devez l'exporter, donc vous n'avez pas à l'oublier. Donc, nous disons que le type d'accessoires de point de liste est égal aux types de prop comme nous le voyons ici. Donc, quand nous économisons, nous garantissons que tout fonctionne bien. Nous n'avons aucune erreur dans la console ou quelque chose comme ça. Donc, nous tenons maintenant nos composants avec des types d'hélice. Dans ce cas, vous n'obtiendrez aucune erreur lorsque vous appelez ces composants. Alors je vais te montrer pour l'examen. J' appellerais ici un numéro pour ce titre. Je n'appellerai pas, par exemple, un texte. Donc, nous économiserions, vous verrez prop invalide, titre de type. Donc, nous avons ici une erreur dans le temps. Donc, lorsque vous mettez celui-ci comme chaîne, alors vous ne verrez aucune erreur. Donc, vous devez être sûr que le type est juste ici. Sinon, vous obtiendrez des erreurs. Donc, quand vous voyez dans la prochaine conférence, c'est quand je définit un composant, je fais ce prototypes est juste pour le débogage et attraper beaucoup de bogues, peut-être vient avec une frappe. Donc, comme vous le voyez ici, quand je reçois une erreur, titre prop invalide de la chaîne de type fournie à la liste devrait être attendu en tant qu'objet. C' est parce que, comme vous le voyez, j'ai défini ce titre comme un objet, mais ce doit être une chaîne. Nous avons donc un an pour mettre un remuement et nous économisons cela. Et nous allons à nouveau à la console. Nous n'obtenons aucune nouvelle erreur. Nous avons seulement l'erreur où nous avons le type était objet. Donc, dans ce cas, vous pouvez voir aussi vos erreurs ici. 33. Ajouter la vue de Scroll, à Scratch Scroll à la to de l'écran à: Ok, dans cette conférence, nous allons voir comment nous pouvons faire un défilement pour cette revue ou pour la page d'accueil. Pourquoi je vais faire un défilement ici. Parce que si vous voyez que si je crée une autre vue, par exemple, nous aurons des documents, des films et aussi nous aurons des films de famille. Donc, dans ce cas, vous verrez que vous ne serez pas en mesure de faire défiler. Et une vue devient de plus en plus petite. Et notre curseur, Notre vue est divisée par tous ces points de vue. Donc, dans ce cas, il est préférable de créer un défilement de vous. Donc, la création d'une vue de défilement est en utilisant un composant de React Native, qui est appelé un ScrollView. Nous pouvons donc utiliser cette vue de défilement facilement. Vous pouvez l'importer à partir de React Native comme vous le voyez ici, puis vous pouvez l'utiliser. Et pour Raul, vous êtes satisfait de ce ScrollView. Donc, je vais entourer toutes les vues que nous avons ici avec ce ScrollView. Donc, à l'intérieur de leur fragment de réaction ici, nous devons localiser la vue de défilement et ensuite nous la fermons avant le fragment de réaction de la balise de fermeture. Je n'irai plus ici et je le fermerai. Et comme vous le voyez ici, nous avons maintenant la possibilité de défilement dans l'application. Ainsi, lorsque je crée plusieurs vues pour d'autres films, comme par exemple, nous pouvons dire ici plusieurs vues. Ainsi, nous pouvons ensuite faire défiler notre application en toute sécurité et en toute tranquillité sans aucun problème. Et comme vous le voyez, nous avons couvert le dos, les signes du curseur, que nous avions fait avant. Alors remettons tout. Dans la prochaine conférence, nous verrons comment nous pouvons saisir les données des films populaires, familles, des documentaires, etc. 34. Documentaires de télévision populaires pour la cinéma de film pour famille: Ok, Si vous vous souvenez, nous avons créé plusieurs services pour obtenir la télévision populaire, films à venir et les films populaires. Donc, créons aussi un curseur pour ces services. De plus, nous allons ajouter d'autres services comme les films familiaux et les documentaires. Alors commençons à créer un curseur pour le téléviseur populaire. Nous avons des films populaires, nous avons des films à venir recréés ici. Maintenant, nous allons utiliser la télévision populaire. Donc, je vais à la page d'accueil et puis je vais dire aussi, obtenir pour moi la télévision populaire afin que nous puissions appeler le service la même manière que nous l'avons fait exactement avec les services précédents. Donc, ici, nous allons dire devenir populaire, dv est exactement ce nom du service comme nous l'avons ici. Et nous allons importer des services. Vous devez donc vous rappeler que vous importez toujours ces services. Et puis on redescend à la surface et on doit régler quelque chose comme la télévision populaire. Donc, nous pouvons dire une variable où nous aurions des téléviseurs populaires. Donc, de cette façon, nous pouvons aussi bien créer une autre variable d' état qui sera exactement comme des films populaires, mais ce serait appelé TV populaire. Donc nous faisons avec leur même, nous copions la même ligne et nous disons la télévision populaire. Et ici, nous disons définir la télévision populaire. Et de la même manière, nous allons utiliser la variable qui est appelée TV populaire pour le tracer à la liste. Donc, dupliquons cette vue. Et puis nous allons ajouter ici, pas des films populaires, mais nous pouvons dire des émissions de télévision populaires, par exemple. Et puis le contenu sera populaire TV précieux, que nous avons créé sur le dessus. Et maintenant, nous aurons cette télé populaire. Ici. Tu vois ça ? Oui, Lead se plaint que les composants vides se ferment automatiquement. Il est donc préférable de ne pas fermer comme ça. Je voulais le mentionner avant, mais je n'ai pas eu cette chance. Donc, vous auriez juste ici à mettre comme cette balise de fermeture est un acte de l'ensemble du composant DAG qui est comme une porte, faites-en une balise de fermeture latérale. Donc, de cette façon qu'il a la longueur serait heureux. Alors sauvegardons. Et puis on y va. On a des émissions de télévision populaires. Alors ce que nous avons maintenant, des films populaires, émissions de télévision populaires, nous allons avoir des documentaires et de la famille. Donc, de la même façon que nous allons à leurs services et ensuite je vais avoir un nouveau service qui sera appelé obtenir de la famille ou obtenir des films de famille ou des documentaires. Commençons d'abord par de bons films de famille. Donc ici, au lieu d'avoir des films à venir, on peut dire « Obtenir des films de famille ». Et pour de nombreux films, nous devons vérifier l'API pour cela. Donc, vous devez aller sur le site Web de l'API de base de données de films, puis vous devez vérifier comment obtenir les films ou la famille. Donc, nous mettrons des films et nous verrons que nous avons beaucoup de ressources. Et rendons ça un peu plus grand. Et vous verrez que nous n'avons pas quelque chose comme un film familial spécial comme nous n'avons pas les catégories. De cette façon. Je préfère que vous lisiez la documentation plus pour obtenir ce que vous voulez. Donc, après avoir lu la documentation, j'ai découvert qu'il y avait quelque chose appelé Discover. Et dans cette couverture il y a plus que nous découvrons et TV découvrir et dont le film découvre. Vous pouvez utiliser cette API comme cette barre oblique de couverture pour obtenir plus de ceux-ci en fonction d'un filtre. C' est comme filtrer les films basés sur quelque chose, exemple, par région, par, recherché par, et aussi les certifications portiques comprennent adultes, comprennent la vidéo, toutes ces informations. Vous pouvez les obtenir quand vous voulez prendre en compte le film. Donc, je veux filtrer par, par exemple, Jenna, par exemple, c'est le type d'entre eux sera la catégorie org du film. Et puis nous devons passer la carte d'identité de Genève où nous voulons voir les films de famille. Et puis nous allons obtenir le film familial jusqu'à présent que nous avons aussi besoin de lister le généreux avant d'utiliser cette API. Mais mettons d'abord un ours sur quelle API pour cela. Donc maintenant, je vais utiliser ce bain de l'API dans mon service est Paul. Donc, ici, nous aurons l'URL de l'API, l'original, et puis je vais passer ici la chose qui s'appelle Discover puis film. Donc, dans ce cas, après cela, nous avons également passé l'API. Et ici, nous aurons ce filtre Jenner. Donc genre, le filtre Jenner sera comme après la clé API que nous avons mis fin. Et puis nous allons à la documentation et copions la partie où il dit quelle Jeanette ou quel paramètre vous voulez utiliser avec cette API pour obtenir les informations filtrées. Donc, par exemple, je serais avec Jenna. Donc, dans cette largeur, Jenna, je peux le biaiser ici. Et après cela, je vais mettre l'ID, dont ce sera un nombre, où ce sera le film des catégories familiales. Alors comment on va chercher cette carte d'identité ? Donc, nous allons à nouveau à l'API et nous verrons l'une de ces API, qui est appelée génériques. Donc ici, nous pouvons utiliser cela et nous obtiendrions comme liste de films générique. Et nous pouvons utiliser cette API de la même manière que nous l'avons fait avec un facteur pour obtenir aussi, plus V ou l'ID de la catégorie de la famille. Alors ouvrons Postman et c'est de la même façon que nous allons appeler ce service. Donc ici, nous appelons des films populaires et nous appellerons à nouveau l'ID ou les ingénieurs ou les catégories des films. Copions cette partie. On peut dire une liste de films générique. Nous voulons connaître l'ID du visa plus afin que nous puissions, après cette populaire, nous avons, c'est une API de base comme nous l'avons vu ici, nous remplaçons et voici notre clé API. Donc, de cette façon, nous le mettons ici et n'oublions pas d'enlever cette barre oblique. Et puis nous appuyons sur envoyer de la glace. Nous avons maintenant tous les génomes et l'un d'entre eux est la famille, et la carte d'identité sera de 10 751. Donc, nous allons copier cet identifiant. Il est très important de copier l'ID, pas le nom. Donc de cette façon, tu irais ici avec Jenna et tu placeras cette pièce d'identité ici. Et nous économisons. Et puis nous aurions aussi bien leurs films de famille sur la page d'accueil. Donc exactement comment nous avons fait avec DV populaire. Donc nous copions la même partie ici et nous appelons le service, qui s'appelle Get family movies, en colère. Encore une fois, en haut, nous l'avons importé des services. Et puis nous disons ici une nouvelle variable d'état qui sera constante. Télévision populaire, non, nous avons besoin aussi bien de films populaires ou de famille. Donc, ici, nous allons obtenir la vitesse des films populaires. Nous allons ajouter des films de famille. Et ici, il sera mis des films de famille. Donc, il sera mis famille. Donc, dans ce cas, nous pouvons aussi utiliser ces deux variables d'état. Donc, d'abord, nous allons définir les films de famille, que nous avons obtenu de l'API que nous avons ici des films. Et puis nous disons de mettre des films de famille. Et puis nous utilisons la variable que nous avons créée ici. On appelle ça des films de famille. Nous l'utilisons dans notre liste. Nous allons donc créer une autre liste ou une autre vue incluant la liste. Et ici, de cette façon, nous aurons exactement comme, des films de famille. Et ici, au lieu de la télévision populaire ou des films populaires, nous appelons les films de famille précieux. Donc, ici, nous aurons une variable de mini-films et ensuite nous allons exécuter le simulateur. Encore une fois. On sauve tout. Nous verrons que nous avons aussi eu les films de famille, qui sont listés ici. Comme vous le voyez, c'est toujours comme le documentaire ou une télévision populaire. C' est parce que nous avons important le service, mais nous ne l'avons pas utilisé, donc nous devons l'utiliser aussi bien. Nous avons encore ici la télévision populaire. Donc, de cette façon, nous aurions des films de famille et ça rafraîchira les souris. Nous avons maintenant que les films de famille Jenna, ou catégorie qui vient de l'APR. Il y a donc la dernière chose qui s'appelle les documentaires. Je vais le laisser vous suivre comme un devoir. Tu peux le faire vite. Je suis sûr que tu peux le faire. Ce sera exactement la même chose. Il suffit de rechercher dans l'API et vous obtiendrez exactement cela à partir de l'audio de la documentation et l'obtenir du général comment nous l'avons fait avant. Donc, comme vous le verrez ici, que nous avons des arômes chauds, la sagesse du thriller. Et il y a aussi quelque chose qu'on appelle le documentaire comme vous le voyez ici. Donc, je veux que vous créez un service et vous aussi, vous devez créer le service le plus ancien, créer une variable d'état et ajouter la liste ou la liste de défilement à notre application. 35. Refactorisation de deuxième section: Ok, faisons un peu de refactoring maintenant sur notre composant de page d'accueil. Donc, le premier refactoring, que je veux faire est de ceux qui collectent les données des films en plusieurs méthodes, comme nous avons plusieurs promesses, comme alors et attraper plusieurs fois. Donc, nous pouvons également faire tout cela dans un seul but en utilisant une combinaison de promesses. Donc vous savez que celui-ci me revient une promesse comme je vous l'ai déjà montré. Donc maintenant, nous allons les faire comme tous dans une seule méthode et ensuite nous aurons une prise alors et une seule. Donc, dans ce cas, nous ne serons pas fondus plusieurs erreurs ou plusieurs thens, et nous aurons une longue corde. Donc, pour ce faire, tout d'abord, je vais à la fin de cet effet, comme vous le voyez ici, nous avons utilisé l'effet. Après ça. Nous définissons un composant ou une constante ou une fonction, ou vous pouvez le définir aussi bien avant. Donc vous ne pouvez pas dire constante, nous pouvons dire aller chercher des données. Donc, avec ces bonnes données, ce sera une fonction où nous allons recueillir toutes les promesses ensemble. Donc, la création d'une fonction exactement comme nous l'avons fait ici dans le composant. Nous définissons une fonction comme celle-ci. Et puis nous avons une fonction de flèche, et ensuite nous avons le détail de la fonction. Alors j'irai ici et je dirai que j'ai ces parenthèses et ensuite une rangée. Et à l'intérieur de cette méthode, je vais définir mes données. Donc, avant cela, n'oubliez pas de mettre égal pour avoir la constante dans la bonne voie. Donc maintenant que Get Data est une fonction, je vais faire une promesse où il retournera pour moi une promesse de toutes les fonctions que j'ai déjà définies dans l'effet. Donc, pour ce faire, nous mettons retour, juste retour. Nous aurons une promesse comme ça, comme ce poème est que le verre vient de JavaScript. Et nous disons tout. Donc, quand nous définissons tout, ce sera un tableau de multiples promesses qu'ils vont être combinés ensemble et me donner cet exalt aussi dans le tableau. Donc, nous allons ouvrir l'effet d'utilisation à nouveau, nous avons plusieurs méthodes. Donc, je vais mettre ici dans tout le tableau où je vais appeler toutes les fonctions dont j'ai besoin pour les films. Alors obtenons, obtiens d'abord les films à venir. Et puis on aura ces films populaires. Et nous aurions aussi cette télévision populaire. Et puis on aura ce documentaire et des films familiaux parce que je t'ai dit que j'ai créé les films documentaires comme un devoir pour toi et tu l'as fait. J' en suis sûr. Maintenant, nous avons des films documentaires à la fin. Donc, de cette façon, nous aurons toutes ces promesses ont été rendues pour moi dans un but qui est appelé ensemble de promesses. Alors maintenant appelons la méthode get data. Donc, pour utiliser cette méthode de données, nous l'utilisons comme une promesse aussi parce que son retour pour nous une promesse. Et cette promesse, nous pouvons l'appeler à l'intérieur de l'effet d'utilisation. On se débarrasserait de tout ça. Alors maintenant gardons ça comme ça. Et nous appelons que la fonction get data ici. Juste nous pouvons faire un journal de console pour être sûr que nous obtenons vraiment les données de la bonne façon. Donc, je vais dire ici, Get Data. Et puis il donne obtenir des données, il reviendra pour moi alors parce que c'est une promesse. Donc de cette façon, je dirai alors, et ensuite j'obtiendrai des valeurs. Et ces valeurs de cette façon, ils seront aussi un tableau parce que nous avons la promesse comme tableau de vieux. Donc, de cette façon, nous allons mettre le tableau des promesses exactement le même ordre que nous l'avons placé ici. Donc, la réponse aura tout le rappel sera un tableau contenant des films à venir, par exemple, et ainsi les films populaires et les films télévisés populaires et les films familiaux. J' ai donc placé ces réponses de tableau de cette façon. Je suis les films à venir, les films populaires, et la télévision populaire, les films de famille documentent tous les films. Vous devez faire attention que vous avez le même ordre que vous avez placé les appels ici, vous devez avoir le tableau de la même manière ici aussi. Veillez donc à ne pas perdre vos données. Donc, les films populaires n'auront pas lieu de quelque chose d'autre si vous mélangez ça. Et comme vous le savez, c'est une fonction de rappel. Donc, de cette façon, j'ai aussi besoin de retourner quelque chose comme ça. Nous pouvons le faire en utilisant la fonction flèche comme ceci. Et cette fonction de flèche, je peux spécifier ce qu'il va faire avec ces variables, comme définir le document qu'il films a mis des films de famille et la télévision populaire. Donc, de cette façon, je peux déplacer tous les éléments qui sont appelés ici, afin que nous puissions les déplacer à l'intérieur de ce Get Data alors. Donc, sauvegardons maintenant pour voir si nous sommes en train de mettre en forme en ce moment tout va bien. Et maintenant, je vais mettre mes données et définir les données à l'intérieur. Donc, tout d'abord, nous devons avoir les films à venir et nous avons les films comme des images comme vous vous en souvenez. Mais au lieu d'avoir des films ici, nous l'aurons comme un film populaire. Donc de cette façon, nous pouvons couper cette partie et la mettre ici. Et puis nous disons les films à venir pour chaque film. Et puis nous construisons le tableau d'images de films comme nous l'avons vu précédemment. Encore une fois, nous avons aussi besoin d'obtenir les films populaires. Donc, nous pouvons aussi bien le mettre ici après les films populaires, mais la variable ne sera pas des films, sera des films populaires. Et nous avons aussi besoin d'obtenir la télévision populaire exactement de la même façon que nous avons fait avec tous ces trucs. Alors je vais le faire vite. Donc, de cette façon, nous définissons toutes ces variables ou variables d'état avec leurs tableaux d'octets ou les réponses à partir de cela obtenir des données des services que nous avons créés auparavant. Donc nous n'avons plus besoin de tous ces services appelés. On peut les enlever maintenant. Donc, parce que nous n'avons pas besoin à nouveau d'avoir sec et ensuite ajouter attraper pour chaque service. Maintenant, nous avons tout combiné en un seul et nous aurons moins d'espace pour le code. Donc, nous n'avons pas beaucoup d'appels ici, mais nous devons aussi attraper l'erreur. Donc, après cela, vous voyez ici nous avons ici, puis, puis après cela, je vais mettre ici attraper. Et avec cette capture, je vais attraper une erreur. Et c'est exactement comme nous l'avons fait avant pour attraper l'erreur qui arrive au cas où il y aurait un problème dans le back-end. Donc, de cette façon, je vais dire erreur, puis définir l'erreur, qui est celle-ci. Nous sommes également restés précieux créé pour l'erreur de jeu. Ce sera une erreur. Ainsi, nous pouvons, de cette façon, nous montrons un message d'erreur comme nous l'avons vu précédemment. Mais de toute façon, nous ferons un composant spécial pour l'erreur comme nous le verrons plus tard. Alors maintenant, sauvegardons tout et voyons si notre application fonctionne toujours bien. Comme vous le voyez, nous obtenons toujours les données bien. Le seul petit problème ou avertissement que nous pouvons appeler que nous avons des noms dupliqués de variables. Donc parce que nous avons ici la variable d'état qui est appelée films populaires. Nous avons encore ici film populaire. Donc, je voudrais peut-être suffifier ces variables avec une donnée que nous pouvons mettre comme ceci. Donc les données des films à venir et aussi pour tout le reste. Et de cette façon, nous pouvons faire la distinction entre ces variables précieuses et les variables d'état. Donc, de cette façon, nous aurons tous suffixe à ses données. Et ici, nous aurons aussi des données de films à venir et puis des films populaires qui, et ici, nous aurons des données télévisées populaires et de nombreuses données de films. Et la même chose pour le documentaire. Donc de cette façon, nous aurons, garder le, genre. Nous n'avons pas de duplication de nommage des constantes car nous n'avons pas de films populaires en tant que variable d'état. Et puis je le définit ici comme une variable de données, il est donc préférable de les avoir de cette façon. Une autre chose que je voulais vous montrer comme nous pouvons aussi ne pas montrer cette vue ou la liste totalement, par exemple, ce curseur jusqu'à ce que les données soient prêtes. Par exemple, pour la boîte de curseur, je peux tout entourer dans un objet comme vous le voyez ici. Donc on peut mettre ici un objet. Et cet objet contiendra pour moi des données que j'appelle. Par exemple, dans ce cas ici, les images de films. Et puis je mets et 2 fois, comme s'il y a des images de films, puis mettre cette vue. Donc, de cette façon, je peux aussi bien mettre le point de vue sur le chemin. Comme si on n'avait aucun problème quand on n'avait pas de films, d'images. Ceux-ci sont curseur, ne montrera pas s'il n'y a pas d'images de films ou d'images de films est indéfini. Nous ferons donc la même chose pour les autres. Donc, dans la façon dont nous pouvons le faire comme pour éviter tous les problèmes. Vous pouvez simplement créer un objet. Et à l'intérieur de cet objet, vous mettez la variable de données. Et puis vous mettez et, et puis vous mettez un autre parenthèses. Et à l'intérieur de ces parenthèses, vous pouvez mettre ici la vue elle-même. Et quand vous enregistrez plus joli, nous allons enregistrer pour vous tous ou reformater pour vous ce code. Donc, je vais faire la même chose pour les autres types de films. Donc nous pouvons avoir ici le nom du film et aussi ces crochets pour que nous puissions le mettre sur tout. Donc, nous aurons celui-ci et aussi celui-ci et aussi celui-ci ici, nous allons mettre la télévision populaire. S' il n'y a pas de télévision populaire alors réservé. Ne montrez rien et mettez la vue s'il y a de la télévision populaire. La même chose que nous ferons aussi pour les films de famille, les vues et aussi bien ici. Alors pourquoi je fais ça ? Je fais cela parce que je veux éviter tout problème peut arriver à mon application comme la pendaison ou qui ne montre pas ou quoi que ce soit. Vous devrez donc entourer votre application toujours avec les bonnes données, sinon vous aurez des problèmes. Toujours quand nous apparaîtrons pour l'utilisateur. Donc rien ne doit être montré à l'utilisateur, l'utilisateur C, toujours l'application est stable sans aucune erreur inattendue. Donc, vous devez toujours entourer le, tous les problèmes attendus peuvent se produire dans votre application. Et peut-être que vous vous demanderez comment je peux ajouter des commentaires dans React Native. Donc, si vous voyez ici, vous pouvez ajouter un commentaire en appuyant sur Contrôle Slash. Par exemple, vous pouvez mettre ici des films de famille comme celui-ci. Ensuite, vous mettez la barre oblique de contrôle ou une barre oblique de commentaire sur le clavier. Et puis ce sera comme ça. Donc, ce sera objet et à l'intérieur un commentaire. Vous ne pouvez pas mettre un commentaire comme celui-ci seul dans React Native car il s'agit d'une commande non reconnue. Donc, pour mettre un commentaire, vous devez le mettre de cette façon entre les objets. Donc, vous pouvez dire aussi que nous avons les commentaires, comme pour de nombreux films ou tout commentaire pour décrire vos fonctions de la bonne façon, je vais mettre aussi les émissions de télévision populaires et d'autres commentaires que nous faisons ici. Donc, de cette façon, nous allons aussi faire de la documentation pour les développeurs. Donc, vous pouvez aussi bien mettre des commentaires pour le développeur que pour décrire ce qui est cette méthode ou ce que cette vue fait. Donc, de cette façon, vous n'aurez aucun problème de ne pas comprendre votre code. Nous sommes parmi les développeurs. Mais avant de passer à l'étape suivante, peut-être que vous verrez une erreur se produire dans votre application lorsque nous définissons toutes ces conditions, comme ici, comme vous le voyez, nous avons ici des films, des images et toutes ces conditions. Et cette erreur indiquant que la chaîne de texte doit être rendue dans un composant de texte. Cela se produit parce que nous avons initialisé nos variables d'état avec une valeur de chaîne. Donc, de cette façon, quand vous dites ça, ok, j'ai une chaîne, une valeur de chaîne vide. Nous en avions besoin auparavant parce que nous voulions initialiser notre état. Donc, de cette façon, nous faisons défiler ou visualisons, nous aurons ici une chaîne, valeur de chaîne vide, qui n'est pas possible de rendre car vous devez avoir une chaîne à l'intérieur d'un texte ou d'un composant de texte. Donc de cette façon, il vaut mieux toujours mettre tous ces états initiaux comme rien, comme indéfini ou non. Donc, de cette façon, votre application sera chargée correctement sans aucune initialisation de chaînes. Donc, vous éviterez cette erreur si vous le voyez. Donc, de cette façon, vous pouvez rendre comme un objet ou une valeur indéfinie initialement dans le ScrollView, puis il sera rempli de données, puis le, nos vues seront rendues correctement. Donc, une chose importante, assurez-vous que vous initialisez des états de guérison avec des valeurs vides. Rien de spécial. Donc, nous avons ici comme par exemple, l'erreur est initialisée était false. Ok, c'est bien parce qu'il faut au début qu'on n'ait aucune erreur. Et puis nous définissons l'erreur sur true quand nous avons comme une erreur. Mais ici nous avons, nous supposons que toutes ces variables d'état sont nulles ou indéfinies au début. Donc, de cette façon, nous avons maintenant des commentaires et une documentation claire de mon code. Et aussi j'ai entouré tout pour ne pas avoir d'erreurs ici. C' est donc le refactoring le plus important que nous pouvons faire pour l'application de page d'accueil. Dans les prochaines conférences, nous allons voir comment ajouter le chargement et comment nous pouvons ajouter aussi le composant d'erreur en cas de problème dans notre API de l'application. 36. Ajouter le Loading de chargement: Très bien, nous voici dans une nouvelle section. Nous allons voir comment nous pouvons mettre en œuvre une navigation. Pourquoi nous avons besoin de la navigation, que la navigation est nécessaire dans le cas où je veux visiter un film, quand je veux aller au détail du film. Donc, quand je clique sur ce film, je naviguerai vers un autre écran ou une autre page. Donc, la navigation dans React Native fonctionne avec une manière spécifique où nous avons besoin d'une bibliothèque externe, qui s'appelle React navigation native. Et nous devons installer cette bibliothèque pour pouvoir naviguer sur plusieurs écrans dans notre application. Mais tout d'abord, comme vous le voyez ici, nous avons une erreur qui est, j'ai oublié de corriger dans la section précédente, nous disons juste que le type de prop échoué contenu de prop invalide. Le contenu de l'Europe membre de la liste des contenus vient sous forme de tableau. Et nous avons dit que c'était un objet. Donc, lorsque l'API ou la page d'accueil envoie à leur liste un tableau et voici un objet, alors nous obtiendrons cette erreur. Et vous pouvez également voir le détail de cette erreur dans le terminal. Comme vous le voyez ici. Par exemple, j'ai ici comme plein prop contenu de type prop invalide du tableau de type parce que j'ai fourni ici et tableau. Il vaut donc mieux le changer aussi. Vous ne pouvez pas avoir un tableau d'options ou une liste, donc vous pouvez avoir plusieurs options de ce étranger pour moi. Je vais le mettre comme un tableau. Et comme vous le verrez, l'erreur a disparu et nous ne l'aurons plus. Donc, c'est y est un avantage de taper. Lorsque les données sont de type différent de ce que vous spécifiez ici, vous remarquerez cette erreur. Et c'est une bonne chose à propos du prototypage. Ok, allons à notre navigation React. Lorsque vous voulez aller installer cette navigation, vous devez visiter un site Web appelé React navigation.org. Et quand vous allez sur ce site et que vous allez sur la page d'accueil, comme vous le voyez ici, vous verrez quelque chose appelé redox. Et nous avons besoin ici pour installer cette bibliothèque. Je vous conseille donc de toujours lire la documentation très attentivement car c'est parfois compliqué d'installer la bibliothèque de navigation, en particulier avec React Native. Et nous allons utiliser ici React Native CLI, pas exporter. Vous devez donc prendre en compte le fait que vous utilisez React Native CLI. Alors maintenant, commençons. Donc, tout d'abord, vous devez voir quelques mystiques de briques comme par exemple, comme ici vous devez avoir un React Native Express. Vous avez besoin de connaissances dans React dont les réprimandes React Context. Ok, pas de problème à ce sujet. Commençons à installer la bibliothèque. Tout d'abord, vous devez exécuter npm install React Native ou réagir en mode natif de navigation. Donc, vous serez en mesure d'installer cette bibliothèque. Allons dans notre code Visual Studio et installez cette bibliothèque. Je vais ouvrir le terminal comme toujours comme nous l'avons appris précédemment, et coller cette commande ici. Ok, Ici, la bibliothèque a été installée et j'ai mon installation prête. Continuons dans la documentation. Vous devez lire la documentation très attentivement. Donc, ici, il est dit que cette bibliothèque va installer maintenant notre gestionnaire de gestes React Native, React Native, écrans React Native animés 3D React Native contextes de zone sûre Native. Ils agissent masque natif pour voir. Donc, tous ceux que nous avons besoin de les installer. Donc, ici, il dit que vous devez installer pour différentes CLI. L' un d'eux est Expo et l'autre est React Native. Et comme nous utilisons React Native CLI, nous allons copier ce commentaire. Vous avez toujours, parfois quelque chose appelé Yarn. Le fil est exactement comme MPM. Vous pouvez aller à la documentation de fil et vous pouvez aussi bien installer et utiliser R1 ou fil au lieu de MPM. Donc de cette façon, je vais copier ce commentaire. Vous avez ici un bouton de copie afin que vous puissiez le copier. Et puis toutes ces bibliothèques qui sont mentionnées ici, seront installées. Maintenant, revenons et essayons d'installer ces bibliothèques en utilisant notre ligne commune. Et puis je vais le coller et nous attendrons l'installation. Ok, maintenant l'installation est prête. J' ai donc un avertissement ici qu'il dit que MPM est disponible, mise à jour sur NPM, sa mise à jour de NodeJS. Donc, toujours quand vous avez besoin d'installer, vous pouvez juste voir comment le mettre à jour. Il est juste en cours d'exécution npm installer un MPM global. Donc, lorsque vous voyez cette note, cela signifie que vous pouvez mettre à jour vers une version supérieure de NodeJS et aussi vers le système de gestion des paquets afin que vous puissiez également la mettre à jour. Donc, ici, nos bibliothèques ont été installées parce que nous utilisons React Native, nous devons lancer un commentaire. Ici. Il dit que vous n'avez pas besoin de ou de React Native 0.6 et supérieur. Comme la liaison est automatique. Ce qu'il veut dire comme en liant, en reliant React natif aux composants iOS ou Android, qui sont dans les projets que nous avons. Comme on peut le voir ici. Ils sont automatiquement liés comme iOS et Android. Parce que l'installation. Parmi ces bibliothèques est aller aux modules de noeud et vous devez lier les composants et les composants natifs qui sont installés dans iOS ou Android ou un module de noeud, vous devez les lier ensemble à partir de React Native 0.6 et supérieur. Vous n'avez pas besoin de le faire comme React Native link. Mais si vous avez React Native faible ou faible, alors vous devez exécuter ce commentaire. Mais dans mon cas, je n'en ai pas besoin pour l'instant. Alors il dit que si vous êtes sur Mac et que vous développez pour iOS, comme mon cas ici, comme vous le voyez, j'utilise iOS, j'utilise Mac. Vous devez exécuter cette commande qui s'appelle MAX pod install iOS. Donc, de cette façon, vous devez installer une autre bibliothèque, mais elles iront où vers les bibliothèques du projet iOS. Donc, de cette façon, je vais coller ce commentaire ici et l'exécuter. Et puis après l'installation de ces bibliothèques, vous devez savoir que toute installation de comme par exemple, ces pod installer, comme nous l'avons vu précédemment, vous devez redémarrer l'URI du projet pour redémarrer le simulateur iOS aussi. Donc, dans ce cas, notre projet ne fonctionnera pas seulement lorsque nous redémarrons le projet. Donc, comme nous le voyons ici, nous avons le terminal, par exemple ici, celui-ci, vous devez le fermer complètement. Et puis dans votre terminal, vous devez exécuter le commentaire qui est appelé React Native exécuter iOS. La même chose vaut pour Android. Donc, vous devez aussi redémarrer votre projet après l'installation de certaines bibliothèques pour ne pas obtenir une erreur comme nous le voyons ici. Et dans React Native dit de finaliser l'installation de React Native. Comme le gestionnaire de gestes, qui est une bibliothèque qui est attachée aux bibliothèques qu'il a installées. Ajoutez ce qui suit. Au sommet. Le haut du fichier d'entrée, qui est ab.js ou index.js. Donc, de cette façon, j'ai besoin d'utiliser cette importation et ajouté à mon app.js. Donc, nous devons aller ici, et ensuite nous allons à app.js. Et ici, j'ai besoin d'importer cette bibliothèque. Et il a dit que c'était mieux d'être au sommet. Nous devons donc mettre cela en haut de la liste des importations. Donc, après cela, nous nous assurons que la bibliothèque de la navigation fonctionnera bien. Donc, ici, nous voyons comment nous installons cette bibliothèque. Toujours quand il y a quelques mises à jour, vous devez toujours suivre la documentation car certaines mises à jour peuvent être apportées, certaines mises à jour peuvent être modifiées ou une façon d'installation changera. donc mieux toujours suivre la documentation au moment de l'enregistrement de cette vidéo. C' est comme je vous l'ai montré. Alors maintenant, nous allons faire un exemple de navigation, comme nous le verrons dans la prochaine conférence. Mais rappelez-vous, redémarrez votre application avant de commencer la prochaine conférence. 37. Ajouter des composants d'erreur: Ok, dans cette conférence, nous allons faire un composant d'erreur à afficher comme une erreur ici au cas où les données ne sont pas chargées de bonne manière. Nous pouvons donc créer un composant comme nous l'avons fait précédemment. Donc, je vais aller dans le dossier des composants et puis je dirai ici erreur Node.js et ce point de flèche JS j'utiliserai les extraits. Donc, pour générer un composant pur et générer un composant pur à une, B, B, C, S et classe de composant pur week-end afin que nous puissions supprimer cette partie d'état. Et comme je vous l'ai dit précédemment, nous devons importer cela ou étendre cela de réaction. Donc, nous avons besoin d'importer aussi bien dans ce composant réagir. Donc, nous pouvons le faire en utilisant EMR. Donc, de cette façon, nous avons React importé de React. Maintenant, notre composant est prêt. Donc, pour moi, en tant que composant, je créerais, par exemple, deux erreurs. Et ces erreurs, elles peuvent être comme quelque chose. La première ligne peut être quelque chose qui a mal tourné. Et l'autre, nous pouvons être comme s'assurer que vous êtes en ligne et redémarrez l'application. Mais nous rendons aussi ces composants en quelque sorte dynamiques, sorte que nous pouvons donner des valeurs par défaut pour nos accessoires. Tout d'abord, nous allons avoir deux invites. Et ces deux sondes, on peut leur donner des noms. Ils peuvent être, par exemple, nous pouvons dire quelque chose comme l'erreur text1 et le texte d'erreur deux. Et ces deux invites obtiennent ensuite à nouveau un nom comme le texte d'erreur 1 et le texte d'erreur aussi. Donc, je vais mettre ici constante, comme un invite sera erreur Text1 ou texte d'erreur. Nous pouvons dire un et des textes d'erreur à la ligne deux. Et puis il aura ce point accessoires. Et nous pouvons faire des divs pour ces invites. Donc, nous pouvons aussi bien importer les types d'une manière ou à droite, les types que nous pouvons donner ici, types prop et le texte d'erreur on aura un type prop une chaîne parce qu'ils vont être une chaîne seulement. Et l'erreur prend deux aura ainsi que la chaîne. Donc, de cette façon, j'ai les types d'accessoires, j'ai aussi, les invites pour leur composant. Donc, ensuite, nous pouvons créer dans le modèle comme une vue, et cette vue sera au milieu de l'application. Nous devons donc importer aussi le composant de vue. Donc, nous avons ici une vue, nous devons importer, une vue de React sol natif. Nous avons ici vue et il viendra de React Native. Donc, de cette façon, nous aurons le point de vue de la bonne façon. Et puis à l'intérieur de la vue, j'aurai deux composants de texte. Nous devons donc importer aussi ces composants de texte. Donc, j'aurai ici du texte, et puis j'appellerai ici que le composant x. Donc, nous avons ici Text1 ou comme composant fixe premier. Et il inclura à l'intérieur le, le, le composant ou l'erreur Text1. Donc, de cette façon, nous aurons un texte d'erreur un dans la première ligne et le texte d'erreur aussi dans la deuxième ligne ici. Alors faisons aussi un peu de style. Donc, je vais définir une constante, nous pouvons l'appeler styles. Et ces styles seront importés à partir de la feuille de style, nous allons importer. Et cela aura la méthode de création. Et nous pouvons créer une méthode, définir la possibilité d'avoir plusieurs classes pour notre style. Nous allons donc importer la feuille de style aussi à partir du composant React Native. Donc, nous avons ici, le composant est important. Nous avons créé et nous définirons aussi une classe. Alors faisons comme pour le conteneur comme toujours, nous pouvons lui donner un style et ce style peut être importé à partir de styles. Et nous pouvons le donner comme nous l'appelons conteneur, comme n'importe quelle classe que nous faisons toujours dans l'application. Alors ce conteneur aura exactement les mêmes choses que nous définissons toujours. Donc conteneur aura les jambes un, justifier le centre du contenu, aligner les éléments, centre. Nous pouvons aussi bien nous donner mourir pour ces textes d'erreur. Donc, nous pouvons donner votre style et ces styles auront comme le nom du texte. On peut le donner comme ça. Et la même chose se produira pour la deuxième ligne du composant adulte. Donc, ici, nous aurons une autre classe qui sera appelée texte. Et ce texte contiendrait comme les propriétés que nous pouvons donner à la couleur. On peut dire la couleur. Ici, nous pouvons le donner comme du noir ou nous ne pouvons pas donner de couleur. Il faudrait par défaut la couleur noire. Et nous pouvons donner ici le poids de la police pour être comme gras, pour être quelque chose comme un gros, un peu pour que l'utilisateur puisse le lire. Et nous n'oublions pas à la fin parce que nous avons des types rapides, nous pouvons le dire aussi. Composant d'erreur, celui-ci que nous avons créé avant est des types d' accessoires de celui-ci est les types de prop que j'ai définis sur ce dessus. Donc, de cette façon, je garantis que ce composant lit ces types d'invites. Donc, de cette façon, notre composant est prêt, nous pouvons l'utiliser. Maintenant, je dois supprimer ce point-virgule. Aussi. Ici, j'ai une erreur qui est appelée types d'accessoires. J' ai besoin d'importer les types d'accessoires, ce que nous avons déjà fait auparavant. Nous devons donc importer le type de prop à partir des types de prop. Donc, de cette façon, nous aurons tous les éléments définis et notre composant est prêt à l'emploi. Donc, nous sommes arrivés à nouveau à la page d'accueil et nous pouvons dans l'écran d'accueil, vous étiez cette erreur comme corps d'état capable d'afficher une erreur exactement comment nous avons fait avec chargé. Donc, nous pouvons définir aussi bien ici s'il y a ou s'il y a une erreur, comme nous n'avons pas d'erreur. Donc, s'il y a l'état d'erreur, et alors vous pouvez afficher le composant qui est appelé erreur. Donc, de cette façon, nous devons importer notre composant. Donc, nous avons ici erreur. Et cette erreur sera comme fermée immédiatement car il s'agit d'un seul type ou d'une seule ligne. Il n'a pas de contenu. Nous devons donc importer l'erreur. Donc, nous allons sur le dessus et ensuite nous allons à nos importations. Nous pouvons le faire ici après avoir importé la liste. Donc, je vais dire ici l'erreur d'importation de, puis je vais mettre mes composants, et ces composants seront l'un d'eux erreur. Donc, de cette façon, j'ai importé par composant d'erreur. Maintenant, bien, nous avons tout va bien, mais nous n'avons pas la possibilité de voir le message d'erreur ici parce que nous n'avons actuellement aucune erreur, car après cette erreur a initialement un faux. Donc, quand il y a une erreur dans notre API, alors nous pouvons le définir à 0, pas du tout ce qu'il faut faire. Donc, de cette façon, nous pouvons aussi bien supprimer cette erreur. On peut juste rappeler comme ça pour ne pas se plaindre. Et puis nous avons aussi l'erreur de jeu. Donc, nous devons dire que s'il y en a, il est chargé et il n'y a pas d'erreur. Donc, nous pouvons également ajouter une autre fin pour dire que s'il n'y a pas d'erreur, alors ok, Afficher pour moi, l'application ou la vue de défilement, tout cela. Mais quand il y a une erreur, affichez ce composant d'erreur. Joli. Donc, nous avons maintenant ici, s'il n'y a pas d'erreur, alors retournons la condition comme nous le faisons toujours juste pour les tests. Donc, je reçois une erreur ici parce que je pense qu'il y a une faute de frappe. Donc je sais que c'est un prototype, donc nous devons avoir des types d'accessoires, des types de cultures. Donc, vous devez toujours être prudent avec les fautes de frappe pour éviter comme certaines flèches comme celle-ci. Alors sauvegardons. Ok, nous avons maintenant une page vide. Donc, cette page vide, parce que nous n'avons aucune valeur, nous n'avons pas d'entrée ou de paramètre pour cette erreur parce que nous avons des accessoires ici et ceux-ci n'ont aucune valeur. Donc, de cette façon, nous pouvons définir une valeur par défaut pour ces erreurs. Donc, de la même manière que nous l'avons fait avec les types d'accessoires, nous pouvons aussi définir les valeurs par défaut. Donc, ces valeurs par défaut, nous pouvons les définir de la même manière que nous avons des types abrupts. Donc, nous pouvons définir une constante, nous l'appelons un accessoire par défaut et une erreur. Texte1 aura comme des orbes, quelque chose s'est mal passé. Erreur à x2 aura également cette phrase. Et puis nous pouvons utiliser de la même manière que nous l'avons fait avec les types de prop d'erreur. Nous pouvons dire les valeurs par défaut du point d'erreur. Donc, dans les accessoires par défaut. Ainsi, les ports par défaut seront assignés exactement de la même manière qu'ils sont nommés. Donc, le nom erreur text1 aura cette valeur et l'erreur prend deux aura cette valeur. Quand nous économisons, nous verrons que nous avons des opés. Tout s'est passé, quelque chose s'est mal passé. Alors revenons à ces conditions. Donc, quand il y a une erreur, montrez-moi ce message d'erreur. Quand il n'y a pas d'erreur, alors montrez-moi le chargement des films et l' application de films ou la liste de films que nous avons ici. 38. Installation de la navigation de réagir native: Très bien, nous voici dans une nouvelle section. Nous allons voir comment nous pouvons mettre en œuvre une navigation. Pourquoi nous avons besoin de la navigation, que la navigation est nécessaire dans le cas où je veux visiter un film, quand je veux aller au détail du film. Donc, quand je clique sur ce film, je naviguerai vers un autre écran ou une autre page. Donc, la navigation dans React Native fonctionne avec une manière spécifique où nous avons besoin d'une bibliothèque externe, qui s'appelle React navigation native. Et nous devons installer cette bibliothèque pour pouvoir naviguer sur plusieurs écrans dans notre application. Mais tout d'abord, comme vous le voyez ici, nous avons une erreur qui est, j'ai oublié de corriger dans la section précédente, nous disons juste que le type de prop échoué contenu de prop invalide. Le contenu de l'Europe membre de la liste des contenus vient sous forme de tableau. Et nous avons dit que c'était un objet. Donc, lorsque l'API ou la page d'accueil envoie à leur liste un tableau et voici un objet, alors nous obtiendrons cette erreur. Et vous pouvez également voir le détail de cette erreur dans le terminal. Comme vous le voyez ici. Par exemple, j'ai ici comme plein prop contenu de type prop invalide du tableau de type parce que j'ai fourni ici et tableau. Il vaut donc mieux le changer aussi. Vous ne pouvez pas avoir un tableau d'options ou une liste, donc vous pouvez avoir plusieurs options de ce étranger pour moi. Je vais le mettre comme un tableau. Et comme vous le verrez, l'erreur a disparu et nous ne l'aurons plus. Donc, c'est y est un avantage de taper. Lorsque les données sont de type différent de ce que vous spécifiez ici, vous remarquerez cette erreur. Et c'est une bonne chose à propos du prototypage. Ok, allons à notre navigation React. Lorsque vous voulez aller installer cette navigation, vous devez visiter un site Web appelé React navigation.org. Et quand vous allez sur ce site et que vous allez sur la page d'accueil, comme vous le voyez ici, vous verrez quelque chose appelé redox. Et nous avons besoin ici pour installer cette bibliothèque. Je vous conseille donc de toujours lire la documentation très attentivement car c'est parfois compliqué d'installer la bibliothèque de navigation, en particulier avec React Native. Et nous allons utiliser ici React Native CLI, pas exporter. Vous devez donc prendre en compte le fait que vous utilisez React Native CLI. Alors maintenant, commençons. Donc, tout d'abord, vous devez voir quelques mystiques de briques comme par exemple, comme ici vous devez avoir un React Native Express. Vous avez besoin de connaissances dans React dont les réprimandes React Context. Ok, pas de problème à ce sujet. Commençons à installer la bibliothèque. Tout d'abord, vous devez exécuter npm installer React Native ou réagir natif de navigation. Donc, vous serez en mesure d'installer cette bibliothèque. Allons dans notre code Visual Studio et installez cette bibliothèque. Je vais ouvrir le terminal comme toujours comme nous l'avons appris précédemment, et coller cette commande ici. Ok, Ici, la bibliothèque a été installée et j'ai mon installation prête. Continuons dans la documentation. Vous devez lire la documentation très attentivement. Donc, ici, il est dit que cette bibliothèque va installer maintenant notre gestionnaire de gestes React Native, React Native, écrans React Native animés 3D React Native contextes de zone sûre Native. Ils agissent masque natif pour voir. Donc, tous ceux que nous avons besoin de les installer. Donc, ici, il dit que vous devez installer pour différentes CLI. L' un d'eux est Expo et l'autre est React Native. Et comme nous utilisons React Native CLI, nous allons copier ce commentaire. Vous avez toujours, parfois quelque chose appelé Yarn. Le fil est exactement comme MPM. Vous pouvez aller à la documentation de fil et vous pouvez aussi bien installer et utiliser R1 ou fil au lieu de MPM. Donc de cette façon, je vais copier ce commentaire. Vous avez ici un bouton de copie afin que vous puissiez le copier. Et puis toutes ces bibliothèques qui sont mentionnées ici, seront installées. Maintenant, revenons et essayons d'installer ces bibliothèques en utilisant notre ligne commune. Et puis je vais le coller et nous attendrons l'installation. Ok, maintenant l'installation est prête. J' ai donc un avertissement ici qu'il dit que MPM est disponible, mise à jour sur NPM, sa mise à jour de NodeJS. Donc, toujours quand vous avez besoin d'installer, vous pouvez juste voir comment le mettre à jour. Il est juste en cours d'exécution npm installer un MPM global. Donc, lorsque vous voyez cette note, cela signifie que vous pouvez mettre à jour vers une version supérieure de NodeJS et aussi vers le système de gestion des paquets afin que vous puissiez également la mettre à jour. Donc, ici, nos bibliothèques ont été installées parce que nous utilisons React Native, nous devons lancer un commentaire. Ici. Il dit que vous n'avez pas besoin de ou de React Native 0.6 et supérieur. Comme la liaison est automatique. Ce qu'il veut dire comme en liant, en reliant React natif aux composants iOS ou Android, qui sont dans les projets que nous avons. Comme on peut le voir ici. Ils sont automatiquement liés comme iOS et Android. Parce que l'installation. Parmi ces bibliothèques est aller aux modules de noeud et vous devez lier les composants et les composants natifs qui sont installés dans iOS ou Android ou un module de noeud, vous devez les lier ensemble à partir de React Native 0.6 et supérieur. Vous n'avez pas besoin de le faire comme React Native link. Mais si vous avez React Native faible ou faible, alors vous devez exécuter ce commentaire. Mais dans mon cas, je n'en ai pas besoin pour l'instant. Alors il dit que si vous êtes sur Mac et que vous développez pour iOS, comme mon cas ici, comme vous le voyez, j'utilise iOS, j'utilise Mac. Vous devez exécuter cette commande qui s'appelle MAX pod install iOS. Donc, de cette façon, vous devez installer une autre bibliothèque, mais elles iront où vers les bibliothèques du projet iOS. Donc, de cette façon, je vais coller ce commentaire ici et l'exécuter. Et puis après l'installation de ces bibliothèques, vous devez savoir que toute installation de comme par exemple, ces pod installer, comme nous l'avons vu précédemment, vous devez redémarrer l'URI du projet pour redémarrer le simulateur iOS aussi. Donc, dans ce cas, notre projet ne fonctionnera pas seulement lorsque nous redémarrons le projet. Donc, comme nous le voyons ici, nous avons le terminal, par exemple ici, celui-ci, vous devez le fermer complètement. Et puis dans votre terminal, vous devez exécuter le commentaire qui est appelé React Native exécuter iOS. La même chose vaut pour Android. Donc, vous devez aussi redémarrer votre projet après l'installation de certaines bibliothèques pour ne pas obtenir une erreur comme nous le voyons ici. Et dans React Native dit de finaliser l'installation de React Native. Comme le gestionnaire de gestes, qui est une bibliothèque qui est attachée aux bibliothèques qu'il a installées. Ajoutez ce qui suit. Au sommet. Le haut du fichier d'entrée, qui est ab.js ou index.js. Donc, de cette façon, j'ai besoin d'utiliser cette importation et ajouté à mon app.js. Donc, nous devons aller ici, et ensuite nous allons à app.js. Et ici, j'ai besoin d'importer cette bibliothèque. Et il a dit que c'était mieux d'être au sommet. Nous devons donc mettre cela en haut de la liste des importations. Donc, après cela, nous nous assurons que la bibliothèque de la navigation fonctionnera bien. Donc, ici, nous voyons comment nous installons cette bibliothèque. Toujours quand il y a quelques mises à jour, vous devez toujours suivre la documentation car certaines mises à jour peuvent être apportées, certaines mises à jour peuvent être modifiées ou une façon d'installation changera. donc mieux toujours suivre la documentation au moment de l'enregistrement de cette vidéo. C' est comme je vous l'ai montré. Alors maintenant, nous allons faire un exemple de navigation, comme nous le verrons dans la prochaine conférence. Mais rappelez-vous, redémarrez votre application avant de commencer la prochaine conférence. 39. Créer un navigateur de pile: Ok, jusqu'à maintenant nous n'avons pas fini avec la navigation pour maintenant nous ne pouvons pas naviguer vers une autre page ou le détail du film. Continuons donc dans la documentation de React, Native et navigation. À la fin, lorsque nous avons fait toutes les informations de la première page, il ya quelque chose continuer à la navigation Hello React. Ici, il nous donnera un exemple comment nous pouvons passer à une autre page de l'application React. Donc, de cette façon, vous devez installer quelque chose appelé bibliothèque de navigateur de pile. Et l'installation de cette bibliothèque est juste en utilisant un commentaire MPM, installer, React navigation, puis empiler. Donc, je vais examiner la documentation rapidement. Bien sûr, vous aurez le temps de le lire et aussi, vous devez savoir plus d'informations sur ce navigateur de pile de navigateur de doc est en fait comme quelque chose comme tient mes anciennes pages où je vais naviguer. Donc de cette façon, j'aurai la page d'accueil, j'aurai le détail. J' aurai leur page de recherche. J' aurai toutes les autres pages que je veux montrer dans ma demande. Donc, de cette façon, nous avons besoin d'installer MPM, React pile de navigation native. Donc, allons à nouveau au code et puis coller ce commentaire. Et il va installer pour moi cette bibliothèque. Donc, après cela, en utilisant cette bibliothèque, nous verrons un exemple fourni par React Native Navigator. Donc, nous devons créer un navigateur de pile, création d'une pile maintenant Vd navigateur est fourni dans cet exemple. Ainsi, par exemple, nous devons créer un composant. Ce composant, nous allons l'appeler dans quelque chose appelé conteneur de navigation. Et dans ce conteneur de navigation, j'aurai un navigateur de pile. Et pour chaque page de l'application, j'aurai un écran de pile. Donc de cette façon, j'aurai l'écran d'accueil. J' aurai aussi un écran détaillé et j'aurai l'écran de recherche. Alors faisons-le exactement de la même façon qu'il l'a fait. Donc, tout d'abord, nous devons importer deux choses. L' un d'eux est créer la pile Navigator. Donc, je vais importer cette méthode qui s'appelle Create Stack navigator. Et aussi, il pourrait définir une constante qui est appelée pile. Et ce DAG, il a appelé cette fonction que nous avons importée ici. Donc, faisons la même chose dans app.js. Alors fermons le terminal. Et puis nous dirons ici importer, Réagir ou créer un navigateur de pile. Et nous définirons notre constante qui est appelée pile. Donc, nous revenons à nouveau au code et ensuite nous définissons cette constante ici. Donc, après cela, à l'intérieur de cette vue, vous n'aurez pas cette vue. On n'appellera pas chez nous. Nous mettons ce composant maison dans la pile. Comment nous pouvons faire ça. Donc, d'abord, nous devons dire ou conteneur de navigation. Parce que conteneur de navigation, comme vous le voyez ici, est un composant qui gère votre, notre arborescence de navigation et contient l'état de navigation. Ce composant doit envelopper toute la structure du navigateur. Habituellement, nous rendrions ce composant à la racine de notre application, qui est généralement un composant ou exporté à partir de app.js. Alors faisons la même chose pour ne pas sortir de la documentation. Donc, je vais avoir un conteneur de navigation, puis pile navigateur, et puis j'appellerai ce composant afin que nous puissions copier toute cette partie et ensuite aller à notre application. Nous supprimons toute cette vue ou mettons la comme près d'elle pour voir ce que nous pouvons copier à nouveau. J' ai donc un conteneur de navigation, nous devons l'importer aussi. Donc, je vais encore important. Donc, nous allons ici et nous disons que nous devons importer le conteneur de navigation. Et puis nous avons le navigateur de points de pile. Exactement. Cette pile a une méthode qui est appelée ou a un composant qui est appelé Navigator. Et cette pile Navigator a aussi un composant qui est appelé écran. Ainsi, nous pouvons atteindre ces composants en utilisant cet opérateur, qui est point normalement. Donc, nous pouvons dire un nom pour ce composant. Par exemple, la pauvreté que la navigation, puis nous spécifions le composant que nous allons naviguer vers. Donc, dans notre cas, ça s'appelle la maison. Nous avons déjà importé le composant maison, donc je peux mettre ici à la maison. Et puis nous allons nous asseoir plus cette vue que nous avions précédemment ici. Et puis nous sauvegardons notre application et allons au simulateur et nous verrons ce qui se passe. Donc maintenant, nous, comme vous le voyez que nous n'avons aucun problème dans notre application. Et en haut, nous verrons que nous avons une zone sauvegardée, comme avant l'application était pleine sur l'écran. Donc, je vais avoir un contrôle qui rapidement, juste pour vous montrer, vous voyez que notre application est pleine chute sur l'écran de sorte que vous ne pouvez pas parfois lire toutes ces informations sont des formulaires multiples. Donc, le navigateur utilise quelque chose appelé Enregistrer la navigation de zone ou l'écran de zone sécurisée. Donc, de cette façon, vous pouvez garantir que votre navigateur fonctionne d'une manière que pour sauver toute cette zone ne va pas se déplacer ou vers le haut, vers le formulaire. Il aura un peu d'espace ici. Donc je vais remettre ce code. Et comme vous le voyez, nous avons ici cette zone sûre. Donc, nous verrons plus tard comment nous pouvons supprimer toutes ces propriétés. Comme par exemple, nous pouvons supprimer comme ce nom qui est appelé maison. Nous pouvons aussi bien faire d'autres options que nous verrons plus tard. Donc maintenant, supprimons cette importation de cette vue afin que nous n'en ayons plus besoin. Et nous avons importé tous ces trucs. Et notre navigateur fonctionne de cette façon parfaitement. Lorsque vous obtenez des erreurs, assurez-vous que vous avez démarré votre application comme je vous l'ai dit précédemment. Donc, vous devez terminer le terminal, puis le clauses totalement, puis exécuter à nouveau l'application en utilisant la commande Exécuter iOS, comme nous l'avons vu précédemment. 40. Parcourez le composant de détails de films: Ok, donc dans cette conférence, nous allons ajouter un nouvel écran, qui sera la queue du film. Donc, quand je clique ici, je dois naviguer vers le détail des films ou un nouveau composant qui s'appelle détails. Donc ici, si vous vous souvenez dans la pile Navigator, nous avons créé plusieurs écrans et l'un d'eux est à la maison. Donc, de cette façon, nous pouvons aussi bien ajouter la page détaillée afin que nous puissions aller ici et dire que je veux ici des détails. On peut le donner comme une messagerie instantanée, comme un détail. Et aussi le composant sera appelé détail. Nous allons donc créer le composant de détail. Je vais aller dans le dossier screen et puis je vais créer un fichier. Je vais appeler ce détail du dossier. Et dans ce détail, nous allons créer un composant. Si vous vous en souvenez, nous n'avons pas créé le composant de la page d'accueil en utilisant les extraits, et nous ferons de la même manière avec le détail. Donc, si vous vous souvenez, nous avons ce commentaire qui est appelé F, sont les composants sans état retournent. Et de cette façon, nous aurons cette const et ensuite nous aurons le détail. Et bien sûr, nous aurons les autres informations dont nous avons besoin. Et importons aussi, ils réagissent. Donc je dirai que voici votre numéro trois de React. Et puis nous utiliserons ici le fragment si vous vous en souvenez. Donc, je vais mettre ici un composant. Je dirai « React dot fragment ». Et à l'intérieur de ce fragment, nous pouvons placer du texte, vous tous, juste pour dire que c'est le détail du film afin que nous puissions voir comment nous pouvons y accéder. Donc, je vais dire ici comme un texte. Et ce composant de texte contiendra, par exemple, quelque chose comme dire, détail de film, juste comme ça. Ainsi, nous serons en mesure de voir la page détaillée du film quand nous voulons y accéder. Et n'oubliez pas d'importer le composant texte à partir de React Native. Donc, sauvegardons ce composant et nous irons à notre app.js et nous devons importer les composants détaillés. Donc, ici, nous devons faire une importation, puis le détail de. Et puis nous avons mis les écrans exactement comme nous l'avons fait avec le composant maison afin que nous puissions aussi bien obtenir le détail. Donc de cette façon, nous avons appelé le composant de balles. Ok, gentil. Tout fonctionne bien. Nous n'avons pas eu d'erreur jusqu'à maintenant, donc nous pouvons continuer et la documentation de la bibliothèque. Et si vous vous souvenez, nous avons ajouté comme un écran et nous allons en ajouter un autre, que nous avons déjà ajouté. Il y a donc une inflammation qui est peut-être intéressante pour vous, comme la configuration du navigateur. La configuration du Navigateur est toujours comme avec une configuration supplémentaire que vous souhaitez ajouter au navigateur. Par exemple, dit-il, comme nous pouvons ajouter quelque chose appelé Options. Et puis dans cette option, vous pouvez spécifier un titre de cette navigation. Donc, ce titre sera affiché ici en haut. Donc, de cette façon, vous pouvez avoir comme quelques options supplémentaires. Mais continuons plus. Comme nous reviendrons à ce passage accessoires supplémentaires plus tard. Mais d'abord, nous devons voir comment nous pouvons naviguer entre les écrans. Donc, je veux passer à une autre section qui est appelée se déplacer entre les écrans. Donc, ici, nous avons aussi quelque chose comme exactement comme HTML. Je veux avoir un lien et j'appuie dessus, puis j'irai à la page détaillée. Mais c'est exactement comment c'est fait avec HTML. Nous le ferons avec React Native. On a besoin d'un bouton, on a besoin d'un événement. Nous, quand nous avons besoin de l'utilisateur pour cliquer sur quelque chose pour aller dans le détail du film. Dans notre cas ici, nous avons cliqué sur ces boutons ou nous pouvons dire en cliquant sur ces cartes. Si vous vous souvenez, ce composant appelé carte, et nous avons créé cette carte comme une opacité touchable, si vous vous souvenez. Nous devons donc utiliser aussi le composant qui est appelé opacité touchable. Nous devons ajouter la fonction de compresse. Donc, nous avons ici sous presse et ensuite vous devez passer quelques paramètres. Allons à notre carte et nous verrons comment nous pouvons le faire. Donc gardé dot js, si vous vous souvenez, nous avons utilisé quelque chose appelé opacité touchable. Alors passons à ce composant dans la bibliothèque de composants et nous verrons comment nous pouvons utiliser cette opacité touchable dans la documentation. Comme vous le voyez, nous avons une méthode qui est appelée sur presse pour une opacité touchable. Ainsi, nous pouvons utiliser la même méthode ou la même propriété pour spécifier une méthode exactement comment il a fait dans la documentation de la navigation lors de l'utilisation d'un bouton. Alors ajoutons cette fonction à notre garde. J' irai à nouveau au code et je verrai ici que j'ai une opacité touchable. Et puis nous avons compresse et nous avons sur la méthode de presse et la méthode de compresse. Ce n'est pas encore défini. Nous allons le définir exactement comment défini dans la manière dans la bibliothèque de navigation. Donc vous auriez il a sur le sein et puis ce sera une fonction flèche d'appel de fonction. Et il a dit navigation, navigation par points et détails. Donc, de cette façon, j'ai besoin de spécifier dans leur carte que j'ai besoin de naviguer dans la navigation. Pour accéder à la page de détails. D'accord. Et d'où vient cette navigation, où elle vient d'ici, écran d'accueil, vous devez utiliser quelque chose de variable d'état, qui est appelée navigation, et c'est à l'intérieur d'un objet. Et puis vous devez définir une navigation et vous pouvez l'utiliser à l'intérieur. Ainsi, le composant homeschooling sait qu'il a une propriété appelée navigation. Et cette navigation m'aidera à naviguer vers un autre écran. Donc c'est exactement comme quelque chose, un lien, je dis, d'accord, dans cet écran d'accueil j'ai un lien. Et dans ces liens, je veux lier ou aller à une autre page qui est appelée détails. Alors faisons de la même façon. Mais ici, nous ne sommes pas dans l'écran d'accueil comme vous le voyez, nous sommes dans une carte, dans un composant. Donc, tout d'abord, allons à notre écran d'accueil, puis ajoutons cet objet, qui est appelé comme à l'intérieur, nous l'appelons navigation. Et cette navigation, je vais le passer comme un accessoire au composant de carte. C' est très important parce que nous devons passer cette fonction que vous ne pouvez pas faire avec ici comme directement. Sinon, il se déplacera à elle a hors de ce DAG de l'arborescence de navigation. Donc, l'arborescence de navigation doit être cohérente, elle doit être spécifiée. Donc je dois partir de l'écran d'accueil. J' utilise la même référence de navigation ou la même navigation trois. Je veux donc passer cet arbre de navigation à ma carte. Donc, je vais revenir ici à ma carte. Je n'ai pas ici de cartes parce que j'ai une liste et la liste contiennent plusieurs cartes que vous vous souvenez. Donc ici, j'ai besoin de passer aussi bien que la navigation comme un accessoire. Donc, je vais définir un prop, appeler navigation dans ce composant de liste. Donc, je vais aller ici au composant de liste. J' aurais plusieurs accessoires et l'une de ces invites s'appellera aussi la navigation. Alors, ici, comment allez-vous voir que nous sommes en train de passer l'arbre de navigation ? Donc, passer l'arborescence de navigation de l'écran d'accueil aux enfants et au composant pour utiliser la même référence. Sinon, nous sortirons de Navigation 3 et cela nous causera quelques problèmes. Ensuite, j'ai ici ce composant de carte que j'ai appelé précédemment comme vous le voyez ici. Et puis cette composante de garde aussi. Nous aurons une propriété qui s'appelle navigation. Donc, nous devons aller à leur composant de carte. Et dans les accessoires, j'ajouterai l'accessoire de navigation. Et de cette façon, quand j'ai ici la méthode que je veux faire sur la presse sur l'opacité touchable. Je peux utiliser la navigation exactement de la même façon que c'est fait ici. Alors rappelez-vous, les trois doivent être cohérents. Donc, c'est exactement la façon de garder l'obscurité de la navigation. Ok, copions cette méthode maintenant et allons à notre composant de carte. Au lieu de ces sur site, nous pouvons définir la méthode de cette façon. Donc, nous avons ici cette navigation de méthode, que j'ai utilisée comme référence, puis naviguez jusqu'à la queue. Ici, nous n'avons pas de détails. Nous avons un composant de détail. Pourquoi j'ai des détails ? Parce que dans la pile, j'ai défini un composant qui est appelé ou navigation à l'écran, qui est appelé détail. Donc, nous avons ici des détails, mais nous devons aussi le définir comme détail. Donc, le nom ici doit être le même nom que celui de la navigation vers laquelle vous allez naviguer. Donc j'ai ici détail, alors je dois avoir dans leur panier ainsi qu'un détail. Alors sauvegardons ça. Sauvegardons cette liste. C' est la maison en sécurité et tout sauver. Et puis nous allons à l'application. Et dans l'application maintenant j'ai tous les films. Je n'ai aucune erreur. Donc, quand je clique sur l'un d'eux, ok, Il dit que non défini n'est pas un objet. Cela s'est produit parce que j'ai cliqué sur quelque chose qui n'est pas encore indéfini. Donc nous pouvons avoir, ici nous avons quelque chose comme dans l'écran d'accueil, nous avons plusieurs listes. Si vous vous souvenez, j'ai passé la navigation uniquement pour leur première liste. Nous devons donc le passer à toutes les listes de la bibliothèque ou dans les composants de la page d'accueil. Donc nous avons une liste, une liste, plusieurs listes. On sauve tout. Maintenant je vais à cette liste, d'accord, on voit qu'on a déménagé à un détail de film. Donc, de cette façon, je serai en mesure de naviguer vers une autre page en utilisant comme cet outil de navigation. Et nous avons maintenant la navigation de ce détail. Ce dont nous avons besoin maintenant est juste de styliser ce détail de film et mettre un vrai détail de film de la composante du film. Et nous aurons besoin de voir comment nous pouvons transmettre les données du composant cliqué ou cliquez sur film. Alors j'ai cliqué sur ce film, puis je veux voir le détail de ce film aussi. Donc, de cette façon, nous avons besoin d'envoyer aussi quelques données supplémentaires avec la navigation, comme nous le verrons dans la prochaine conférence. Donc, comme résumé, nous avons commencé à partir de ce pont. Je vais donc le récapituler comme maintenant rapidement. On doit empiler des écrans. Donc nous en avons un est la maison, un est le détail. Et avec les détails, nous devons faire quelque chose, donc nous devons y naviguer d'une manière ou d'une autre. Donc, dans notre application, nous avons un écran d'accueil Démarrer est sera celui-ci. Donc, dans mon cas, je veux cliquer sur une de ces cartes. Et cette carte est un composant que j'ai créé avant. Donc, je vais aller à ce composant de carte et je dirai que le point de navigation naviguer vers les détails. Mais dans ce cas, nous avons un problème d'où j'obtiendrais cette navigation. Nous avons fait la navigation comme un accessoire parce que nous avons besoin de passer la navigation, pas directement comment nous l'avons ici dans l'écran d'accueil et dans la documentation ? Non, parce qu'on veut garder leur pile. J' ai donc créé un accessoire appelé navigation. Et puis cela de l'écran d'accueil en utilisant la même méthode comme il l'a fait exactement. Donc, dans le composant lui-même, j'ai défini la navigation, puis la navigation. Cette variable appelons-la, est passée à la liste parce que je n'ai pas accès à leur voiture directement ici. Donc j'envoie à leur liste. Et à l'intérieur de la liste, je définit une propriété qui s'appelle navigation. Et dans leur navigation sont dans la liste elle-même. J' ai une carte, et cette carte a aussi la propriété est la navigation. Donc, j'utilise exactement le même arbre de navigation. Tu dois faire attention à la chose. Donc, de cette façon, vous ne perdrez pas les références car parfois nous allons ajouter comme aller à l'écran d'accueil, aller en haut, ou supprimer l'arborescence de navigation. C' est donc très important pour vous. Dans notre cas, nous avons juste le détail des films. Nous allons y naviguer et voir le détail du film. 41. Présentation des détails de film: Ok, ce que nous allons faire dans cette section, nous verrons le détail des films. Si vous vous souvenez, j'ai une démo en cours d'exécution sur mon application ou sur mon simulateur Android, et j'utilise le simulateur iOS. Mais maintenant, si vous voulez vous voir là-bas détail du film comme ce que nous allons faire à l'avenir ou dans cette section. Donc, quand je cours ici ou quand je clique sur l'un des films, je vais voir comme une image du film. Je vais voir ici une URL comme revenir en arrière. Et puis j'aurai un bouton de lecture. Et aussi comme le titre et ce que Jenner, ce film appartient à ou quelle catégorie. Et aussi, nous aurons une note et aussi, nous aurons une description et une date de sortie. Toutes ces informations proviendront de l'API de nos films. Donc, de cette façon, j'ai besoin de passer ces données de leur film cliqué au composant détail du film comme nous l'avons dit précédemment. Alors commençons à travailler avec cela, et j'espère que vous apprécierez cette section. 42. Transférez des données de film sélectionnés à la série de données de films à les détails: D' accord, pour revenir à notre projet, si vous vous souvenez, nous nous sommes arrêtés à la fin quand nous essayions de naviguer vers notre film, mais nous n'avons pas encore les données. Donc, je veux obtenir les données du film cliqué. Quand je clique sur ce film, je veux voir à cela aussi. Donc, nous pouvons aller ici et aussi nous pouvons lire la documentation de React navigation. Donc, après avoir déplacé entre les écrans, nous avons quelque chose appelé passer les paramètres aux routes. Donc passer les paramètres à l'itinéraire, comme je veux passer le film sur lequel j'ai cliqué sur la page d'accueil, puis l'envoyer au composant du détail du film. Ainsi, je pourrai lire ces données. Passer le paramètre est très, très facile avec la navigation native React. Donc, vous allez ici et vous pouvez aller sur le site, comme quand nous avons créé le site sur notre garde, je passe aussi quelques données comme un second paramètre de cette méthode, dont nous avons parlé, qui s'appelle naviguer. Donc, en fait, quand je vais à mon application et aller au composant de garde, par exemple, nous allons ici, composant de garde et nous avons défini ici l'événement click ou compress événement. Donc ici, après avoir spécifié le composant où je vais naviguer vers le campus aussi. Je peux aussi passer quelques données supplémentaires. Ces données peuvent être l'élément ou le film que j'envoie pour naviguer vers cette page. Donc de cette façon, je peux donner un nom pour notre détail. Je peux l'appeler détail du film par exemple. Donc on peut dire le détail du film ici. Et la valeur du détail du film sera l'élément lui-même, l'élément ou le film qui est transmis au détail du film ou à leur panier lui-même. Maintenant, on va bien. Nous avons notre composant de carte et nous avons passé à travers la navigation les données, donc ok. En détail composant, comment nous pouvons lire ces données. La lecture des données dans la documentation est mentionnée de cette façon. Donc, vous allez à l'écran de détails que nous avons créé, puis vous passez route et la navigation parce que nous avons ici ce composant de détail comme vert dans la pile. Donc de cette façon, je ne peux pas dire que je peux utiliser un itinéraire. Et aussi l'itinéraire de navigation est quelque chose en vous où nous allons obtenir les paramètres. Et comme vous le voyez, il a défini une constante. C' est exactement comme il l'a défini ici. Donc, il a passé l'ID de l'élément et aussi d'autres paramètres. Et puis il les a reçus exactement avec les mêmes noms dans le fond de la route. De cette façon, je peux lire aussi bien les bas des détails du film, puis les affecter à une variable ou une constante et lire ces variables ou ces sauvegardes. Alors passons à notre composant détaillé. Et puis dans le composant détaillé, comme nous l'avons vu précédemment, nous devons passer la route. Et aussi la navigation, exactement comment elle est définie ou comment elle est affichée là. Donc, et puis nous pouvons définir une constante, et nous appelons cette constante comme détail de film. Donc, de cette façon, nous pouvons dire que le film b del est route dot params. Et le nom du composant ou de l'objet que j'ai défini ici, où il contient le détail du film. Donc, de cette façon, j'étais un détail de film. Donc ici, je vais avoir des points RouteParams plus en détail. Donc, de cette façon, je tiens le détail du film dans cette constante que j'ai définie ici. Donc, de cette façon, je peux voir aussi le plus renommer sur lequel j'ai cliqué. Donc, quand je clique sur ce film, je veux voir le nom de ce film. Donc, de cette façon, nous pouvons supprimer cette partie et dire comme point de détail de film. Si vous vous souvenez du champ pour lequel contient le nom du film, nous l'avons appelé, ou c'est dans l'API appelée un titre. De cette façon, quand je clique sur ce film, je verrai que le titre de ce film sur lequel j'ai cliqué. Donc ici, nous avons plusieurs films et par exemple, j'ai des films familiers. C' est Luka, un autre RIAA, et plusieurs films. Et c'est dynamique pour moi. Donc, de cette façon, je transmets toutes les données à l'intérieur de mon composant de la carte sur laquelle j'ai cliqué. Donc le film est venu comme un objet, comme un accessoire à ce garde et ensuite il leur est transmis détail de film. Et puis dans le détail, j'ai lu ces données et j'ai arrêté ici. 43. Service de détails du film: Ok, maintenant dans cette conférence, nous allons utiliser le service de détail du film. Ok, peut-être que tu vas me dire pourquoi tu dois créer un service de détail de film. Pourquoi vous devez récupérer à nouveau les données du film, alors que vous avez déjà les données définies dans le détail du film. Bien sûr, l'API comme vous le voyez ici dans notre film DBAPI. Ok, nous sommes chanceux que nous obtenons quand nous obtenons la liste des films, par exemple, les films populaires, Nous obtenons tous les films en quelque sorte de cette façon. Donc, nous obtenons dans les résultats, plus nous renforçons et les adultes et les identifiants de genre ont vu de cette façon, nous pouvons être conscients que nous avons assez de données. Mais si nous vérifions le détail du film, si nous allons ici à là, obtenir des détails et nous verrons plus v, et puis nous obtiendrons ce détail du film. Si nous y allons, nous verrons que nous avons plus de détails. Nous n'avons pas seulement des genres comme ça. Nous avons une pièce d'identité et le nom du journaliste. Donc, nous pouvons, de cette façon, nous pouvons obtenir toutes les, par exemple, les informations en détail, pas seulement les identifiants. Donc, tout d'abord, j'irais à mes services et puis créer un nouveau service qui s'appellera get movie. On a juste besoin d'avoir des détails sur le film. Donc, de cette façon, nous allons copier une de ces API ou ces services et nous allons le renommer. On dira aller chercher un film. Ici, nous allons passer l'ID du film. Nous devons passer ID parce que, comme vous le voyez ici, notre API acquière-t-elle un ID ? Donc, pour avoir un film, j'ai besoin d'en obtenir l'identification. Donc, de cette façon, nous pouvons avoir la même API. Donc je vais mettre celui-là comme ici. On peut avoir un film slash et on se débarrasse de tout ça. Et nous aurons seulement comme ça. Nous aurons donc l'URL de l'API, la barre oblique d'URL de base, puis la clé d'API. Et nous n'avons pas besoin de ces genres. De cette façon, nous pouvons économiser et nous aurons notre service prêt. Mais les données, ce ne sera pas avec les résultats parce que si nous le vérifions, cette réponse ici, il dit qu'il nous donnera directement un objet contenant toutes les données. Donc, je vais aller à nouveau, a pris mon service et je dirai retour directement, c'est des données de points d'étangs. Aussi, si vous les connaissez dans mon API, comme vous le voyez ici, que nous devons passer l'ID du film. Donc, si je vais ici au détail du film, obtenir des détails, je dois passer par l'ID du film dans l'URL ou dans l'API. Donc de cette façon, ce n'est pas suffisant de l'avoir comme ça. Nous devons aussi passer la carte d'identité. Donc de cette façon, nous pouvons avoir ici cette méthode, et ensuite je peux dire ici barre oblique. Et puis nous mettons un autre paramètre ou un autre paramètre défini, ce qui sera l'idée que je passe ici. Ok, exactement comment nous avons fait avant avec la page d'accueil, plus nous avons tous la liste des films, si vous vous souvenez, nous avons appelé cet état et puis nous avons dit l'état de l'utilisateur et ensuite utiliser l'effet. Et puis nous obtenions leur service et puis définissons le résultat de ce service dans ma constante ou les constantes d'état. Nous ferons donc de même. Tout d'abord, je vais appeler comme une constante détaillée. Je vais le définir ici. Donc, nous pouvons avoir ici constante qui est appelé détail, et puis il aura un ensemble détaillé aussi. Et il aura utilisé un état. Nous avons donc besoin d'importer l'état de l'utilisateur. Donc maintenant, après cela, nous n'avons plus besoin de ce détail de film, mais nous aurons besoin du paramètre, c'est parce que je vais avoir l'ID du film. On peut dire comme sur ce DO le mettre sur le dessus et on peut dire une carte d'identité de film. Et puis nous pouvons passer dans le détail du film aussi point ID. Parce que si vous vous souvenez, nous avons dans nos paramètres, donc nous pouvons aller à notre API, qui était, par exemple, devient populaire. Et ils sont devenus populaires. Nous avons dans cet ID de réponse, nous obtenons l'ID de chaque film sur lequel nous cliquons sur ce garde, pas seulement leur nom ou leur Dido, nous pouvons également avoir l'ID. Donc, après cela, nous pouvons également utiliser cet ID de film pour obtenir les données de ce film en détail en utilisant notre service. Donc, de cette façon, nous devons aussi utiliser un effet. Donc, nous disons l'effet d'utilisation et cet effet énorme aussi, nous allons l'importer de réaction. Parfois, il s'agit d'une intégration automatique. Tu n'as pas besoin de faire ça. Donc, vous avez juste besoin de corriger l'importation automatiquement afin que vous puissiez avoir comme une importation plus cohérente. Donc, utilisez l'effet. Il a une fonction de rappel et cette fonction de rappel contiendra pour moi cette possibilité de définir ou de définir les valeurs constantes ou les variables d'état avec le résultat de ce sédiment. Donc, comme nous l'avons fait à la maison, si vous vous souvenez, nous obtenions ces données puis nous les mettions en place. Donc, de cette façon, j'ai besoin d'importer mon service que j'ai créé auparavant. Donc, je vais dire obtenir un film et ensuite je vais importer ceci. Service, je dirai ici, Importer, obtenir un film de. Et puis j'ai été dit, le chemin que j'ai défini mes services. Donc, je dirai peut-être ici, un pas en avant, les services et ensuite les services. Donc, dans le film, j'aurai mon détail de film. Donc, ici, nous allons dire obtient plus v. Et puis nous allons passer l'ID, qui est l'ID du film, comme nous l'avons dit ici. Et puis ce sera une promesse que vous vous souvenez. Et donc je vais dire ici, et dans ce alors j'obtiendrais des données de film. Donc de cette façon, j'aurai un rappel. Et à l'intérieur des données de film, je peux dire définir les détails avec les données qui viennent dans cette réponse. Donc, je vais dire ici ledit détail, plus readapt. Et bien sûr, pour garantir que cela exécuté un nombre illimité de fois, si vous vous souvenez de la fuite de mémoire et de la performance, nous devons mettre ceci un tableau vide. Donc, dans ce cas, nous n'aurons aucun problème à ne pas être exécuté illimité de fois. Mais comme vous le voyez ici, ES peluches se plaint en disant que l'identité du film n'est pas connue. Donc, c'est comme si vous aviez inclus ou supprimez la dépendance. Donc, pour résoudre ce problème et garder que nous appelons ce service une seule fois dans l'effet et que nous n'avons pas de fuite de mémoire, alors nous avons juste besoin de passer l'ID de film ici. Donc, dans ce cas, vous allez vous débarrasser de l'erreur de peluches ES. Donc de cette façon, j'aurai le détail, ou on peut appeler ça comme un détail de film. Donc, de cette façon, je vais avoir plus détaillé et définir le détail du film. Donc, pour avoir un nom plus cohérent. Donc, je vais renommer ceci pour définir le détail du film, puis plus du détail, je peux l'utiliser ici. Donc, dans ce cas, nous allons enregistrer, cliquez sur l'un des films. Comme vous le voyez, nous obtenons une erreur. Nous disons qu'undefined est un objet. Par exemple, cela s'est produit parce que les détails du film ne sont pas encore prêts. Donc si vous vous souvenez, nous avons utilisé chargé. Donc, après avoir chargé les données , je peux rendre mon application ou ma page. Donc, dans ce cas, nous devons définir une autre constante. Nous l'appelons chargé et mis chargé. Donc, de cette façon, le cas par défaut de cet ensemble chargé ou ils sont chargés sera faux. Donc, après cela, je peux dire ici que si chargé ou d'abord nous devons définir chargé. Parce que ici, nous avons alors, et puis nous avons mis ici ensemble chargé. Et ce sera vrai parce que nous avons dit que les données avec succès. Tout ce que nous avons obtenu les données avec succès. Donc, nous pouvons avoir ici aussi et objet, si vous vous souvenez, nous disons chargé et ensuite nous mettons ceci à l'intérieur de ces parenthèses. Et nous garantissons que nous avons l'état chargé de notre application de la bonne façon. Alors économisons maintenant et allons à l'un de nos films. Donc, j'irais ici et je verrai comme par exemple, celui-ci. Et nous verrons que nous avons une erreur. C' est dire que le service par défaut n'est pas une fonction. Je fais cette erreur par but juste pour m'assurer que vous êtes, lorsque vous importez un service ou une fonction ou une constante, vous devrez le mettre dans les crochets d'objet lorsque vous allez importer quelque chose ou un service ou une méthode exactement la même manière que nous le définissons parce que nous avons constant et ensuite obtenir film, puis nous définissons notre méthode. Donc, de cette façon, vous devez être sûr que vous utilisez ces crochets. Après cela, cela fonctionnera pour vous. Donc maintenant, nous avons ici le nom du film qui vient exactement comme prévu, mais le nom du film ne vient pas de la navigation, il vient de l'API. Après qu'il a été chargé, ainsi de suite, le film, L'oser, commençons d'abord à créer un ScrollView. Si vous vous souvenez, nous utilisions également le score de ScrollView dans la page d'accueil. Alors je vais le faire vite. Donc, j'appellerais un ScrollView. Et cette vue de défilement sera importée à partir de React Native. Donc, je vais aller ici à l'intérieur du fragment, j'aurai un ScrollView. Et dans cette vue de défilement avec venir de React Native aussi bien. Et dans cette vue de défilement, peut-être que nous pouvons y ajouter un style ou nous pouvons le garder comme ça pour l'instant. Et à l'intérieur de cette vue de défilement. Donc, je peux déplacer toute cette vue de défilement ou cela chargé dans la vue de défilement elle-même. Donc à l'intérieur, il sera le texte. Et ici, nous aurons si chargé et défiler vue puis mettre pour moi le contenu. Donc on ne peut pas avoir ça de la bonne façon. J' ai donc juste besoin de fermer cet objet, puis d'enregistrer. Ok, nous avons chargé. Et puis à l'intérieur du ScrollView, pour l'instant, je n'ai pas besoin d'un texte. J' ai besoin de l'image, si tu te souviens. Donc, je vais remplacer cela par l'image et ce composant d'image. Nous pouvons aussi l'importer depuis React Native. Donc, nous pouvons dire ici l'image et puis cette image aura comme quelques propriétés. Donc, si vous vous souvenez, nous avons utilisé le composant image dans notre garde. Dans notre garde, nous avons défini toutes ces propriétés. Donc je n'ai pas besoin de les répéter à nouveau. Nous pouvons donc utiliser toutes ces propriétés. Je peux copier toute cette image. Nous avons juste besoin de remplacer certains paramètres. Donc, je vais dire ici image. Et puis nous devons remplacer comme par exemple, le mode de redimensionnement est très bien. Style, ok, on doit ajouter des styles pour ça. Copions donc les mêmes styles. Donc, nous pouvons copier tous ces styles sauf comme certaines classes. Donc, je mets ici la feuille de style constante, nous devons l'importer. Encore une fois. Tout est exactement comme nous faisions avant, donc je n'ai pas besoin de les expliquer à nouveau. Donc nous pouvons avoir ici la classe d'image et nous pouvons nous débarrasser de toutes ces lunettes. Donc, nous n'avons pas besoin d'un article, mais nous n'aurions pas le détail du film. Donc, au détail du film, point chemin de l'affiche et puis le foie il y a le chemin de l'affiche détaillée du film. Ensuite, affichez, sinon, affichez l'image du détenteur de place. On n'a pas cette image du détenteur. Donc, dans ce cas, j'ai aussi besoin de le copier. Donc, nous pouvons définir une constante, appeler l'image du détenteur de place, et ensuite nous pouvons l'utiliser aussi bien ici. Donc, je vais avoir ici l'image du détenteur de place, et dans ce cas, notre application fonctionnera bien. Donc, nous avons l'image de l'espace réservé, nous avons l'image, et après cela, peut-être que nous pouvons mettre la description du film. Alors essayons d'abord ça. Si nous fonctionnons bien, vous travaillez bien. Donc je vais mettre ici, ok, Le style semble laid parce que nous utilisons le style de leur carte. Donc, pour avoir comme un style plus approprié, nous pouvons donner de la hauteur comme quelque chose comme nous pouvons le garder 100 et enlever cette largeur et plus de ce rayon de bordure. Donc, dans ce cas, nous aurons l'image comme celle-ci. Ou si vous voulez utiliser un pourcentage spécifique de l'écran ou de la taille du mobile ou de l'écran mobile. Ainsi, vous pouvez aussi bien utiliser les dimensions que nous avons déjà évoquées. Donc, tout d'abord, j'ai besoin d'importer les dimensions de React Native aussi. Donc, ici dans React Native import, nous pouvons dire importer pour moi la dimension, et ensuite nous pouvons définir constante. On appelle ça la hauteur. Et cette hauteur aura des dimensions point obtenir. Si vous vous souvenez, exactement de la même façon que nous pouvons dire la hauteur du point de l'écran. Donc, il peut nous donner avec un détail élevé tout. Donc nous n'avons besoin que de la hauteur. Donc, de cette façon, je peux dire que la taille de l'image sera la hauteur divisée par, par exemple, la moitié ou divisée par deux, nous pouvons dire. Donc, de cette façon, il aura la moitié de ce vert ici. Donc c'est sympa. Je suppose que c'est assez, ou peut-être que tu peux le mettre plus bas. Vous pouvez 2.5 pour juste avoir comme un certain dimensionnement pour avoir plus d'espace pour utiliser et afficher les informations du film. Aussi, avant de terminer cette conférence, nous pouvons aussi bien afficher comme s'il n'est pas chargé, nous pouvons afficher comme indicateur d'activité, comme un indicateur de chargement comme nous l'avons vu auparavant. Donc, nous pouvons dire, s'il n'est pas chargé, puis afficher l'indicateur d'activité dans un écran plus grand. Nous devons donc importer aussi l'indicateur d'activité, comme je l'ai expliqué précédemment dans la conférence lorsque nous chargeons l'écran de la page d'accueil. Donc, de cette façon, nous irons à notre simulateur. Et quand je retournerai à l'un des films, et puis je deviendrai comme chargement parce que j'ai une connexion rapide. Donc je ne comprends pas, je ne vois pas cet indicateur de chargement. De cette façon. Vous verrez un indicateur de chargement si vous avez une connexion lente. Donc, l'avantage que nous avons obtenu ici en fait que nous transmettons les données de la navigation au film de détail. Donc de cette façon, nous n'avons pas besoin dans ce garde de transmettre toutes les données du film parce que nous avons seulement besoin de passer l'ID du film. Donc, je ne peux pas voir ici dans la carte simplement que je veux passer seulement l'ID du film et ensuite pas toutes les données du film que nous avons obtenu de l'API. Parce que comme vous vous souvenez que le film ou l'élément ici, il contient des informations sur le film, mais pas tous les détails. Je veux dire, ceux que nous voyons dans le film populaire pour l'exemple, nous avons dans l'API, comme toutes ces informations. Non, je dois passer à l'écran suivant uniquement l'ID, parce que encore une fois, je crée un appel d'API dans les détails propres pour obtenir un détail de film. Donc, de cette façon, je dirai l'ID du film et ensuite je me suis passé l'ID du point de l'article. Donc rien de spécial. Nous passons juste l'ID du film, Pas tout le film à l'écran suivant. Donc, quand je clique sur une carte, puis je vais à l'écran de détail et puis je reçois pas plus nous détail. Je recevrai l'ID du film, exactement le même nom que j'ai spécifié ici. Donc, j'ai ici l'ID du film, puis dans le détail je recevrai aussi de l'ID du film params. Donc quand nous allons à ceci ou mutateur et réessayer ça, Ok, Nous allons toujours bien et tout fonctionne. Donc, de cette façon, la navigation sera rapide parce que nous ne passons que l'ID. Je ne transmets pas toutes les données à nouveau à l'écran suivant. C' est très important pour vous de faire exactement lorsque vous développez application mobile pour ne pas passer un big data ou une grande quantité de données entre les écrans. 44. Titre de film et Genres: Alors maintenant, faisons le titre du film et les genres. Donc, de cette façon, nous devons créer un composant de texte comme nous l'avons fait auparavant. Nous devons donc avoir ici le composant x et nous devons l'importer aussi. Donc, je vais aller ici au texte et ensuite j'importerai ce composant de texte. Et dans ce cas, nous avons aussi besoin de mettre des données à l'intérieur. Donc je vais dire ici cette pièce pour moi le détail du film, ce titre. Alors faisons ça et ensuite testé. Donc, nous allons aller aux films populaires à Click on it. Ok, nous avons le titre ici, mais le titre est petit, donc nous devons le rendre plus grand. Donc nous devons lui donner un peu de style. Donc, je vais dire ici pour le style. Et puis je vais définir un objet. Et ce style aura un nom. On peut dire des styles point. On peut donner un nom comme titre de film. Et de cette façon, nous devons créer à nouveau la classe qui s'appelle titre de film. Je donnerais un forum pour cela comme une taille de police peut être 24. Donc on peut dire ici 24. Et puis ici, je dois mettre le deux-points ou la taille de la police. Ça peut être 24. Et aussi, nous pouvons mettre le poids de police, nous pouvons le faire comme chauve. Pour qu'on puisse entendre avoir quelque chose comme chauve. Et aussi, nous pouvons ajouter des marges et un rembourrage. Donc, je vais dire marge haut. On peut mettre ici la marge en haut, il sera 10. Et la marge en bas, comme pousser le contenu en dessous pour être comme à nouveau 10. Donc on économise, ok, Nice. On a tout bien. Mais nous devons le centrer. Mais centrons tout comme si nous pouvions centrer tout le contenu. Donc, je vais donner une classe pour la vue de défilement. Alors je lui donne un style. Et dans ce style, je vais définir exactement de la même façon que nous faisions avec leurs conteneurs. Donc, je dirais styles conteneur point. Et ce conteneur, tout serait centré. Donc, nous pouvons copier la même chose que nous avons ici, flex un centre justify-contenu, aligner le centre des éléments. Donc nous allions ici et ensuite nous allons mettre le verre, ou nous pouvons dire ici conteneur. Et ce conteneur pour être un objet. Et je mettrai ce cadran à l'intérieur. Et je n'oublierai pas la virgule. Mais comme vous le voyez ici, nous recevons une erreur. Il dit que la mise en page enfant ScrollView, comme nous devons être appliqués via le conteneur de contenu. Donc on doit tout mettre comme quelque chose en toi. Donc, nous pouvons appeler ici une vue et nous pouvons envelopper tout le texte à l'intérieur ou tout le contenu que nous allons faire ici à l'intérieur de cette vue. Et puis en faisant ce cadran de cette vue, nous allons donner le conteneur. Donc, nous devons supprimer cela d'ici et le coller dans le genre, la vue elle-même. C' est pourquoi j'utilise une vue. Donc, vous connaissez la raison parce que vous ne pouvez pas le mettre pour ScrollView, comme vous voyez ici que nous avons eu cette erreur. Nous allons donc importer la vue et ensuite nous sauvegardons. Et encore une fois aller au film. Ok, nous avons maintenant le titre du film au milieu et il y a des marges de rembourrage, marge supérieure en dessous. Travaillons maintenant avec les journalistes. Donc si vous vous souvenez, nous avons pour le film un peu généreux. Donc tous viennent avec le film lui-même. Donc nous devons voir comment nous pouvons les obtenir. Donc, comme vous le voyez ici, nous avons dans l'API, je vais obtenir l'API détaillée. Et vous pouvez voir que ce sont des étangs directement ici. Vous n'avez pas besoin d'utiliser Postman par exemple, vous pouvez utiliser ici la réponse dans la documentation, cette API. Donc, le généreux sera à nouveau comme un tableau. Et ce tableau a l'ID et le nom. Donc ce dont j'ai besoin, c'est seulement le nom. Donc, dans ce cas, nous pouvons aller à notre code et créer un tableau de généreux, puis boucle dans un texte et afficher tout le généreux. Donc, créons une vue dans, encore une fois à l'intérieur de cette vue. Donc, nous disons ici de u et b doivent nous assurer que nous avons généreux parce que certains films n'ont pas. Pour que je puisse le faire. Est-ce quand je dis que j'ai ouvert un objet, alors je peux obtenir les détails du film, exactement comment nous l'avons fait avant. Et le nom du champ pour généreux, le nom du champ est journalistes, comme vous le voyez ici. Donc d'abord, je dois vérifier si j'ai vraiment généreux parce que certains films n'ont pas. Et puis je peux afficher la vue. Donc, de cette façon, je vais mettre la vue à l'intérieur de ces crochets. Donc c'est exactement comme si. Et à l'intérieur de la vue elle-même, nous allons faire une boucle sur le journaliste et faire un composant texte. Donc, je vais avoir ici au composant de texte, Alignons ceci ici pour être sur la même ligne. Et puis à l'intérieur de ce texte, je veux boucler et afficher tous les généralistes parce qu'un peu plus nous, ils ont trois catégories, un peu plus de vue, ils ont cinq, certains films qu'ils doivent. Donc de cette façon, j'ai besoin de les boucler. Alors comment on peut boucler ? Donc, dans la vue elle-même, je peux ouvrir à nouveau un support. Donc, à l'intérieur, je peux écrire JavaScript. Donc, comme vous le voyez, nous pouvons écrire JavaScript à l'intérieur du modèle. C' est donc le but de cette conférence. Je veux vous montrer comment écrire JavaScript à l'intérieur, comme le modèle de ces composants natifs React. Donc on peut dire ici, comme une boucle sur les journalistes. Donc, je peux mettre ici généreux et ensuite carte. Donc avec cette carte, c'est comme, vous savez, cette carte bouclée sur tous les membres. Donc, je dirais ici, et cette carte, il reviendra pour moi comme seul ou article par article. Et puis je peux l'utiliser pour envelopper le texte du composant dedans. Donc, de cette façon, je vais revenir non seulement comme leur sexe et ce que je ferai à l'intérieur. Donc, je vais retourner un composant, et ce composant sera le texte. Donc, je vais mettre ici retour et puis je dirai ce texte à, de cette façon ici, que Janvier, je peux afficher le nom de celui-ci parce que je boucle Un par un au-dessus. Donc, comme vous le voyez ici, est jaloux. Je fais une boucle sur eux parce que c'est tableau et je reçois le nom de chaque sexe ici. Donc, nous pouvons aller vérifier notre application si tout fonctionne bien. Joli. J'ai ici toutes les informations. Donc, ce film vous Luca, a animation, comédie, famille, catégories fantastiques. Mais ici, nous avons un noeud il disant, comme chaque enfant dans Alice devrait avoir un unique, dire quel est-il ? Prop clé unique. C' est parce que nous avons ici comme un texte et nous sommes en boucle plusieurs fois. J' ai donc besoin de spécifier une propriété clé. La propriété clé doit être unique. Donc la chose unique que nous pouvons utiliser dans ce cas, que nous obtenons l'ID du Janvier. Donc, nous pouvons dire ici que la clé peut être non seulement comme n'importe quel nombre, nous pouvons dire genre, comme le même, que nous avons utilisé dot ID. Donc, dans ce cas, nous aurons ce pistolet de notification et le texte, ou chaque texte a une clé unique. Donc, à travers la carte, j'ai bouclé sur les genres et puis je les ai comme affichés sous forme de texte. Mais ici, comme vous le voyez, ils sont énumérés les uns sous les autres. Nous voulons afficher les uns près de l'autre, les afficher près de l'autre. Donc, pour cela, nous pouvons donner du style pour cette vue. Donc, nous pouvons également utiliser le style comme et lui donner comme une vue spécifique. Donc on ne peut pas dire ici à la place du journal de style, on peut dire journalistes conteneur. Donc, dans ce cas, nous pouvons donner une classe avec ce nom. J' irai ici et définirai cette classe. Et ce sera comme un objet aussi. Et pour les rapprocher les uns des autres parce que nous utilisons flex. Donc je ne peux pas dire direction flexible. Si vous savez en CSS, je peux mettre quelque chose appelé un rôle. Et aussi pour l'alignement, je peux dire aligner le contenu ou aligner les éléments. On peut dire centre. De cette façon, ils verront cela ou ils auront l'air d'être proches l'un de l'autre. Mais comme vous voyez l'artiste se cantonner l'un à l'autre. Nous devons donc faire des espaces entre eux. Donc encore une fois, j'ai besoin de donner un style pour cet élément de texte à l'intérieur du tableau. Donc nous pouvons dire comme juste genre de style. On peut donner un cours. Et ce cours sera situé ici. Et puis ce serait un objet. Et je peux donner une marge, droite, marge gauche. Donc marge droite, ce sera, par exemple, nous pouvons lui donner dix. Essayons ça, accord, comme vous le voyez ici, nous les avons tous poussés loin l'un de l'autre. Bien sûr, vous pouvez ajouter plus de styles. Nous devons obtenir exactement le même style que nous pouvons donner. Comme certains poids de police peuvent être murés aussi bien, donc il peut être plus agréable. Donc, je vais lui donner un poids de police en gras. Et poussons le conteneur un peu par le haut, comme environ 20 pixels pour avoir plus d'espace pour le titre. Donc je vais donner ici ma marge haut, Donnons comme 20. Donc, dans ce cas, je vais avoir leur généreux et le titre du film exactement comment nous avons expliqué ici. 45. Composant de nominations de notations des étoiles du film de cinéma: Une autre information dont nous avons besoin pour notre détail de film est la note d'étoiles. Comme combien ce film est évalué ? Si nous allons à l'API, nous verrons plusieurs champs pour obtenir le détail du film. Et l'un de ces domaines est la moyenne des votes, et il y a aussi un décompte des votes. Donc, le champ moyen des votes me donne la note sur la revue ordinaire de ce film. Par exemple, nous allons créer un composant de texte et imprimer cette valeur. Nous allons à notre code et nous allons créer d'autres composants de texte. Nous avons donc ici le point de vue que nous en avons fini. Donc, en vertu de cela, nous pouvons créer un autre composant de texte. Bien sûr, nous allons l'enlever. C' est juste pour un test. Donc, je vais dire ici, juste imprimer pour moi détail du film Dot ce que nous avons ici, la moyenne des votes. Donc nous pouvons avoir de cette façon, le film est la moyenne du film. Donc, comme vous le voyez ici, nous avons le 8.38.3 de dix parce qu'ils sont cotés ou la moyenne des films est cotée à partir de 10. Mais nous voulons utiliser un composant d'évaluation par étoiles. composante de notation des étoiles aura un cinq étoiles. De cette façon, je peux diviser ceci par deux, alors je peux obtenir la valeur de cinq. Nous avons donc besoin d'un élément de notation par étoiles. Alors, où on peut trouver ça. Malheureusement, dans React Native, il n'y a pas de composant d'évaluation d'étoiles comme intégré avec le natif. Mais nous pouvons en trouver un si vous voulez trouver le composant d'évaluation des étoiles, juste Google il, et puis vous le trouverez facilement. Pour moi, j'utilise un qui s'appelle React Native star rating. Donc nous venons de mettre celui-ci et je trouverai dans le paquet npm quelque chose appelé React Native star rating. Alors allons-y et nous verrons cette documentation de cette note. Bien sûr, ce composant, beaucoup de propriétés exactement comment nous avons vu avec d'autres composants que nous avons utilisés précédemment. Et voici un exemple de l'utiliser. Il dit que juste importe la cote des étoiles de sécheresse et dire désactivé comme de ne pas le faire comme entrée donc vous ne pouvez pas cliquer dessus parce que c'est seulement la valeur de présentation et maxes étoiles, vous pouvez définir autant que vous voulez des étoiles et et ensuite la valeur de la note que nous avons convenu. Et aussi comme les étoiles sélectionnées, lorsque vous cliquez sur le début ou sur la note. Alors installons ce composant. Tout d'abord, nous devons aller voir comment nous pouvons l'installer. L' installation est juste npm installer React Native étoile notation. Donc, nous pouvons aller ici à notre code, ouvrir le terminal, puis nous allons aller à l'onglet terminal, et ensuite nous allons coller la commande ici. Donc, de cette façon, nous installons la bibliothèque de notation des étoiles React Native. Nous serons en mesure de l'importer et de l'utiliser dans notre application. Donc, la façon d'importer ce composant, comme vous le savez, toujours, nous sommes par exemple, nous voyons les exemples. Donc, ici importer l'évaluation des étoiles parce que c'est une classe de React Native note étoiles. Pour que nous puissions aller ici à notre composante. Fermons le terminal parce que nous en avons fini. Donc ici, je vais dire, OK, importer pour moi l'évaluation des étoiles de React Native note étoiles. Et ici, je peux utiliser ce composant. Donc, au lieu du texte, on peut mettre le classement des étoiles, et ici on aura une étoile, n'est-ce pas ? Donc, l'une des propriétés dont nous avons besoin est les étoiles max et la valeur nominale. Alors prenons-les. Nous pouvons entendre dire dire comme si nous enlevons cette pièce parce que c'est des composants d'un côté pour que nous puissions avoir quelque chose comme ça. On n'a pas à le refermer. Donc, de cette façon, on peut avoir les étoiles de Max. C' est exactement, il a la complétion automatique pour que nous puissions le voir. Ce sera cinq. Et aussi, nous devons avoir la valeur de notation. Donc, la note sera la même que celle que nous avons définie précédemment. Donc, ce sera le détail du film cependant, voter moyenne. Donc, de cette façon, j'aurai leur note dans cette valeur. Mais comme nous l'avons dit précédemment, la valeur est 10, donc je vais la diviser par deux. Alors sauvegardons ça. Et puis notre application se chargera. Et qui aurait une erreur est quelque chose appelé famille de forme non reconnue. Police impressionnante. C' est parce que cette bibliothèque utilise Font Awesome ou des icônes de police. Ainsi, nous ne pourrons pas utiliser cette bibliothèque tant que nous n'aurons pas installé d'autres dépendances, comme nous le voyons dans la documentation. Mais si vous voulez supprimer cette flèche, vous pouvez mettre cette miss. Et tout ce que vous pouvez enregistrer à nouveau pour supprimer cette erreur, ok, Mais l'erreur encore en arrière-plan et le terminal, mais il vous montre la réalité du problème. Comme vous le voyez ici. Ok, Nous avons quatre étoiles, mais le problème que les étoiles ne se présentent pas parce qu'il n'y a pas d'icône. Et comme vous le voyez si vous allez à la documentation, ils disent qu'après l'installation, vous devez lier à une bibliothèque qui est appelée icône React Native Victor. Donc, de cette façon, nous devons nous référer à cette icône ou guide de bibliothèque d'icônes Richter. Ainsi, parfois, les composants dépendent d'autres composants. Donc, de cette façon, vous devez toujours installer ces bibliothèques et être en mesure de les utiliser. L' installation des icônes nécessite un peu de travail. Donc, je vais le faire dans une conférence séparée. 46. Utiliser des icônes dans React de Natifs: Ok, Donc dans la dernière conférence, nous nous sommes arrêtés ici où nous avons une erreur parce que nous ne pouvons pas charger la police ou les icônes que nous voulons. Donc, comme vous le voyez ici, nous ne voyons qu'un point d'interrogation. Nous avons dit que cette bibliothèque entre installé sur notation des étoiles dépend d'une autre bibliothèque, qui est appelée icônes React Native ou React Native Victor icônes. De React Native 0.6. Vous ne pouvez exécuter ce commentaire et vous avez terminé. Vous n'avez pas besoin de faire quoi que ce soit d'autre que si des problèmes vous apparaissent, que je vais mentionner dans cette conférence. Parce que dans cette bibliothèque, comme nous l'avons dit ici, nous avons plusieurs étapes pour l'installer. Mais cela fonctionne avec React Native avec moins de 0,6. Donc, si vous avez le React Native inférieur à 0,6, suivez ces instructions. Sinon, il suffit de faire npm installer et installer la couche prête, puis redémarrer votre application et tout fonctionnerait bien. J' ai obtenu ce lien exactement de la bibliothèque de notation des étoiles, comme je vous l'ai déjà dit. Donc, React Native, Victor icônes, c'est le nom de la bibliothèque et ici il y a un guide d'installation à ce sujet. Alors revenons ici à notre terminal et collons ce commentaire. Nous voulons installer cette bibliothèque qui s'appelle React Native vector icons. Donc, de cette façon, l'évaluation des étoiles nous montrera les icônes de la bonne façon. Donc, ici, l'installation est terminée. Ok, quand j'économise, j'aurai toujours l'erreur dans mon application. Je ne verrais toujours pas ou obtenais toujours cette erreur. Et je ne peux pas voir les icônes cela parce que vous devez redémarrer l'application. Donc, de cette façon, nous devons redémarrer, aller au métro et ensuite nous devons arrêter parce que ce terminal est ouvert automatiquement. Donc, nous devons mettre fin à tout ça. Et puis nous gardons, bien sûr le simulateur, pas de problème. Nous verrons laisser des actes connectés depuis le métro. Et puis nous recommencerons notre application. De cette façon, il se chargera à nouveau avec la bonne dépendance, avec les bonnes bibliothèques. Et nous verrons à nouveau les icônes ici, exactement dans cette page. Ok, donc maintenant ma candidature Guthrie a commencé. J' ai ouvert un nouveau métro. Donc, de cette façon, je peux aller à mes films et cliquer sur un de ces films. Bien sûr, peut-être que nous aurons l'erreur à nouveau parce que je veux vous montrer si vous obtenez l'erreur à nouveau ce qu'il faut faire. Donc normalement pour certains appareils, cela fonctionnera, mais ici parfois l'erreur apparaîtra toujours. Cela parce que vous devez faire quelque chose de plus qui est exigé de vous. Il y a un commentaire dans la documentation que vous devrez faire, qui est appelé React Native link React Native Victor icônes. Bien que de cette façon, vous serez en mesure de lier React Native à cette bibliothèque. Ainsi, vous pouvez toujours lier leur bibliothèque iOS et aussi sur le projet iOS et aussi le projet Android à cette bibliothèque. Donc seulement lorsque vous obtenez cette erreur, alors vous pouvez utiliser cette commande. Donc, je vais aller ici et le coller. Et après cela, vous verrez que la bibliothèque de droit a été liée, mais nous ne voyons toujours pas l'icône parce que nous devons à nouveau redémarrer l'application. Donc, quand cela vous est arrivé, alors vous devez aller avec cette option qui s'appelle React Native link, puis utiliser ce commentaire. Vous devez exécuter cette commande dans le même chemin d'accès de votre application. Donc, je suis ici dans l'application de film et j'exécute cette commande que je vous ai mentionnée, réagir lien natif, React Native Victor icônes. Donc, de cette façon, nous devons redémarrer l'application. Je vais donc terminer le terminal. Et puis je vais dire ici, React Native, exécuter iOS ou Android dépend de ce que vous utilisez. Parfait ici maintenant mon application est en cours d'exécution. Je veux vérifier s'il y a déjà des étoiles. J' irais au cinéma. Joli. On a déjà les étoiles ici. Mais ils sont comme gros et ils sont comme ce style, eh bien, et il y a comme ils sont cliquables. Donc, pour cela, ajoutons quelques propriétés. Certaines de ces propriétés qui sont mentionnées dans la documentation de cette bibliothèque, que nous avons utilisé pour React Native star rating. L' un d'eux est appelé désactivé. Donc, nous pouvons aussi bien désactiver toutes ces icônes sont toutes les étoiles. Donc, je peux mettre ici la propriété pour personnes handicapées. Et avec cette propriété handicapée, je peux le définir sur true. Donc on peut dire handicapés. Et puis on l'a mis à vrai. De cette façon, les étoiles seront désactivées. Alors je vais ici et nous verrons qu'ils sont handicapés. C' est aussi une autre propriété qui est appelée couleur pleine étoile. Vous pouvez choisir la couleur. Donc, je peux également utiliser cette propriété. Donc, je peux mettre ici pour cette couleur sombre et nous pouvons mettre une couleur spéciale comme une couleur CSS. Alors je choisirais de l'or. Donc de cette façon, je vais voir que la couleur change en or, comme vous le voyez ici. En outre, les étoiles sont assez grandes, alors peut-être que je peux les rendre plus petites. Donc, nous pouvons avoir une propriété qui s'appelle la taille de l'étoile. Cette taille d'étoile, nous pouvons donner une taille en pixels. Donc, je vais mettre ici la taille de l'étoile, et je vais mettre, par exemple, 30. Vérifions l'application. Ok, maintenant on a commencé comme ça. C'est très bien. Maintenant, chaque film a sa propre cote, comme vous le voyez ici. Donc, nous n'avons rien ici. Parfois, il n'y a pas de notation. Parfois, il a une cote ici. Donc, nous avons toute la note, mais faisons de l'espace pour que nous puissions pousser le contenu de ces balises sous. Donc, nous pouvons aller à l'où nous avons les journalistes et nous pouvons ajouter ou nous pouvons conteneur mettre bouton de rembourrage ou margin-bottom. Donc on peut mettre ici la marge inférieure, et on lui donne 20. Et ensuite, nous allons pousser ce contenu de cette façon. Bien sûr, cette bibliothèque, qui est appelée bibliothèque d'icônes, ou nous pouvons dire des icônes, des icônes vectorielles. Il a aussi beaucoup de propriétés. Nous pouvons utiliser un composant qui est appelé Icône. Et en attribuant le nom de l'icône, comme nous le verrons plus tard, vous pouvez spécifier, afficher une icône sur votre application. Donc, nous verrons plus tard quand nous avons besoin d'une icône, je vais vous montrer comment obtenir une icône de composant et l'utiliser dans l'application. 47. Description du film et date de sortie: Ok, ajoutons dans cette conférence un peu comme la date de sortie et aussi une description du film. Si nous vérifions à nouveau l'API de la documentation où nous avons la base de données du film, nous avons quelques champs qui sont comme, par exemple, importants pour nous d'afficher quelques informations sur le film. Par exemple, nous aurons quelque chose appelé Vue d'ensemble. Ce sera comme une chaîne où il aura un aperçu du film. Et il y a aussi des informations comme nous pouvons les fournir à l'utilisateur sur la date de sortie de ce film ou de cette émission de télévision. Donc, nous pouvons les ajouter facilement perte ou nous pouvons faire quelque chose comme après l'évaluation des étoiles, nous pouvons ajouter deux champs de texte. L' un sera pour la date de sortie et l'autre sera aussi pour la description. Donc, de cette façon, j'aurai deux textes. Donc un de ces textes contiendra pour moi le détail du film. Et puis je copie le champ que j'ai ou sont responsables de la description. Donc, je vais mettre ici aperçu. Donc celui-ci va m'afficher la vue d'ensemble sur le film. Et aussi nous en aurons un autre qui contiendra la date de sortie. Donc, je peux utiliser ici aussi bien comme la chaîne, nous pouvons dire la date de sortie. Et puis on peut mettre comme ici un peu d'espace. Et après la citation, nous pouvons placer une explosion comme nous pouvons ajouter un autre texte ou qui sera un précieux. Donc, j'utiliserais plus de détails et puis je vais gaspiller ou j'aurai ici la date de sortie. Donc, la date de sortie que j'ai également obtenu de l'API, comme nous l'avons vu ici. Donc nous avons ici la date de sortie. Donc, dans ce cas, sauvegardons et nous verrons toutes les informations. Alors faisons maintenant un peu de style à propos de ces textes. Donc, je vais avoir ici comme ainsi que le style. Donc, le style sera le même que nous l'avons fait ici. Donc, nous allons donner une classe et nous allons dire ici comme aperçu à aussi bien ici nous donnerions comme quelque chose appelé date de sortie. On peut dire ici, libérer, donc juste sorti en classe. Et puis nous pouvons spécifier ces classes dans notre feuille de style. Donc, je descendrais et je dirai que j'ai une nouvelle classe qui s'appelle Vue d'ensemble. Et cette vue d'ensemble, je vais donner comme une marge et un rembourrage de haut en bas sur les critiques étoiles et aussi à la date de sortie. Donc, je vais dire ici le bas de la marge sera comme par exemple, 15. Et aussi la marge supérieure sera 15 aussi bien. Vous pouvez mettre les valeurs Tout pense que vous voulez. Je montre juste ici comme si on avait un cours éducatif. Donc maintenant, comme vous le voyez, nous collons le contenu sur les bordures du téléphone. Donc, nous devons donner un peu d'espace afin que vous puissiez donner un espacement en utilisant le rembourrage. Donc, de cette façon, je peux enlever, ou par exemple, je peux dire comme me donner le rembourrage, gauche, rembourrage droit. Mais je peux les supprimer aussi. Et je peux dire ne me donner que des battes à quatre pattes d'ailleurs, comme je peux le dire ici de haut, droite, de gauche et de bas. Donc, je peux dire, donnez-moi un rembourrage qui sera de 15 pixels. Donc, il va pousser le contenu de haut, contenu de bas, et aussi des côtés. Et la dernière chose que nous pouvons donner la date de sortie, ce qui sera comme un gras, nous pouvons lui donner une couleur audacieuse. Je dirais release, et ensuite j'aurai une nouvelle classe, ou ça pourrait être appelé release. Et cette version serait objet et je dirai que font-weight sera avec une valeur appelée chauve. Donc, de cette façon, nous aurons la date de sortie de cette façon ou de cette belle manière. Ok, maintenant, comme vous le voyez ici, nous avons la date formatée en quelque sorte de manière laide comme ne pas discuter, mais la mise en forme de base de données standard, nous devons formater la date en fonction de certains, par exemple, sur votre pays. Par exemple, dans mon pays en Europe, ils ont mis le jour d'abord, puis les mathématiques, puis après cela ils ont mis l'année. Donc pas comme ça. Donc, je veux formater la journée en quelque sorte, ce qui convient à mon pays. Pour cela, nous devons installer une bibliothèque qui est le format de date d'objectif. Donc, je vais revenir à mon terminal et je dirai npm installé. Et le nom de la bibliothèque est appelé format de date. Et avec ce format de date, je peux le mettre enregistrer, et je peux installer cette bibliothèque et l'utiliser aussi dans mon code natif React. Donc, après l'installation de la bibliothèque, je peux dire importer pour moi une fonction de cette bibliothèque qui est appelée format de date. Donc, je peux dire le format de date d'importation à partir du format de date. Après cela, je peux utiliser cette bibliothèque facilement comme une fonction en le disant de cette façon. Alors fermons le terminal. Nous pouvons descendre et dire ici que je vais appeler cette fonction qui est appelée format de date. Et ils mettraient en forme, comme vous le voyez, ça me dit de fournir une date sous forme de chaîne, puis masque ou format. Donc, de cette façon, nous pouvons savoir ce qui est un masque de la documentation de cette bibliothèque. Donc, j'irais ici à la Google et je o mettre le format de date React bibliothèque native ou format de date MPM. Et de cette façon, je peux trouver une bibliothèque qui est appelée format de date. Et celui-là que j'utilise. Et nous verrons la documentation de ce format de date. Ainsi, comme vous le voyez, il existe plusieurs formats de formater vos dates. Ainsi, vous pouvez choisir le format qui vous convient. Donc, par exemple, je veux avoir quelque chose comme, comme vous le voyez ici, il dit ici si vous mettez quatre M, alors il vous donnera le mois comme son nom complet. Si vous mettez YoY, il vous donnera l'année. Veuillez être représenté par quatre chiffres. Donc, de cette façon, je peux choisir un format que j'aime. Vous pouvez donc lire la documentation et vérifier le format pour moi. Le format que j'aime en est un. Donc, nous allons ici et allons à leur format comme deuxième paramètre de cette fonction. Et je dirai ici virgule. Et puis je mettrai des guillemets sous forme de chaîne, et ensuite j'utiliserais ce format. Cela me donnera le nom du mois entièrement, et ensuite il me donnerait comme le jour 17 Juin, par exemple, 2021. Bien sûr, vous avez comme par exemple, si je mets ici D, D comme, alors je serais le 17 juin 2021. Donc exactement comment vous pouvez l'implémenter ici. Donc tu peux juste copier ce que tu veux. Vous aurez besoin d'heures, vous n'avez besoin que d'un mois ordonné, par exemple, qu'ils, vous pouvez obtenir ce que vous voulez à travers cette bibliothèque. Donc pour moi, celui-ci, ce format que j'aime le plus pour mon application, et c'est surtout compréhensible pour les utilisateurs. Donc, je peux utiliser ce format. Ainsi, nous avons appris ici comment formater une date et comment ajouter plus d'informations sur le film. Donc, de cette façon, nous allons mettre en œuvre prochaine à propos d'un film de bouton de lecture, où nous pouvons jouer le film dans un dialogue ou dans un modèle. Et on peut voir la vidéo du film. 48. Boutonne de jeu de film: Ok, maintenant dans cette conférence, nous allons avoir un bouton de lecture ici. Bien sûr, il ne sera pas fonctionnel parce que nous avons besoin d'un modèle, nous avons besoin d'une vidéo. Mais créons un composant où il joue un bouton de lecture ici. Ainsi, il peut être cliquable pour l'utilisateur. Ainsi, il peut être en mesure de cliquer dessus pour voir la vidéo du film. Donc, j'aime toujours bien sûr, nous pouvons utiliser l'opacité touchable ou répressible, comme nous l'avons vu avant, mais aussi, nous pouvons créer notre propre composant, n'avons pas tellement de code ici. Donc, bien sûr, vous pouvez toujours contenir tout ce contenu dans certains composants, mais aussi, vous ne pouvez pas les donner ici. Pour l'instant. Je vais créer un composant, surtout pour le bouton Play. Donc dans ce cas, je vais avoir ici comme un conteneur comme nous le voyons. Donc, nous aurons ici une autre vue. Et cette vue contiendra pour moi mon composant, composant que je vous ai dit que nous ne pouvons pas l'appeler un bouton lame par exemple. Et ce bouton de lecture, je vais le créer. Donc ce n'est pas le cas, quelque chose existe dans React Native est quelque chose que nous allons créer. Donc, pour créer un composant, comme toujours, suffit de cliquer sur nos composants de dossier afin que vous puissiez le mettre n'importe où, mais je préfère l'avoir dans les composants. Je vais créer un fichier, appelez-le bouton de lecture. Et ce bouton Play, NodeJS, je créerais un composant pur. Création d'un composant pur, comme nous l'avons toujours fait en utilisant B, C, S comme la classe de composant pur. Donc, dans ce cas, nous aurons le composant butyle créé et aussi, nous devons importer React Native. Donc, nous pouvons dire IMR, alors nous pouvons dire importer React. Et puis après cela, nous devons dire React.com parce que c'est un composant pur vient de réaction. Nous devons donc étendre notre composant à partir du composant pur React dot. Alors supprimons maintenant l'état. Et puis nous avons besoin ici en retour d'un modèle. Le modèle que nous allons utiliser est l'opacité touchable comme nous l'avons utilisé avec la carte, si vous vous souvenez, ou nous pouvons utiliser quelque chose d'autre ou plus moderne, ce qui est appelé principe. Ce principe est en U, comme vous le voyez ici dans la dernière version des composants de React Native, nous pouvons l'utiliser et il a beaucoup de fonctionnalités comme sur la presse dans, sur la presse et sur la presse plus longue et comme sur la poitrine à gauche, la poitrine à la à droite. Il a donc beaucoup de fonctionnalités par rapport à cette opacité touchable. Donc, dans ce cas, nous pouvons jeter un oeil et l'utiliser pour avoir plusieurs variantes composant dans ce cours. Donc, comment nous pouvons l'utiliser, nous avons juste besoin de l'importer à partir de React Native. Donc, je vais importer le composant qui est appelé répressible. Vous devez être sûr que vous utilisez React Native 0.6 et supérieur. Donc, dans ce cas, vous serez en mesure de l'avoir. Donc, je vais mettre ici Importer et puis précédent, ou nous pouvons l'avoir comme un objet de. Et nous allons mettre la bibliothèque native React. De cette façon, nous aurons un précédent important. C' est exactement comme l'opacité touchable. Vous, comme vous le voyez ici, nous l'utilisons précédemment, mais ils disent comme si vous êtes à la recherche d'un moyen plus vaste et à l'épreuve du futur de gérer le toucher basé sur l'entrée, vérifiez leur ABI Donc, ils recommandent d'utiliser ce composant. Donc, de cette façon, je peux prendre tout ce contenu. Donc, ici, nous avons un exemple. Nous pouvons copier tout ce contenu et ensuite nous pouvons le placer dans notre code, comme dans leur retour. Et après cela, bien sûr, nous devons importer le texte. On a juste besoin d'y jeter un coup d'oeil. Donc, nous avons ici quelque chose comme un bouton, mais nous n'avons pas encore appelé notre composant. Nous devons donc appeler le composant de bouton Play d'une manière ou d'une autre dans notre application. Donc, dans la page détaillée. Donc, je vais enlever cela sur le sein pour ne pas avoir d'erreur. Donc, nous pouvons juste avoir un texte préférable et je suis adressable. Alors, nous allons à la page détaillée. Je vais importer le bouton Play exactement comme nous l'avons fait auparavant avec n'importe quel composant. Donc ici, je vais dire Importer. Et puis je vais mettre mon bouton de lecture à partir de, puis je vais mettre le fichier ou les composants du dossier, puis je vais mettre mon composant de bouton de lecture. Donc, ici, nous avons une erreur. Nous travaillons parce que nous l'avons fait, fermez les composants. Donc nous avons ici le bouton Play, nous devons le fermer comme ça. Donc, nous économisons à nouveau et nous verrons que nous recevons toujours une erreur ici. Donc, l'erreur vient à cause de l'importation. Donc, toujours quand vous êtes à l'intérieur d'un fichier ou que vous êtes important, une classe ou une constante ou quoi que ce soit, vous devez vous assurer que si vous avez cette valeur par défaut, importation est comme le bouton Lire. Donc, dans notre cas ici, le composant de bouton Play est exporté par défaut. Donc vous n'avez pas besoin de le mettre à l'intérieur de ce support. Donc, quand vous avez besoin de le mettre à l'intérieur de ce support, comme nous avons dans le cas des services, nous avons plusieurs constantes, nous sommes importés et aucun d'entre eux n'est par défaut. Donc, dans ce cas, je l'ai mis entre crochets. Donc sinon, si vous ne savez pas, si vous n'avez qu'un seul composant ici, alors vous le mettez simplement comme ceci sans crochets. Donc, lorsque vous obtenez cette erreur, assurez-vous que vous avez toujours la bonne façon d'implémenter les choses. Donc ici, je suis possible. Donc, comme vous le voyez ici, notre composant et a été exécuté de la bonne façon. Donc, nous avons le bouton ici, mais aussi, nous devons mettre un bouton de lecture et il a une icône, qui est un jeu. Donc, pour avoir une icône, si vous vous souvenez, nous avons parlé de Icône Library, que nous avons installé précédemment dans notre application. Nous avons donc besoin d'importer aussi bien le composant d'icône ici, nous pouvons importer quelque chose appelé icône de la bibliothèque que nous avons installé auparavant. Et le nom de la bibliothèque était React Native icônes. Et ce React Native icônes vectorielles vous pouvez choisir aussi bien comme une bibliothèque à laquelle les icônes appartiennent, parce que cette bibliothèque contient plusieurs bibliothèques comme, Oh, police génial, comme ionique, par exemple, icônes, Google matériaux, etc. Donc, lorsque vous mettez une barre oblique ici, vous obtiendrez plusieurs options, comme les icônes de matériau. Ensuite, vous pouvez choisir parmi les icônes de matériau. Mais lorsque vous choisissez des icônes ioniques, alors vous devez aller à des icônes ioniques et choisir la bonne icône pour vous. Donc, dans mon cas, je vais choisir ces icônes ioniques. Donc, ici, si nous allons à ces icônes ioniques, ici, nous devons aller à la documentation de ces icônes ioniques. Donc, je vais ici à Google. Je vais mettre des icônes ioniques et ensuite des icônes ioniques seraient rejouées pour moi. Donc nous avons toutes les icônes ici, alors je peux obtenir le nom de l'icône. Donc, dans notre cas, nous avons besoin d'une icône de bouton de lecture. Donc nous avons besoin de celui-là. Donc, nous pouvons avoir ici reporté le contour, sorte que vous pouvez copier le nom à partir d'ici. Donc, je copie le nom et ensuite je passe à ma demande. J' appelle le composant au lieu du texte. Donc on doit l'ouvrir et le refermer à nouveau. Nous enlevons cette compressible. Donc ici les propriétés de ce composant qu'il peut prendre un nom et à l'intérieur de ce nom, vous pouvez définir le nom d'icône que vous avez déjà copié. Donc, nous pouvons avoir ici parce que nous utilisons cette bibliothèque. Je vais donc avoir reporté les grandes lignes. C' est donc exactement le nom qui est spécifié dans la bibliothèque d'icônes ioniques. Et à coup sûr, vous pouvez aussi donner une certaine taille. Donc on peut donner la taille. C' est exactement ce qu'on a fait avec les étoiles, si tu te souviens, on l'a donné. Donc, après avoir enregistré, nous verrons que l'icône s'est affichée de cette façon. Donc, nous n'avons aucun problème avec les icônes. Essayons une autre icône juste pour nous assurer que nous allons vraiment bien. Je vais donc copier le nom de cette icône. Donc nous avons ici quelque chose appelé cercle au milieu. Donc, nous avons tout simplement pas en avant, mais nous allons mettre cercle. Et puis je sauverai. Et comme vous le voyez, j'ai eu l'icône de cette façon. Donc, c'est une façon dont nous pouvons avoir plusieurs icônes dans notre application. C' est une très grande bibliothèque. Vous pouvez utiliser toutes les icônes de la bibliothèque d'icônes la plus célèbre dans, sur Internet. Ici, nous avons comme se plaindre de ES peluches. Nous devons supprimer cette icône d'ici et nous fermons avec une clause afin que nous n'ayons pas de problème. Ce composant de texte, nous n'en avons plus besoin, donc nous le supprimons. Et maintenant nous devons avoir le principal ou ce bouton pour être placé ici d'une manière ou d'une autre. Mais avant cela, nous allons le styliser. Donc, je donnerais pour ce bouton comme un style ou ce possible un style. Et à partir des styles que je crée à partir des feuilles de style, exactement comme nous l'avons fait auparavant. Donc, je ne vais pas le répéter chaque fois que nous devons créer une feuille de style. Donc, la feuille de style, nous devons l'importer à nouveau à partir de React Native. Et puis j'ai créé un style pour ce bouton. Donc, aligner le contenu comme le contenu sera au centre du bouton. Et aussi nous avons besoin d'un rayon de frontière. Je mets 50 parce que si je ne mets pas 50, ce sera comme un rectangle. Donc, je lui ai donné beaucoup de rayon de frontière pour le rendre comme circulaire. Et puis les mauvaises herbes. Et nous avons un peu de hauteur ou vous pouvez donner une mauvaise chose aussi. Donc, vous pouvez donner comme une largeur 50. Donc, il aura 50 pixels dans les victoires et un peu de remplissage pour pousser le contenu 10 pixel prend un pixel de chaque côté. Et puis j'ai donné un fond comme du bleu. Bien sûr, c'est la couleur laide, mais nous pouvons avoir plus de belles couleurs. J' ai donc une couleur qui est définie en dur, donc je l'ai eu. Donc, j'ai ici hachage et puis le numéro ou le code du nombre ou de la couleur. Mais nous pouvons donner pour cette icône un peu de coloration. Comme si on pouvait le donner comme une couleur blanche. Donc, vous pouvez avoir une propriété ici. Nous n'utilisons pas d'icône de dossier de style car dans la documentation de cette bibliothèque d'icônes, vous pouvez utiliser une couleur. Donc, si vous allez à la documentation de cette icône ou la bibliothèque d'icônes que nous avons utilisée ici, vous verrez toutes les propriétés dont vous avez besoin. Donc, ce dont j'ai besoin en fait, c'est une propriété appelée couleur. Ensuite, vous pouvez définir la couleur que vous voulez. Donc, dans mon cas, je vais mettre la couleur blanche ici pour l'icône. Donc nous avons ici une couleur blanche. Donc, de cette façon, nous avons fini avec notre composant de bouton Play. Donc, nous l'avons appelé. Maintenant, nous devons le positionner d'une manière ou d'une autre comme ici. Donc, si vous vous souvenez, nous avons créé comme un positionnement. Nous pouvons donc nous donner du temps pour cette composante. Donc, nous pouvons tous, nous pouvons donner un style pour la vue de ces composants. Donc, j'aurai le style Here et ensuite j'utiliserai les styles point, puis je donnerai un bouton Play. Donc, nous pouvons avoir ici la classe de bouton Play. Ainsi, la classe de bouton Play aura une exigence particulière. Donc nous avons à la fin, nous allons le mettre ici pour que nous puissions avoir un bouton de lecture. Et ce bouton Lecture aura une position qui est absolue. Donc, nous pouvons absolu la position de ce bouton. Alors sauvegardons maintenant pour voir où ça va. Ok, comme vous le voyez, il a absolu comme une position et il était centré au milieu de la vue. Quel point de vue ? Donc, la vue que nous avons définie ici en tant que parent. Donc, ici, nous avons un conteneur, puis à l'intérieur de ce conteneur après l'image. Donc, ce sera cette vue parce que la vue sur elle ou cet autre composant au-dessus est une image. Donc, de cette façon, nous aurons cette vue en tant que parent. Et puis nous avons une autre vue où nous avons ce bouton. Donc, de cette façon, nous pouvons donner le positionnement haut pour ce bouton qui peut être, par exemple, moins 20. Donc c'est après que j'ai calculé. Donc, vous voyez qu'il a été ici parce que si j'ai donné 0, alors ce sera dès le début de ce point de vue. Donc la mauvaise fin, celle que je vous ai racontée. Donc, il y a un top 0 ici. Donc, ceci est la preuve de mon OK Que, que cette vue est un brevet de ce composant. Donc je vais lui donner moins 20 et ensuite on peut donner à partir de là, n'est-ce pas ? Comme si nous le mettrons ici sur la droite. Aussi un 20 pixel, pas moins 20 parce qu'il sortira de leur contenu et ce sera 20 pixel. Donc, le bouton sera exactement là. Alors positionnons-le de manière plus agréable. Je pense que 20, 25, ouais, comme ça, ça sera surtout centré. Ainsi, notre bouton est prêt pour que nous puissions avoir une fonction principale pour une pièce de théâtre ou un film, que nous verrons dans les prochaines conférences. Ainsi, nous pouvons avoir un modèle pour lire une vidéo lorsque l'utilisateur clique sur ce bouton. 49. Rédiger des vidéos de Modal: Dans cette conférence, nous allons voir comment nous pouvons jouer un film lorsque nous cliquons sur ce bouton. Mais avant ça, on doit voir un endroit où on peut jouer ce film. Normalement, vous, lorsque vous voulez lire un film en plein écran, vous pouvez utiliser un modèle. Et le modèle dans React Native est un composant qui est déjà défini dans les composants de React Native. Vous pouvez également l'utiliser pour afficher du contenu à l'écran pour l' afficher et le masquer en fonction du comportement de l'utilisateur. Ainsi, par exemple, comme vous le voyez dans cette image, vous pouvez avoir comme certains un titre ou un texte et ok, ou des notifications. De cette façon, vous pouvez voir un modèle sur la couche d'application. Ainsi, vous pouvez placer une vidéo à l'intérieur du modèle et lire cette vidéo pour l'utilisateur. Donc, d'abord, nous pouvons avoir un modèle dans notre application pour être ou pour lire une vidéo à l'intérieur. Alors créons ce modèle. Tout d'abord, lorsque vous allez à la documentation de la bibliothèque de composants de React Native, vous verrez quelque chose appelé modèle. Et dans ce modèle, nous pouvons l'utiliser pour afficher quelques informations à l'intérieur. Donc, tout d'abord, nous devons importer un modèle à partir du React Native. Importons donc ce modèle. Donc, je vais aller à mon code et aller à l'écran de détails. Si vous vous souvenez, nous avons placé un ScrollView. Nous avons donc la vue de défilement ici, qui est tout ce domaine de notre application. Nous allons le placer en dehors de cette zone. Donc, après la fermeture de ScrollView, donc ici nous allons placer notre modèle. Donc, je vais dire ici modèle, et puis je vais fermer le modèle. Nous devons donc importer aussi le modèle de React Native. Donc, nous gardons ça. Ok, le modèle a un peu enveloppé dans la balise de fermeture. Donc, de cette façon, nous devons envelopper tout le contenu à l'intérieur d'une vue comme qui a une vue de défilement et le modèle lui-même. Donc, d'abord, avant la vue de défilement, nous allons placer une vue. Donc, nous pouvons avoir un composant de vue ici, et nous le fermons après avoir fermé le modèle. Donc, de cette façon, nous n'aurons pas cette erreur. Donc, comment nous pouvons utiliser ce modèle, ce modèle nécessite quelques informations pour l'ajouter à l'intérieur. Donc, tout d'abord, vous voyez que vous avez besoin d'un type d'animation. Vous avez besoin d'un transparent ou de certaines propriétés qui sont toujours définies ici. Tout d'abord, nous allons avoir le type d'animation, qui sera diapositive. Donc, nous avons ici comme la propriété appelée type d'animation sera diapositive. Et aussi, nous devons avoir une certaine visibilité et aussi OnRequest fermer. Et si vous voyez ici, nous avons à l'intérieur un contenu dynamique et vous pouvez mettre ce que vous voulez. Dans notre cas, nous allons mettre une vidéo ici. Donc, d'abord, nous devons définir une propriété visible, et cette propriété visible qui sera appelée modèle visible. Et ce modèle visible est une variable qui vient comme un état. Donc, copions aussi la variable d'état et allons à nos détails. Donc, dans nos variables d'état, comme vous le voyez ici, nous pouvons définir l'état visible du modèle. Donc, par défaut, le modèle n'est pas visible lorsque nous visitons cette page, seulement lorsque nous cliquons sur ce bouton, comme nous le verrons plus tard. Donc, revenons à la documentation, nous devons mettre modal visible dans le, nos propriétés du modèle. Donc, nous avons ici quelque chose de visible qui est la propriété du modèle s'il est visible ou non. Donc, j'irai ici au modèle et je vais définir cette propriété. Donc, de cette façon, nous n'aurons pas le modèle par défaut. Donc, par défaut, c'est faux. Mais quand je le mets à vrai, alors mettons-le ici à vrai. Donc vous verrez que nous avons des espaces. C' est en fait le modèle, mais ici nous n'avons aucun contenu. Mettons du contenu à l'intérieur, comme je vais mettre ici à l'intérieur du modèle, un composant de texte. Donc, je vais appeler ici au texto. Et je vais mettre à l'intérieur de ce texte comme un nom ou bonjour, comme nous devons le mettre long bonjour ou vieux, quelque chose comme ça. Vous verrez que le modèle est ici comme vous le voyez, mais le texte est totalement sur le dessus du téléphone. Le modèle est donc visible. Donc, de cette façon, tout fonctionne bien. Donc vous n'avez pas à vous soucier de cet écran blanc. Maintenant, revenons à l'état par défaut de ce visible du modèle pour être faux. Alors maintenant, on ne veut plus le voir. Ok, gentil. Donc, notre exigence maintenant nous devons avoir à définir ce modèle pour être visible en cliquant sur le bouton. Mais ici, notre bouton n'est pas directement le composant principal que nous avons créé à l'intérieur du bouton Play. Donc de cette façon, j'ai besoin de passer aussi comme ce modèle visible à ce bouton pour que je puisse cliquer dessus. Et puis à l'intérieur du bouton Play, je peux aller ici à la répressible, puis mettre sur pression comme l'une des propriétés de ce composant. Donc nous avons une fonction où nous pouvons dire, ok, hauteur pour moi, le modèle, mais comment nous pouvons passer une fonction au composant. J' ai donc besoin de ce composant qui est appelé bouton Play et j'ai créé pour gérer aussi les clics car ici maintenant il ne gère rien. Et si je gère les cliques à l'intérieur des boutons de lecture, je n'ai pas accès à la, par exemple, la variable qui est appelée modèle visible. Donc, de cette façon, je n'ai pas la possibilité de lier ces deux composants. C' est exactement de la même façon que nous envoyons propriétés faire un composant à partir d'un composant parent, nous pouvons aussi bien envoyer une fonction. Donc, par exemple, je vais dire ici que je vais mettre une propriété qui est appelée poignée presse. Et cette presse de poignée, qui sera quelque chose où je peux appeler une fonction ou une fonction et faire quelque chose pour moi comme Set visible pour être vrai. Alors, comment je peux passer une propriété de fonction à un composant dans React. Donc, pour ce faire, nous pouvons aller aussi bien exactement comment nous définissions un composant ou une propriété pour ce composant en utilisant React. Donc, d'abord, nous devons définir la poitrine de poignée ou une constante comme après le rendu. Et je dis cette constante appelée presse manipulée Ajouter. Ce sera à partir de ce point accessoires. Et puis sur presse de composants transformables. Je dirai ça, ok, exécutez pour moi ce sein, mais appelez la presse. Donc de cette façon, je l'aurai de cette façon. Parce que si nous allons à la documentation de cette bibliothèque, toute cette presse U, comme vous le voyez, nous avons ici sur la presse. Et puis il passe quelque chose comme une fonction. Et puis il a défini une fonction personnalisée qu'il veut. Par exemple, mettre pressé, quelque chose comme ça. De cette façon, je peux dire, ok, exécutez pour moi cette fonction qui est passée au composant de bouton Play. Donc, de cette façon, quand je sauve et aussi une ISA, celle-ci, je dirai que d'accord, presse gérée fonctionne pour moi, mais ici je dois définir une fonction. Et cette fonction définira pour moi le modèle à être visible ou non. Donc, au lieu de cela, vous pouvez définir votre propre fonction. Donc, je dirai par exemple, fonction que j'appellerai comme vidéo montrée. Donc, cette vidéo montrée sera une fonction, mais vous ne l'exécutez pas, parce que si vous avez exécuté, alors c'est faux. Donc, il sera exécuté directement. Vous ne gérerez pas cela car nous gérons l'exécution à l'intérieur du composant de bouton Play avec ceci. Donc, si vous voyez que nous avons géré la presse, qui sera dans ce cas la fonction vidéo montrée, nous passons à travers ce composant et il sera exécuté ici. C' est un calme, compliqué, mais c'est facile à comprendre. Donc, je passe une fonction à ce composant et je l'exécute. Alors c'est tout. C'est très simple. Et je l'exécute quand, quand j'appuie sur ce bouton, qui est appelé répressible, et il a cette icône. Lequel est celui-là ? Donc, définissons la fonction vidéo montrée. Donc, je vais dire ici const, et ce coût sera une vidéo montrée, et ce sera une fonction. Et cette fonction sera implémentée pour définir la vidéo ou le modèle visible pour être vrai ou faux. Donc, de cette façon, Mettons-le pour l'instant, car je vais vous montrer comment basculer cette fonction plus tard. Alors maintenant, sauvegardons tout. Et puis nous allons cliquer sur ce bouton. Comme vous le voyez, j'ai le modèle, mais je n'ai pas la possibilité de le fermer. Donc, de cette façon, Créons une fonction ou un bouton où nous pouvons appuyer dessus et cacher ce modèle. Donc, je vais aller à l'intérieur de ce modèle et je crée un composant répressible. Nous avons ici la presse civile. Et cette pression devrais-je l'importer aussi de React Native. Pour qu'on puisse aller ici et dire « Importer » pour moi, presse. Ok, je l'ai déjà. Donc nous pouvons descendre ici et nous aurons un répressible et nous gérons la presse exactement comme nous l'avons fait à l'intérieur de ce bouton. Donc, quand sur le sein, je peux appeler la fonction, qui est appelée vidéo montrée. Mais nous devons l'exécuter d'une manière comme ça. Donc, nous avons ici une vidéo montrée. Donc, et la vidéo Shawn va gérer ce processus et il devra ici pour définir le modèle à vrai. De cette façon, nous pouvons non seulement définir le modèle sur true, mais nous pouvons le basculer. Alors comment on peut basculer ça ? Donc, je ne peux pas dire, comme quand je dis vidéo montrée, prendre l'état actuel du modèle et ensuite m'y opposer. Donc, quel est un état actuel du modèle est modélisé visible. Donc, après cela, je dirai, ok, mettre le modèle visible pour s'opposer à l'état actuel du modèle. Donc, quand c'est vrai, alors ça va le montrer. Quand c'est faux, ça le cachera. Donc, de cette façon, nous pouvons aller ici et nous allons exécuter la vidéo montrée en appuyant sur ce bouton. Mais nous allons envelopper le contenu du modèle pour être à l'intérieur de vous. Parce que toujours, comme vous le voyez dans la documentation, il est préférable de le suivre. Donc ici, ici tout ce qui est en toi. Et puis il a créé un bouton répressible. Donc de cette façon, faisons la même chose. Donc, je vais aller ici à l'intérieur du modèle et je vais définir une vue. Et cette vue, je vais l'envelopper autour de tous ces suppressibles. J' ai donc mis ici aussi la conclusion de ce point de vue. Donc on peut avoir ici comme ça. Donc, après cela, nous pouvons également mettre un texte ou une icône ou exactement n'importe quoi. Nous voulons, exactement comme nous l'avons fait avec le bouton. Je vais à la solution facile. Je vais mettre un texto. Et dans ce texte, je dirai, par exemple, cacher le modèle. Ok, on sauve tout. Le modèle de hauteur ici en haut et je ne peux pas cliquer dessus. Il est donc préférable de donner à cette vue un style où nous pouvons, par exemple, centré ce bouton ici au milieu. Donc on peut avoir du style ici. Et ce style va lire à partir de styles point et nous pouvons donner, par exemple, modèle vidéo. Donc de cette façon, nous devons définir le modèle vidéo d'une manière ou d'une autre pour pouvoir descendre. Et nous disons ici, le modèle vidéo l'a déjà défini. J' ai donc un modèle vidéo, flex, justifier le contenu, aligner les éléments exactement de la même façon que nous, nous centrons les éléments au milieu comme nous l'avons vu au début de ce cours. Donc maintenant cacher le modèle est au milieu. Donc quand je clique dessus, ok, le modèle est caché. Quand je l'ai ouvert à nouveau, le modèle apparaît. Donc, de cette façon, j'exécute la vidéo montrée. Il lit l'état actuel du modèle et s'y oppose. Donc, quand je clique dessus, il se cachera. Quand je clique ici, il s'affichera. Donc après cela, au lieu d'avoir ici masque modèle, nous allons avoir un lecteur vidéo. Et c'est ce que nous verrons dans la prochaine conférence. 50. Jouer un film dans le modal: Ok, maintenant dans cette conférence, nous allons voir comment nous pouvons jouer une vidéo ou jouer un film. Donc, quand j'appuie sur ce bouton Play, je vais montrer le modèle. Et avec ce modèle, j'aurai ici une vidéo. Ainsi, nous pouvons le faire facilement en utilisant une bibliothèque appelée React Native video control. Donc, si vous allez à Google et recherchez React Native contrôles vidéo, alors vous obtiendrez sur la première chose, quelque chose de GitHub. C' est donc une bibliothèque open source. Vous, nous pouvons l'utiliser pour lire une vidéo dans notre application. Donc, comme vous le voyez ici, la vidéo sera jouée comme de cette façon. Donc, les exigences d'abord, nous devons installer cette bibliothèque. Voyons donc comment nous pouvons l'installer. Il a dit que nous devons installer deux bibliothèques. L' un est npm installer, enregistrer, React Native vidéo, et aussi React Native contrôles vidéo. Alors installons ces bibliothèques d'outils. Donc, j'irais à mon application ou à mon code et j'ouvrirais le terminal. Et puis je vais coller ce commentaire. Et puis il va être installé sur mon application et nous pouvons l'utiliser ensuite. Donc maintenant, comme vous le voyez ici, la bibliothèque a été installée, il y a quelques avertissements, ok, ne vous souciez pas d'eux. Ils sont juste à propos de la vulnérabilité. Il y a des correctifs à faire sur ces bibliothèques et ils viendront sur les prochaines versions. Alors maintenant, cachons notre terminal. On n'en a plus besoin. Et puis nous allons travailler avec notre modèle. Donc, tout d'abord, nous devons supprimer ce permis ou nous pouvons le garder de côté. On le remettrait plus tard. Donc je vais avoir ici adressable. Donc je ne l'utiliserais plus. Et nous aurons ici pour importer la bibliothèque. Nous devons donc importer le composant qui a les vidéos. Alors j'irai ici et je vérifierai comment on peut l'utiliser. Ils utilisent dit que vous devez importer quelque chose appelé lecteur vidéo. Et le lecteur vidéo aura ces propriétés. Bien sûr, il y a beaucoup de propriétés, comme nous le verrons plus tard, nous pouvons aussi les utiliser. Donc, d'abord, prenons ce composant et importons-le dans notre application. Donc, je vais revenir au code pour la carte supérieure et ensuite nous avons ce composant prêt et nous pouvons utiliser son exemple. Donc, je peux, encore une fois à l'exemple. Donc, je peux utiliser celui qui dit ici, et je copie le composant qui est défini ici. Donc, en revenant au code et je vais le mettre où à l'intérieur du modèle. Je vais avoir ici un lecteur vidéo, exemple d'URL, vidéo et un navigateur sera quelque chose comme pour la navigation, nous pouvons le garder parce que nous en aurons besoin plus tard. Alors maintenant je vais sauver. Et puis nous allons appuyer sur ce bouton Play. Ok, comme vous le voyez, on a un problème. Donc, il est dit comme ça, point accessoires navigateur point. Nous devons donc supprimer cette propriété aussi. Donc, je montre étape par étape pour ne pas avoir d'erreur. Et vous n'avez pas besoin de poser des questions et d'attendre une réponse. Donc je vous montre toutes les erreurs possibles. Donc maintenant, nous avons seulement besoin d'une propriété qui est appelée source. Et cette source, vous devez spécifier quelque chose appelé URI. Et vous aurez MP4 vidéo, mp4 vidéo, comme vous pouvez l'obtenir de n'importe où. Vous pouvez télécharger une vidéo, faire votre serveur, puis vous pouvez la lire de cette façon. Donc, vous pouvez juste obtenir le lien de la vidéo. Donc maintenant nous économisons, et maintenant je vais lire la vidéo ou je vais à ma vidéo, puis j'appuie sur Play, et nous obtenons une autre erreur. L' erreur montre ici que la bibliothèque n'est pas encore définie ou que sa vidéo de bibliothèque n'est pas encore définie. Donc, pour cela, nous devons trouver une solution qui peut être possible sans liaison. Parce que comme vous le savez, faire un lien comme React Native link se fait automatiquement sur React Native six et plus. Donc je préfère revenir à la documentation de la bibliothèque. Et puis nous voyons étape par étape, quelles sont les solutions pour cela ? Donc, comme vous le savez que cette bibliothèque dépend de quelque chose qui est appelé React Native video. Donc, comme vous le voyez ici, si vous lisez la documentation, nous devons cliquer sur React Native video car nous l'avons déjà installé avec cette commande. Nous avons donc React Native Video et React Native Video contrôle. Donc, de cette façon, nous devons aller à bibliothèque React Native Video et aller vérifier étape par étape comment l'installer, car il ne suffit pas que vous n'installez que MPM parfois. Et puis l'application fonctionne comme une magie. Comme vous le voyez ici, il y a quelques étapes pour l'installation iOS, Android, et il y a aussi d'autres systèmes. sur quoi nous travaillons maintenant, c'est iOS. Si vous voulez suivre pour Android, vous pouvez faire de la même manière également. Il dit que si votre projet utilisant React Native moins de 0,6, alors vous devez faire cette liaison. Sinon, vous n'avez pas à faire ce lien être enseigné parce que réagir automatiquement natif ferait fonctionner sur Android. Et bien sûr, si vous avez plus de problèmes, vous pouvez faire ce qui suit comme il est mentionné ici. Donc, tout d'abord, je vais à l'installation iOS. Je vais aller ici au détail iOS et il reste pour moi à nouveau. Ok, Vous utilisez React Native 0.6 et supérieur. Ensuite, vous devez faire exécuter pod install. Alors c'est tout. Vous n'avez pas besoin de faire de liaison si vous faites moins comme le point zéro 59. Et puis. Vous devez faire un lien. Soyez donc prudent car si vous faites la liaison et l'installation de pod, vous obtiendrez une autre erreur. Et c'est très difficile à résoudre après cela, et vous irez au point mort dans votre application. Donc je vous conseille de suivre exactement la documentation. Donc, je vais aller ici et faire installer MPM. Donc, en faisant l'installation de pod, il a deux façons. Peut-être que vous pouvez dire installer pod, tout ce que vous pouvez faire comme NP x pod installer, donc comme ceci. Ainsi, lorsque vous le faites dans le répertoire du film ou dans le répertoire du projet, vous avez l'export vide installé. Ensuite, vous allez installer ces dépendances. Et il vous dira comme, ok, tout est installé et lié à l'application iOS. Donc, dans ce cas, vous devez à nouveau redémarrer votre application en utilisant le terminal. Donc je vais fermer ma demande. Et encore une fois, je vais exécuter l'application à nouveau en utilisant React Native exécuter iOS. Donc, MDX React Native exécuter iOS va m'aider à résoudre ce problème, espérons-le. Ok, maintenant l'application est à nouveau en cours d'exécution et nous pouvons cliquer sur un des films. Ainsi, par exemple, nous allons à celui-ci et nous cliquons sur le bouton Play. Donc, lorsque vous cliquez sur Play, Nice, Vous avez comme lecteur vidéo fonctionne bien et vous avez le contrôle sur la voix. Et vous pouvez également contrôler la place de la, comme, par exemple, la vidéo. Et aussi vous pouvez l'arrêter et le mettre en pause. Et aussi vous pouvez voir un peu de minuterie. Et vous pouvez aussi y retourner. Mais ici, dans mon cas, je ne peux pas sortir de cette vidéo ou sortir de ce modèle parce que nous avons besoin de fonctionnalités à l'arrière. Donc, revenons à la documentation de la bibliothèque qui est React Native video player ou React Native Video control, que nous avons installé auparavant. Il y a une méthode ou une propriété où nous pouvons passer au composant et puis il aura comme quelque chose et effet. Donc parce que je ne peux pas appuyer dessus ici parce que j'ai besoin de spécifier une fonction. J' ai besoin de définir la fonction qui va cacher pour moi ce modèle. Donc, je peux décompresser quand je clique sur le dos, qui est celui-ci, alors le modèle sera caché. Alors, comment nous pouvons le faire facilement, nous allons à notre code, puis allons au lecteur vidéo et puis redéfinir à l'arrière exactement comment nous l'avons dans la documentation. Et cela sur le dos sera une fonction. Ainsi, nous pouvons exécuter une fonction dans le rappel de cette fonction. Donc ici, je vais dire vidéo montrée. Donc la vidéo montrée exécutée pour moi si le modèle est montré. Alors maintenant, nous sauvegardons et revenons à notre application, puis nous cliquons sur le dos. Nous avons toujours une erreur car ce navigateur ou cette fonction à l'arrière nécessitent le Navigator. Si vous vous en souvenez, nous avons supprimé cette partie ici. Revenons donc à l'exemple qu'il a donné ici. Il existe une propriété appelée Navigator. Et ce navigateur passe le contrôle de navigation de l'écran actuel. Nous avons donc besoin de ce nécessaire pour ce lecteur vidéo. Donc, je vais mettre ici et navigateur, et je n'utiliserai pas ce navigateur point prop point. Je vais utiliser l'application que nous avons passée ici, si vous vous en souvenez. Donc, je vais utiliser cette navigation pour fermer ce modèle. Donc ici, je dirais, au lieu de ce point produit de Navigator, je dirais utiliser la navigation. Et puis nous allons enregistrer et ensuite aller à l'application vidéo à nouveau et appuyer sur. Ok, le modèle est caché. Donc, de cette façon, la vidéo montrée est exécutée , puis l'intestin du modèle caché parce qu'il est déjà montré. Maintenant, nous jouons la vidéo sur la bonne voie de chaque film. Donc, pour cela, vous devez également fournir. Si vous voulez des vidéos où vous pouvez télécharger sur votre serveur. Malheureusement, cette API ne fournit pas de vidéos en raison des droits d'auteur. Donc, nous pouvons avoir ici comme un spécial, si vous avez les droits d'auteur pour afficher certains films, alors vous pouvez remplacer ces liens par cette vidéo. Et puis vous pouvez aussi bien faire quelques films application, jouant des films dans l'application. 51. Logique de clôture Modale: Ok, dans cette conférence, nous allons faire un peu de logique et de refactoring pour notre lecteur vidéo. Donc, par exemple, je peux créer un composant qui est appelé vidéo aussi. Et puis je peux jouer ou placer le lecteur vidéo à l'intérieur. Et puis je peux passer quelques propriétés. objectif de cette conférence que je vais vous montrer comment créer un composant d'une manière différente aussi. Donc, nous pouvons d'abord aller à la, nos composants et définir un nouveau fichier, et nous l'appelons vidéo. Donc, nous pouvons dire ici vidéo point js. Donc, au lieu d'utiliser les outils de snippets, nous pouvons aussi utiliser notre main. Nous pouvons donc créer le composant à la main pour comprendre comment nous travaillons réellement avec les composants dans React Native. Ainsi, la création d'un composant, un React Native requis pour importer React. Donc, nous pouvons le faire avec l'importateur ou avec Snipping Tool. Nous pouvons avoir importer React de React. Et puis nous devons utiliser le nom de leur composant afin que nous puissions donner bien, une constante et nous lui donnons le même nom du fichier, qui sera vidéo. Et puis nous pouvons définir comme une fonction. Et puis cette fonction aura comme retour, où nous allons retourner le modèle de ce composant. Et à l'intérieur du modèle de ce composant, je vais utiliser le lecteur vidéo que nous avons créé dans le détail. Donc ici, je vais copier cette partie. Donc, je vais prendre tout cela et ensuite le mettre dans la vidéo. Donc, dans ce cas, nous devons aussi importer le lecteur vidéo. Donc, de cette façon, j'ai importer le lecteur vidéo à partir du contrôle React Native Video. Donc maintenant, nous n'avons pas ce contrôle sur leur navigation. Et aussi nous n'avons pas le contrôle sur la fonction vidéo Shawn. Donc, de cette façon, nous pouvons créer des propriétés comme nous l'avons vu précédemment avec le bouton Play. Mais ici, nous pouvons créer les propriétés comme une fonction d'une manière différente. Vous pouvez trouver ou transmettre des invites à un composant ici. Ainsi, lorsque vous appelez un composant ou que vous définissez un composant, vous définissez un paramètre en tant qu'objet et vous lui donnez un nom. Par exemple, je dis sur les vêtements. Donc, cette fonction sera exécutée chaque fois que quelque chose se passe en dehors de ce composant. Donc, de cette façon, je dois aller dans les détails et ensuite je veux appeler mon composant vidéo. Donc, nous voulons appeler ce composant vidéo, nous devons l'exporter. Donc ici, après avoir un coût défini, je peux dire l'exportation par défaut, comme par défaut comme nous l'avons vu précédemment. Et puis je définit ce composant que je vais exporter. Donc, nous avons cette vidéo est exportée, nous pouvons l'utiliser dans l'écran de détail. Donc ici, je vais dire quand je vais importer pour moi la vidéo de, mais pas de React Native contrôles vidéo. Nous allons l'importer à partir de composants, puis vidéo. Et après cela, nous allons appeler ce composant. Donc, je vais dire ici dans le modèle lui-même vidéo et puis la vidéo va ici. Mais avant cela, nous devons passer cette propriété que nous avons définie ici. Donc, je peux dire la clause ON, donc nous pouvons avoir la propriété ici aussi. Nous avons donc ici la Convention. Cette propriété sera une fonction. Donc, de cette façon, je peux dire que cette fonction exécutera la vidéo montrée. Donc, vous pouvez dire ici, la fonction vidéo montrée. Donc, la clause ON ira comme cette fonction comme vous le voyez ici, et elle serait exécutée à l'intérieur du composant vidéo. Et vous pouvez aussi. Tu n'as pas à mettre tout ça. Vous pouvez mettre uniquement la vidéo montrée. Donc, nous pouvons mettre ici une vidéo montrée, donc comme une fonction et il sera exécuté à l'intérieur du composant vidéo quand il est à l'arrière, par exemple. Donc je peux dire ici, au lieu de la vidéo montrée alors UNCLOS, donc à l'arrière du lecteur vidéo, il exécutera celui-ci. Il y a aussi d'autres propriétés que j'ai trouvées dans la documentation, donc nous pouvons les utiliser aussi bien pour gérer notre application de la bonne manière. Ainsi, par exemple, sur Entrée en plein écran ou une sortie en plein écran et également afficher le contrôle. Ou par exemple, nous pouvons dire comme à la fin quand la vidéo et nous allons fermer la vidéo. Donc, de cette façon, je peux terminer la vidéo ou fermer le modèle quand il y a la finition de la vidéo. Donc, au lieu de cela, je peux dire ici comme à la fin et aussi comme à l'arrière, nous avons aussi fermer cette navigation. On n'en a plus besoin pour l'enlever. Donc, nous pouvons tester maintenant notre application. Donc je vais tout sauver. Donc, nous avons ici la clause ON vidéo, vidéo montrée et aussi celui-ci. Il ne devrait pas être fermé comme ça. Nous pouvons le fermer d'un côté pour ignorer l'erreur de peluches ES. Donc maintenant, nous avons le modèle et à l'intérieur de la vue et pur et propre, nous n'avons pas tellement de code ici. Donc quand je joue cette vidéo, comme vous le voyez ici, Ok, ça s'est bien joué. Mais quand je clique sur Précédent, c'est fini. Et aussi quand la vidéo va à la fin, elle devrait se fermer aussi. Alors attendons maintenant. Ça va fermer ou c'est fini. Maintenant, il est automatiquement sorti du modèle. Donc, de cette façon, j'ai sur la fonction arrière qui a fait pour moi le travail et aussi sur la fonction de fin. Il existe également plusieurs propriétés. Vous pouvez les voir dans la documentation, par exemple, bascule le mode taille en plein écran par exemple, nous avons cette propriété. Si nous le définissons sur true, alors il ne bascule pas la vidéo pour être comme ceci. Donc, lorsque vous cliquez sur cette icône en plein écran, ce ne sera pas comme ça. Donc, il est juste un cas où vous pouvez gérer aussi comme ce mode plein écran, le contrôle, animation, le timing, comme la quantité de millisecondes de temps pour animer le contrôle dans et hors. Comme si vous n'aviez pas à montrer que les contrôles après un certain temps. Donc, par exemple, quand ma souris est manipulée comme ça sans rien, alors les contrôles disparaissent. Alors que faire quand je passe, je touche le téléphone, puis j'ai les commandes à nouveau. Donc, toutes ces propriétés, vous pouvez les essayer par vous-même et ensuite vous serez en mesure de voir comment cela fonctionne et comment ce lecteur vidéo fonctionne avec vous. C' est donc la fonctionnalité que je voulais vous montrer. C' est quelque chose comme montrer comment nous pouvons créer un composant par nous-mêmes et définir propriétés d'une manière différente pour appeler certaines fonctions externes en dehors de ce composant. Dernière chose que je veux mentionner aussi sur notre modèle que lorsque nous avons besoin de soutenir l'orientation, donc quand je retourne ou tourne le téléphone horizontalement ou portrait. Donc nous pouvons avoir un peu plus de V pour être comme plein écran. Donc, de cette façon, je peux également définir une fonction qui est définie ou une propriété qui est définie dans le modèle, qui est appelée orientations de support, que j'ai également obtenu de la documentation du modèle. Donc, je peux dire ici, comme l'orientation soutenue sera dépeint et paysage. Donc, de cette façon, le modèle, nous le soutenons également. Donc, quand mon téléphone va tourner, alors il fera quelque chose comme pour moi de soutenir le modèle de la bonne façon. Donc maintenant, quand je vais à la vidéo, j'ai besoin d'ajouter une propriété de cette façon, qui serait appelée orientation plein écran. Tout. De cette façon, je peux avoir le contrôle de l'orientation sur tous les modèles. Donc, lorsque le modèle revient à être représenté, alors aussi le lecteur vidéo sera représenté. Alors essayons ça. Donc je vais sauver ça et je vais commencer la vidéo. Ok, on a la vidéo sur le bon chemin. Je vais tourner le téléphone pour être comme un paysage pour qu'on puisse le dire comme ça. Comme vous le voyez, le lecteur vidéo a également adapté à cela et aussi le mode plein écran du téléphone. Donc, nous avons maintenant cette capacité de tourner le téléphone en fonction des propriétés que nous avons et comment nous avons défini notre application. Donc, de cette façon, nous serons également en mesure de voir plein écran lorsque nous tournons le téléphone autour. 52. Ajouter la barre de navigation: Si vous vous souvenez, dans app.js, nous avons créé plusieurs écrans. L' un est pour la maison et l'autre pour le détail. Et quand je navigue pour les détails aussi, je vais voir comme une barre de navigation sur le dessus. Et nous pouvons en quelque sorte ajuster ces barres de navigation pour s'adapter à notre application. Donc, par exemple, je n'ai pas besoin de montrer ce détail. Je ne veux pas montrer cette fonction à la maison et aussi aimer comment nous avons ici la flèche. Je veux une barre de navigation personnalisée. Par exemple, si je suis sur l'écran d'accueil, je peux avoir un bouton de recherche où je peux le vendre pour des films. Et aussi je peux aussi. Quand je vais au cinéma, je n'ai que ce bouton de retour. Donc, si vous vous souvenez, dans React navigation native, nous avons défini les écrans et ils ont quelques propriétés. L' un d'eux est appelé composant. Et il y a aussi une autre propriété dans React navigation native, qui est appelée options. Et ces options, vous pouvez passer les options que vous voulez dans votre navigation. L' une de ces options est appelée en-tête. Ainsi, l'en-tête peut être de cette navigation réglable pour recevoir un composant spécifique, pas ce composant ou pas le composant par défaut qui est défini dans la navigation, inclure également une autre propriété comme ils sont le titre de l'en-tête de l'image, et aussi en-tête d'arrière-plan Left avaient leur lumière. Beaucoup d'informations que vous pouvez spécifier dans l'en-tête de cette navigation ou de cet écran. Donc, par exemple, essayons une propriété qui est propriété qui est appelée en-tête transparent, et cet en-tête plante balance. Si vous le mettez à vrai, alors il rendra l'en-tête est un transparent comme vous le voyez ici. Donc, la navigation sera à l'intérieur de cet écran. Nous pouvons avoir la navigation directement à l'intérieur de notre écran, pas à l'extérieur de l'écran, comme si nous aurons comme un peu d'espace dans la zone de sécurité comme nous nous souvenons. Donc parce que nous appelons cela comme une zone spatiale, parce qu'à l'extérieur, ce n'est pas une zone sûre. Donc aussi définissons cette option pour la page détaillée. Donc, je vais aller ici aux options, les copier, et les définir aussi pour la page détaillée. Donc, dans le détail, j'aurai aussi un en-tête transparent. Mais comme je vous l'ai dit, nous devons nous débarrasser de cette maison et aussi du titre qui est ici. Donc, pour cela, nous pouvons créer notre propre composant en disant que je veux en-tête. L' en-tête sera totalement différent en appelant une fonction qui est une fonction de rappel où je peux spécifier le composant de rendu qui sera rendu ici. Donc, par exemple, vous pouvez dire que je veux un texte seulement, je veux juste un composant spécifique. Je veux juste un bouton où j'ai une recherche. Ainsi, vous pouvez créer votre propre composant et le spécifier dans l'en-tête ici. Essayons donc l'application et créons notre composant. Donc, je vais aller aux composants, créer un nouveau composant. Donc, ici, nous aurons un composant, nous pouvons l'appeler navigation. Donc, je dirais ici navigation point js. Et puis nous créerions un composant pur comme nous l'avons vu auparavant. Donc, en utilisant le week-end de l'outil de capture d'écran ont une classe de composant pur et cette classe de composant d'ordinateur sera importée et étendue à partir de React Native dot-dot composant pur. Donc, je vais avoir votre IMR et puis la navigation de classe étend React dot composant pur comme nous l'avons vu auparavant. Ou nous pouvons renommer notre navigation pour ne pas avoir de conflit dans le nom week-end, disons comme navbar. Donc, nous pouvons appeler ce composant comme une barre de navigation. N' avez pas de conflit avec les autres noms de la navigation. Donc, nous pouvons renommer ce fichier pour être ainsi et barre de navigation. Donc, revenons pour l'instant juste un composant de texte. Donc, j'aurai ici du texte, et ce texte tiendra comme le nom de l'application par exemple. Donc, je peux dire Movies app. Donc, de cette façon, nous aurons la navigation sur le dessus afin que nous n' ayons pas à oublier aussi d'importer le composant texte. Donc, je vais avoir ici le texte de React Native. Donc maintenant notre composant est prêt pour l'importation. Donc, je vais aller à app.js à nouveau, et puis je dirai importer pour moi la barre de navigation. Donc, nous disons ici importer navbar à partir de la barre de navigation du composant. Donc, c'est exactement la même façon que nous faisons avec les autres composants. Et ici dans l'en-tête, dans le rappel, je vais appeler la barre de navigation elle-même. Donc maintenant, quand on économise ou on peut faire cet appel comme un appel secondaire. Donc on peut avoir ici de ce côté. Et puis quand nous sauvegardons et allons à l'un des films, par exemple, celui-ci. Et c'est lui que nous aurons le titre sur le dessus et à l'intérieur de la zone de sécurité. Donc nous avons besoin ou en dehors de la zone de sécurité. Donc, nous devons le mettre en quelque sorte dans la zone sûre. Que vous pouvez le faire facilement et appeler un composant qui est appelé zone de vue sûre, sauver l'un d'entre vous vient aussi bien de React Native. Vous pouvez donc utiliser ce composant après le rendu. Donc, nous allons remettre ce retour et nous entourons le composant de texte avec le composant qui est appelé zone de vue sûre. Donc, nous aurons ici le texte à l'intérieur de cette zone sûre. Et comme vous le voyez, le titre de l'application de film est déplacé vers la zone de sécurité. Donc, notre application n'est pas en conflit ou le contenu de notre application, par exemple, la navigation n'est pas en conflit avec la zone de sécurité comme l'orange et l'heure, ainsi que la batterie et le signal. Donc, à l'intérieur de la zone de sécurité, je vais sur cette navigation. Je vais avoir un logo ici. Et aussi, nous pouvons définir quelque chose comme le bouton Retour comme il était avant. Et aussi, nous pouvons avoir une icône pour la recherche. Mais dans le détail de ce film, nous ne pouvons avoir qu'un bouton de retour. Nous n'avions pas besoin d'avoir une poussée et le local. Donc on ne peut avoir qu'un bouton de retour. Donc, à l'intérieur de la zone de sécurité, nous pouvons avoir une vue. Et cette vue sera également importée de React Native comme nous l'avons vu. Et puis nous aurons un bouton, afin que nous puissions utiliser un bouton d'opacité tactile. Donc nous pouvons avoir ici une opacité touchable comme nous le voyons ici. Et il a la propriété qui sera sur presse et revenir en arrière. Maintenant, nous avons l'opacité des tuples. Nous pouvons spécifier l'icône à l'intérieur. Ainsi, nous pouvons également utiliser quelques icônes de notre bibliothèque d'icônes que nous avons déjà installées. Donc, nous pouvons donner ce nom pour cette icône peut être une icône de retour en arrière. J' ai déjà reçu le nom de la documentation. Et la taille. Nous pouvons spécifier la taille de l'icône, qui peut être 40. Et aussi, nous pouvons donner une certaine couleur, qui peut être blanche. Donc on peut avoir ici la couleur. Et puis nous mettons ce HashCode, trois Fs, et puis nous fermons l'icône d'un côté. Donc maintenant, ce que nous devons importer, c'est la vue. Et nous devons aussi importer le composant icône. Donc, l'importation du composant icône d'élément de la bibliothèque que nous avons spécifié avant et que nous avons utilisé. Alors gardons ça et essayons. Joli. Nous avons ici à l'icône touchable opacité. On peut cliquer dessus, mais ça ne fait rien. Donc, en appuyant sur cette opacité touchable, nous pouvons spécifier et naviguer afin que nous puissions revenir à la page précédente. Je vais donc le dire à la presse. Et avec cette compresse, ce sera une fonction de rappel. Et dans cette fonction de rappel, j'ai besoin de spécifier la navigation. Si vous vous souvenez, nous n'avons pas la navigation ici parce que nous avons une barre de navigation. Donc, nous devons le passer d'une manière ou d'une autre de l'extérieur de ce composant. Donc, en quelque sorte, nous devons créer un accessoire pour cette barre de navigation. Donc, je peux revenir ici à nouveau au composant Navbar et créer un nouvel accessoire, qui peut être appelé navigation aussi. Donc, avant de revenir, je vais définir une constante. Et cette constante sera un objet parce que nous aurons besoin d'autres propriétés, comme nous le verrons plus tard. Je vais l'appeler navigation. Et cette navigation, nous aurons ces accessoires de point parce que nous importons ces accessoires de point et nous l'utilisons comme accessoire. Et puis ici sur presse, nous pouvons dire comme après avoir cette fonction de compresse, nous devons exécuter quelque chose qui sera appelé point de navigation, revenir en arrière. Et c'est déjà la méthode définie, ce qui m'aidera à revenir dans mon application à la page précédente. Mais avant cela, nous devons ne pas oublier de passer la navigation au composant Navbar. Et nous pouvons le faire via ab.js. Et comme vous le voyez ici, nous pouvons spécifier la navigation. Et à l'intérieur de cette navigation, nous pouvons dire obtenir la navigation à partir de leur écran actuel, comment nous pouvons l'obtenir. Nous pouvons obtenir la navigation de l'écran actuel en passant ici dans la fonction de rappel, quelque chose comme l'or aussi, navigation parce qu'il a un paramètre où nous pouvons utiliser la différence de la navigation de cette page détaillée, pour exemple. Et puis je peux le passer ici. Donc, sauvegardons tout et puis essayez à nouveau de cliquer sur le bouton. Ok, on a une erreur. C' est une erreur que j'ai fait par but parce que je veux vous montrer comment vous pouvez passer puis la navigation à partir de la balance comme à partir de cet écran. Donc, quand vous voulez mettre la navigation en pause, Il ne suffit pas de le passer comme ça. Vous devez l'entourer de supports, avec des supports incurvés. Donc, ça peut être un objet. Donc, vous devez être très prudent avec ceux-ci, comme un crochet et comment vous pouvez les spécifier. Donc, de cette façon, cela fonctionnera car il sera défini, la fonction de rappel sera définie. Donc, quand je clique sur ce bouton, Ok, je retourne à mon composant. Donc, de cette façon, nous aurons un objectif spécifique, comme revenir en arrière bouton seulement pour le composant du détail parce que je l'ai spécifié seulement pour la page détaillée. Je n'ai pas pour la page de l'écran d'accueil. 53. Navigation de l'écran à la maison: Ok, bonjour, le hachage de clé de la condamnation et la navigation a un AAC sulfhydryle. La main, je suis une navigation m'a demandé un sous-titre et le cerf, vieux détails du film, mais il a ensuite obtenu un 100 et qui va maintenant navigation coeur nous battre de la façon dont l'unité de soins intensifs a donné Morgan et avait leur propre moi a été et navigation et plus serait un sous-marin. Que diriez-vous de voir votre mode de navigation serait un détail que MOOC et nous avons 30 et composant partie dynamique égale qui avait été non seulement comment SI, leader était allé principal pour n'avait pas principal, ne passaient pas par 0. Faux. B a un cœur doux et Mozart ou pour l'un peut entrer dans notre live. Comment cela signifie-t-il que nous avons dit les accessoires par défaut ou le siège social que vous faites. Ça ne voulait pas dire qu'il a fait le tour des chutes. Il était allé plus vieux AC encore, mais caché dans Auth0, celui de taper, les propriétés de frappe est à zed seiche eidetique, et aller de l'avant et principalement allé j'ai acheté sur Boolean. Le gouvernement est maintenant les types de bloc milieu commandent assez importante étude du sommeil à loisir à partir de là elle va briser Mirada et ce qu'ils n'aiment pas, mauvais diable homme et certains Amaka homme et trompé, main longtemps recherché dans Lean et déposez les divs avec les accessoires par défaut assez, mais vous n'obtiendrez pas d'amine. Hey, allez, piratage, n' aura pas une barre de navigation, points cassés divs étaient barre de navigation, les accessoires par défaut ont été poncés sur hey, Althea pour mon genre d'adhésion de Guan et le composant j a thermique obtenir ceci pour avoir un corps principal et pourquoi une entreprise avec lui ? Je ne suis pas allé de l'avant que moi. Démarrez-les sur Azure, la barre de navigation arabe, MC que si une barre de navigation et le module de plan d'eau chaude qu'il avait R4 et tout le brouillage de navigation est parti. Main Lemma au corpus de la façon dont l'ACA ou mon père cool, principal et plus allé être un cœur doux et a trouvé un Derek gras et R3, cette propriété de barre de navigation que je suis un accessoire nodal pour la façon dont la lueur parler tombe. Mettez en surbrillance suffisamment en bas de détails de bits égaux. J' avais une équipe enseignée par p-hat et nav bar. Le maïs élevé est venu à 0 au-dessus de Gombe, un sous-AC. Mais les cartes eidétiques et la barre de navigation assez régler la mise en œuvre. Quand les vieux gens ont obtenu un non, BS ont eu un facile à un diable quand un cavalier sur elle, il va, mais pensez-vous qu'ils vont obtenir gamma et ce teinture vous, les inconnus n'ont pas besoin. Faux, il n'y a pas de limite si tout le composant ajouté pour réveillé à travers l'Italie, il derrière un sulfhydryle. Vous vous voyez la hauteur à l'écran d'accueil. Et puis le composant dans le principal pour la façon dont ce domaine, mais double-cliquez sur un bouton et nourrir et si la graisse, si et la tête qui signifie que je voulais exclure Dudley, Alice avait été moi dit logo et application de l'hôpital. Que pourrait-il une li une recherche pour la journée avec un objet chaud tout dans le corps principal dans un coup à ce travail diff-amp, Danny, hey Ayesha à ce diff-amp habe Dann émis si inline, le cas échéant, cellule B à la large pour Euler ou comment chaud le coeur vraiment mauvais coup qui est, le fondateur avait café Highland principalement à travers le cœur à nouveau et la force principale qu'une hotline pendant un certain temps, ne le voyez pas beaucoup. Si vous aviez dans le Maine ne peut pas forcer mais il a eu beaucoup pour lui pour Bob. Salut disparu, interview assez. Donc, l'Italie qui étaient lamelles appellent principalement faux Yanni et ensuite faire sur un domaine un sulfhydryl ACA marines de hauteur à la méthode directe alors. Mais il a ensuite Ic, puis ma mère et la moitié étaient finies. Elle l'a laissé parler autour d'eux. Gétait montré à la maison du théâtre et avait le Mason sur l'APA à partir d'un Hub. Bonjour, honnêtement à un luminaire a été rejeté par ce Bob. Et pourquoi sortent-ils les demi-vies pour ADA, il volants leurs cheveux mi-feuille pour Madelyn, trouver un copain, Je ne vais pas obtenir un composant qui oh, si autre copain, copain qu'il peut l'un d'entre vous avait très, si vous n'êtes pas cinéaste principal était allé à l'opposé de la façon dont je le vois. Je prends et nav bar se battre. Quand il s'agit d'un IE et IC à haute teneur en matières grasses que vous alliez sur un petit voyage sous AC. Si je l'avais fait, alors ça aurait pu être qu'ils avaient un composant de plomb. Je vais voir qu'il va module que nous battrons le cœur qu'un prix de hamburger elle Morgan et composante santé. Et comme je l'avais été, solaire triste et chaud va obtenir des îles de logo avait été réinitialisé pour la façon dont le logo et logo application mari Debye. Ensuite, il peut image composant. Et ce composant d'image ou j'ai acheté sur la façon dont le voir comme ma source et source mesure MAC pour cet aggrecan ne sera pas cuire quand j'ai acheté sur mon amour. Oh, tu es dedans et mon pied gauche est plus nécessaire. Eh bien, mais il fallait RF et massage, une décapitation de maison et MLF. Et je suis le manifeste mais continent avec logo d'or, certains forgé avec ce qu'il peut y unité. Lorsque les actifs de Magellan par le dyadique et demi rétrogradation quand 4D complot que comme des actifs pour le bien ou le mal ici est de les avoir image de haine et l'image. Lui, Je mieux et plus v's regarder PNG dans mes ouragans, amusez-vous. Et j'avais mon côté. J' ai la loi que l'ordre du jour mudra d'ici là un élément chaud sur les actifs pour les acides biliaires et les films. Image sur les films point PNG. Pour un dur, ça ne s'en sortira pas. Image ou logo. Et la barre de navigation, si vous aviez un AAC par le peigne à cheveux peut dominer une image ou une annonce ou l'automne ou l'importation, Réagir Native pour un copain, Je serai maïs et Andi. Judy, sois lui. Ghani est de les avoir être authentique lasagne jambe et il a un choix de plongée pour l'image être beaucoup de gamma1, mais il ne pouvait pas encore ces poids numérotant de la santé ce dyne bien maintenant je suis un additif styles d'objet McDermott, qui n'était pas à leur manière, mais sur la feuille de style, pourquoi cette feuille d'étude que je dois ajouter une classe est plus locale. Mais il pourrait alors riff et une constante klaxon là. Tout verre hydrogène ou quel composant numérique et quel âge. Et ils sont constants. Quand j'ai acheté sur les styles et fait une herbe ADA comme dynamite à la façon dont composant soviétique, ami génétique si composant dirigé, feuille de style ancienne ici et compris un composant qui est la plupart feuille de journal va maintenant créer. Nous créons l'objet coude sur un verre entre mon ombre. L' homicide a décliné. Pour logo à haute teneur en maïs. J' ai acheté sur la largeur, la hauteur et la largeur. Beaucoup de la scène à la maison ou mal de tête ou de foin, maïs et haut que comme Amy l'a dit. Allez. Je vois plus loin était allé je l'ai acheté sur Logan. Il a encore hoché la tête. Pourquoi en frais LU moins ECA et je vais importer cette feuille de style. Mon pote, pas sur le logo. Michelle de Drew peut venir avec un magazine sur les abeilles Elliot, elle, pour mauvais, hey mec, tu n'auras pas une feuille sur nous si Danny a une mauvaise image pour la méthode et on va obtenir de l'aide. Une excitée ici sur le bord il fname pour dégénérer le crochet dessus. Mon étude alors il peut toucher opacité composant iléon et avait que sait. Oui. Donc j'ai eu beaucoup d'entre eux OU ils ont eu opacité touchable qu'ils ont Trialistes Coursera avait été moi triste, J'ai commencé avec un groupe entièrement allèle. L' ion de commandement affiche le message, indique quelle est la taille, 18, l'équivalent jusqu'à maintenant. Mais Hickman peut fonctionner foin et puis j'ai dû en faire un jusqu'à Jack, Nevada et naviguer naviguer dans Allah du Jour J et plus tard Hannah, Je suis Debbie, les règles de Nuage, les principales idées de la façon de coordonner. Et Sache en tant que tel que ACH soit les composants de recherche sont OVNI. Eh bien, j'ai dit qu'on avait presque vu une poussée. Un lit plat peut tenir à moins que le problème de numérotation va presque être style. Je ne sais pas, non trié pensé un pot sur un local là-bas. Et comme vous vous souvenez, Janet bas, données thermodynamiques avaient un annuel ou non, Les Hustler ans meurent en effet pourquoi ils ont décidé D plus le logo, puis l'ADSR. Quel drôle qu'il peut traîner sur le style soit comment il est direct RF, commande de styles, ce que j'avais obtenu mon fils et je suis arrivé sur un domaine f. Mais lumen avait un nom principal, jamais entendu parler d'un atout ou hostile comme Mohak l'a fait. Huntley aura répondu à cette question. Il accroché Oh, hautement sur aussi appelé fond magenta pour tout ce qu'elle fait il inflige ogive d'avoir l'ancien examen NACADA avait un slicks en vous donnant contenu ou modèle ou une main sur Adorno il V été sur l'espace ? Oui. Le logo, un corné, un espace minute de haute qualité entre tout pourquoi j'ai fermé ou ils ne seront pas de toute façon, cette plaque elisa. Mauvais HIG. Et c'est tout. Je te verrai là-bas. Toute graisse externe et régénérer goulot d'étranglement et savoir comment le soulever toute l'année. Puis scintillement et de haute qualité est petite, direction de flexion de la colonne. C' était un total de poche Danny Meyer hi colonne coin, ce modèle et tous les autres animaux, poupée, étudier autrement soit la moyenne ou l'entreprise ADSR sortira le rembourrage et avait le Nevada et Schwann, comment off une chemise vous quantifiez, incorporer Asherah, ce que j'appelle va disparaître si la foule qu'ils vont et je vais aider ma canette ne sera pas obtenir un poisson est aligner les éléments, envoyer cette photo. L' acétyle soit Shaquille, MALDI, Mozilla, et bop mis un harnais sur lui, Ghani, au-dessus du bord honnête. Ce que j'affirme. 54. Refactorisation des troisième sections: Ok, dans cette conférence, nous allons voir comment rendre comme le app.js plus simple. Nous pouvons déplacer du code vers un composant séparé. J'aime toujours le supergo à certains composants pour avoir une base de code inférieure dans mes applications ou dans mes fichiers. Pour cela, peut-être pourrions-nous déplacer tout ce conteneur de navigation vers un autre composant car nous devons créer des écrans de chargement et également des erreurs lorsqu'il y a une erreur dans l'API, afin que nous puissions l'afficher dans l'application. J'irais donc avec la création d'un nouveau composant. Je peux peut-être appeler ça une navigation principale. Je peux donc donner un nom dans le composant. On peut dire que le point de navigation principal est. Et ensuite, nous pouvons créer comme un simple composant audio et créer le composant avec un apatride. Nous pouvons donc créer un composant pur ici. J'appellerai donc mes extraits, et je dirai un composant pur, je vais supprimer cet état. Et nous pouvons également couper tout le contenu du conteneur de navigation. Comme si nous n'avions pas le conteneur de navigation. Nous n'obtiendrons que la pile. Ainsi, je n'obtiendrai que les deux écrans ou le navigateur de pile. Je le découperais et je le collerai dans ma navigation principale. Et nous allons aussi ramener ce qui nous manque, par exemple, nous manquons constante, nous allons l'obtenir. Ici. Je vous apprends à faire un refactoring pour les choses, car sinon, vous aurez un code compliqué et vous ne serez pas en mesure de gérer ou de maintenir ce code. Nous avons donc également besoin de certaines importations, comme si vous vous en souvenez, nous avons ici pour importer React. Je vais donc obtenir un React et mettre de l'extension à partir d'un composant pur. De plus, nous devons avoir ici quelques importations, comme nous le verrons plus tard. J'ai donc besoin, par exemple, du navigateur Create Stack pour que nous puissions le prendre. Et nous avons également besoin des écrans que les composants, nous allons utiliser comme verts dans ce composant. Je vais donc les couper et aller ici et mettre de l'importation, mais notre composant est à un endroit différent. Nous devons donc monter d'une étape et ensuite faire les écrans, puis je reçois l'écran des composants. Et ensuite, la même chose pour les détails. Mais ici, la barre de navigation des composants se trouve dans le même dossier. On peut donc juste le dire comme ça. Après cela, nous économisons. Ok, c'est que notre code est formaté, nous n'avons aucune erreur ni aucun problème. Donc ici, au lieu d'avoir toutes ces balises, navigateur et tout cela, nous pouvons simplement appeler notre composant, appelé navigation principale. Nous allons donc importer la navigation principale. Je dirai « Import ». Et puis sans crochets comme nous l'avons appris. Nous avons donc ici une navigation principale. Je vais donc obtenir ici les composants et ensuite me donner la navigation principale. De cette façon, je peux enrouler ici dans la navigation. Je peux dire, apportez-moi la navigation principale. Et il sera fermé d'un côté car il s'agit d'un composant sans contenu. Et maintenant, nous devons les remettre en place. Ou quand vous voulez économiser automatiquement plus joli, nous mettrons tous ces crochets. Maintenant, notre composant fonctionne bien. Alors, quand on va au détail, d'accord, Nice. Et comme vous le voyez ici, nous avons encore un bug, que l'en-tête, le navigateur ou le navigateur principal existe toujours. Même moi j'ai dit quand EDS détail alors ne le lui montre pas. Et pour ce problème, nous devons également ajouter certaines propriétés à notre navigateur. Ainsi, l'une des propriétés que vous devez ajouter pour ne pas avoir ce chevauchement de la navigation principale à l'intérieur de la navigation détaillée est appelée mode en-tête. Vous devez donc être sûr de l'ajouter au navigateur de points de la pile du navigateur. Le mode d'en-tête peut donc être réglé sur écran. Vous pouvez donc dire que le mode d'en-tête de l'application doit être écran. De cette façon. Comme vous le voyez, nous n'avons plus cette navigation de navigation domestique. Comme vous le voyez, nous avons tous défini. Donc, lorsque l'application arrive sur l'écran d'accueil, c'est choisir la navigation, mais la principale est Drew. Ainsi, la barre de navigation a été rendue en fonction du principal. Si c'est vrai, il affichera le logo ainsi que le bouton Rechercher. Si ce n'est pas le cas, il n'affichera que le bouton de retour comme vous l'avez vu ici. Nous sommes maintenant prêts à utiliser notre application comme dans la navigation. Dans la section suivante, nous verrons comment cliquer dessus pour naviguer dans OT dans la recherche, accéder à la page de recherche et rechercher un amorphe. 55. Recherche de films Tvs Services: Ok, dans cette conférence, nous allons voir comment nous pouvons créer une poussée. On doit donc chercher un film ou une émission télé. Donc, de cette façon, j'ai besoin de trouver la bonne API pour l'utiliser. Donc, si vous allez à la documentation de l'API, vous trouverez quelque chose qui s'appelle surge. Et dans la poussée, vous pouvez être en mesure de le savoir. Donc quelque chose comme chercher des films et aussi chercher des émissions de télévision. Donc, les films de recherche auront une API spécifique qui s'appelle surge movie. Et il a quelques paramètres que vous devez passer. La même chose se passe aussi pour la surtension TV. Nous avons aussi besoin d'avoir SRD puis dv. Et puis vous pouvez passer les paramètres comme la clé API et aussi langue et la page et aussi la requête qui est nécessaire pour que la requête, ce sera la chose que l'utilisateur va entrer ici dans l'application, puis il obtiendra les résultats sur la base de cela. Alors, allons-y et créons le service pour cela. Donc, pour moi, je vais avoir comme les mêmes services que j'ai créés auparavant. Donc, nous aurons ici les services. Je copierais un de ces services, alors copions celui-ci et allons ici. Et puis on appellera ça le film ou la télé. Donc, je vais vous dire pourquoi nous, comment nous pouvons fusionner ces services pour obtenir. Donc, de cette façon, il peut être appelé surge film ou TV. Alors, cherchez le film et le DV. Pour qu'on puisse chercher les deux ensemble. Et ici, nous pouvons dire chercher un film ou une télévision par mot clé. Donc, nous pouvons avoir quelque chose comme quelque chose, un mot clé ou une requête qui passera comme un paramètre ici, et nous obtiendrons le résultat basé sur cela. Alors construisons notre URL. Donc, tout d'abord, nous avons besoin d'une requête, comme nous l'avons vu dans la documentation. Donc, comme vous le voyez ici, nous avons quelque chose comme l'or une requête. Ainsi, la requête sera transmise aussi bien, faites l'application ou à l'API via l'URL. Donc, pour cela, j'ai besoin de passer un paramètre quand j'appelle cette erreur est comme de l'application lorsque l'utilisateur que nous cliquons sur cela et avoir quelques livres épais. Et puis il va appuyer sur Rechercher, puis il passe la requête. J' ai donc besoin d'avoir ici quelque chose appelé un paramètre de requête. Et dans ce paramètre de requête, je peux le passer à travers l'API. Alors comment nous pouvons le faire passer. Si vous vous souvenez, nous avons des paramètres comme celui-ci. Nous pouvons aussi passer une requête au lieu de cela, parce que ces paramètres exactement, vous pouvez les passer à travers une URL. Donc maintenant, nous avons besoin d'une requête, et cette requête sera le carré qui est passé à cette erreur est, donc nous pouvons avoir ici alors, ok, passer pour moi la requête précieuse. Donc, de cette façon, j'aurai mon API ayant cette requête. Mais au lieu de cela, nous devons faire des recherches, comme vous le voyez ici. Si on monte, on a ici Surge TV et Serge film. Donc c'est exactement de la même façon, mais c'est différent. Alors mettons-nous ceci comme recherche. Et maintenant, nous discutons du genre. J' ai besoin de chercher un film ou une télé. Donc, nous ne pouvons pas avoir aussi un autre paramètre ici. On peut dire « type ». Donc, et ce genre, nous pouvons lui donner une télé ou un film quand nous appelons le service. Donc, je vais mettre ici aussi, au lieu de film, je peux mettre le paramètre qui est de type. Donc, de cette façon, mon URL d'API, l'URL d'origine, comme vous le voyez, vous aurez une recherche de barre oblique et ensuite le type qui serait un film ou un téléviseur. Et puis je passe les paramètres, le podomètre, cette clé API, comme nous l'avons vu, qui a celui-ci. Et aussi la requête que l'utilisateur a saisie pour trouver un film ou une télévision. Et puis il retournera ces données en tant que résultats. Voyons que ce sont les étangs dans l'API à quoi cela ressemblera. Donc, comme vous le voyez, nous avons ici quelques pages et aussi des résultats et le total des résultats. Donc, de cette façon, vous avez ici aussi quelques résultats. Donc, nous allons le mettre nos données de point de réponse, parce que cela vient d'axiomes. Il revient pour d'autres données. Et puis je peux accéder à ces résultats, ajouter, puis il sera retourné avec l'API comme ceci. Donc, nous aurons la même chose, film, bidon de diéthyle, vidéo, et toutes les autres informations que nous recevons ici. Alors maintenant, notre service est prêt. Dans la prochaine conférence, nous allons créer l'écran de recherche, et nous allons utiliser ce service pour afficher des films, que nous avons trouvés dans la base de données. 56. Recherche de films: Ok, Après avoir notre service est prêt, nous pouvons créer maintenant l'écran. Donc, je vais à des écrans, créer un nouvel écran. Je vais l'appeler recherche. Et dans cette recherche, nous allons placer notre formulaire où l'utilisateur peut rechercher des composants ou des films. Donc, je vais utiliser ici des composants sans état retournés comme nous l'avons fait auparavant. Donc, il s'appellera Search. Et avec la recherche, nous allons revenir aussi, comme certains paramètres de navigation. Donc, vous aurez ici la navigation. Et aussi, nous allons retourner un modèle, et ce modèle sera à l'intérieur de la zone de sécurité. Donc, nous devons d'abord importer React. Donc, je vais dire ici, IMR import React pour moi. Je vais créer ici nous agissons fragment. Donc, je vais avoir ici quelque chose comme React dot fragment, et puis il sera à l'intérieur, notre vue de zone de sécurité. Donc, nous pouvons avoir ici enregistrer la vue de la zone. Mais je voudrais mentionner que sauver l'un d'entre vous, il est préférable de l'obtenir de React Native que du contexte de zone de sécurité React Native. Donc, vous pouvez obtenir ce composant de React Native deux n'ont pas comme certains conflits dans les erreurs. Donc, ici, nous avons maintenant comme vue de zone sûre, nous pouvons créer comme une vue, tout comme par exemple. Et à l'intérieur de cette vue, nous pouvons mettre un composant de texte où nous verrons comme certains changements qui se produisent, comme pour être sûr que notre composant fonctionne bien. Alors maintenant, nous allons importer la vue et aussi les composants de texte. Donc, je vais aller ici à importer tous. Donc maintenant, nous devons naviguer vers cet écran. Si vous vous souvenez, lorsque nous cliquons sur ce composant ou ce bouton, nous avons pu naviguer vers quelque chose appelé écran. Donc, ce que je dois faire pour aller à la navigation principale et créer un nouvel écran de pile. Donc, de la même manière que nous l'avons fait avec la maison ou dans le détail, nous pouvons copier l'un d'eux. Et puis nous pouvons ajouter un nouvel écran de pile. Et ce nouvel écran aura un nom, sera surge. Et comme je vous l'ai dit, vous devez être prudent avec les noms. Donc, ici, nous aurons aussi bien que le composant de surtension, donc nous devons l'importer aussi bien. Donc, comme vous le voyez ici, il est automatiquement importé et il aura les mêmes propriétés comme il aura la barre de navigation, et aussi il aura une entrée de navigation et de navigation. Alors maintenant, sauvegardons ça et essayons. OK, on clique sur le bouton Rechercher. Ok, on est allé à l'écran de recherche et il est maintenant vide. Et il y a ici une poussée. 57. Formulaire de recherche: Ok, donc notre écran fonctionne bien maintenant nous n'avons aucun problème. Nous avons juste besoin maintenant de faire un formulaire où l'utilisateur peut entrer du texte pour rechercher un film. Pour cela, j'utilise un composant qui est utilisé et la bibliothèque native React. Et cette bibliothèque native React a un composant appelé entrée de texte. Et cette entrée que vous pouvez avoir comme un style spécial sur elle, sur Jane, le prochain événement, et aussi comme une certaine valeur. Donc, au début et il est également importer ces composants afin que nous puissions copier cette partie ici et aller à notre application et remplacer le texte ici par ce composant. Et aussi, nous aurons ici cette entrée de texte importée à partir de React Native. Je vais utiliser u. nous avons aussi besoin de quelques styles. Donc, nous avons besoin de Stein l'entrée aussi. Nous avons donc besoin d'avoir cette feuille de numérotation, comme nous l'avons vu plusieurs fois auparavant. Donc, nous avons juste besoin d'avoir une certaine constante et nous pouvons définir cette constante comme une feuille de style et l'utiliser dans nos composants. Nous devons donc importer cette feuille de style également à partir de React Native. Mais comme vous le voyez ici, il y a des événements, donc il utilise cette date pour ça. Alors allons utiliser cette date pour ça. Donc, je dirai que j'ai un texte constant et un texte onChange, et ensuite ces enjeux en cours seront retournés dans l'état. Donc, je vais avoir ici aussi bien comme certains aussi constant et puis je dirais utiliser l'état. Et cette date d'utilisation sera importée à partir de React Native. Et nous pouvons également donner une valeur par défaut comme il l'a fait ici. Donc, nous pouvons donner comme utiliser moins de texte comme quelque chose comme ou nous pouvons dire surge film. C' est donc comme une information de base où nous pouvons fournir nos commentaires. Et comme vous le voyez ici, nous avons déjà l'importation afin que nous puissions travailler avec elle. Donc, nous avons juste besoin de pousser la vue un peu comme d'avoir aussi. Comme ici, nous avons la flèche. Il est totalement en haut et il se chevauche avec l'entrée. Donc, nous pouvons le mettre un peu vers le bas pour que nous puissions donner, pour cet abus un peu de style aussi bien. Et je l'appellerais exactement de la même façon que nous faisions avant. Et nous lui donnerons un nom qui s'appelle un conteneur. Et ce conteneur, je vais mettre le style de ça ici. Donc, ce sera exactement la même chose. Donc, nous pouvons le donner comme un haut de bande à partir du haut pour ne pas avoir le conflit que j'ai mentionné. Donc nous avons, désolé, hey, Apple a mis la colonne, donc je vais mettre ici le haut de rembourrage et la mauvaise dopa d'oeuf sera comme environ 100 pixels. On peut dire, essayons ça, d' accord, 100, c'est trop. Mettons-le 60. Donc 60, Ok, on cherche un film. Donc, puis l'utilisateur peut mettre du texte à l'intérieur. Et aussi, nous devons mettre quelques informations comme la direction flexible, la torche, le centre, justifier le contenu. Nous verrons cela plus tard quand nous aurons le bouton soumettre aussi. Mais donnons un peu de style à cette entrée pour s'adapter à notre design. Donc, je donnerais au début comme quelque chose, on peut dire frontière rayon. On peut avoir quelque chose comme 15. Et nous pouvons aussi donner la largeur de la bordure, quelque chose de rapide, donner comme 0,5. Donc on peut avoir ici à 0,5, on ne peut pas donner aussi de la hauteur pour ça. Et nous pouvons mettre une hauteur fixe ou vous pouvez faire une certaine hauteur en utilisant le pourcentage et les dimensions de l'écran. Donc, nous ne pouvons pas donner comme pour l'instant, hauteur fixe parce que cela n'affecte pas de toute façon, quand vous avez différentes tailles mobiles. Donc, nous allons le donner comme par exemple, 50. Et aussi, nous aurons comme un rembourrage pour pousser le contenu à l'intérieur comme pour ne pas être fixé ici ou exactement sur les bords de l'entrée. On peut lui donner quelque chose comme huit pixels pour le rembourrage. Et aussi, nous pouvons donner un peu de coloration pour la bordure et aussi un peu d'arrière-plan que vous voulez ou que vous voulez le style. Donc, comme vous le voyez, nous avons comme cette entrée, nous pouvons changer cela de haut de rembourrage pour être battant seulement. Donc 60, c'est trop, donc nous pouvons le garder comme un dessus de rembourrage. Mais on peut mettre ici le rembourrage en premier. Et le rembourrage sera de 10. Et puis nous mettons le dessus de rembourrage, puis le haut de rembourrage se chevauchera sur ce rembourrage. Donc, nous aurons rembourrage top 60, et d'autres côtés serait 10, 10, et à partir du bas, ce sera exactement comme nous faisons avec HTML et CSS. Vous pouvez ajouter, ajoutera d'autres propriétés que vous pouvez voir dans la documentation. Il y a beaucoup de propriétés pour cette entrée. L' un d'eux comme quelque chose appelé espace réservé, une valeur par défaut, modifiable ou pas important pour remplir automatiquement beaucoup de choses. Donc, nous pouvons aussi bien ajouter quelque chose qui peut être appelé espace réservé. Pour que je puisse mettre ici une propriété appelée détenteur de place. Et dans le porte-emplacement, vous pouvez définir un texte par défaut. Donc je peux dire ici, chercher un film ou une télé, comme ça, un film de surtension ou une émission de télévision. Donc, de cette façon, nous aurons un espace réservé et lorsque vous supprimez l'état par défaut, comme quand nous avons une valeur indéfinie, alors nous aurons cet espace réservé comme celui-ci. Ainsi, vous pouvez être en mesure de taper directement. Ainsi, le détenteur de la place montrera quand il n'y a rien dans l'entrée. Donc, pour soumettre le résultat, nous avons aussi besoin d'un bouton ici, comme pour l'utilisateur qu'il peut soumettre la valeur qu'il a entrée et puis il obtiendra les résultats des films. Donc, dans ce cas, nous pouvons aussi bien tenir tout cela, mettre cette entrée en vous. Donc, je vais donner à nouveau une autre vue et peut-être que nous pouvons lui donner un nom comme une forme. Et ce formulaire contiendra pour moi cette entrée de texte. Je vais le fermer à nouveau comme ça. Et puis ici, cette vue, je vais mettre un autre composant qui sera l'opacité touchable, exactement comme nous l'avons fait avec l'icône de recherche ici dans la barre de navigation. Donc je vais mettre aussi cette opacité touchable, quelque chose comme ça. Et sur la presse non, nous n'aurons pas de navigation, mais nous aurons autre chose pour que nous puissions le garder vide pour l'instant et nous pouvons avoir aussi bien comme icône. Nous devons donc importer plusieurs choses. L' un d'eux est l'opacité touchable, que nous avons de React Native. Et aussi nous devons importer l'icône et l'icône, nous pouvons l'importer exactement la même icône que nous avons utilisée dans la barre de navigation. Je vais donc le mettre ici aussi. Alors sauvegardons tout et on verra ça, ok, l'icône arrive ici. Nous devons donc changer l'icône pour être près de ce composant. Supprimons donc cette couleur sur cette icône pour la voir plus claire. Ok, c'est noir maintenant. Donc, nous devons mettre comme un style pour ce conteneur tenir la vue du formulaire et le bouton l'un près de l'autre. Donc, tout d'abord, j'irai au style du conteneur et je vais lui donner quelques propriétés. Une de ces propriétés sera direction flex si vous vous souvenez de les mettre près l'un de l'autre. Donc je vais dire ici, direction flexible sera rho. De cette façon, ils seront proches les uns des autres, mais maintenant ils sont AGI. Ainsi, nous pouvons également aligner les éléments pour être sur le même niveau ensemble. Donc, ils seront alignés au centre. Donc, nous devons en quelque sorte mettre cette entrée plus ici et le bouton Rechercher de ce côté. Donc, la vue de ce formulaire, je peux lui donner comme quelques propriétés spéciales, par exemple, qui peuvent être en mesure et nous aider à faire un peu d'espacement pour cette entrée. Donc, tout d'abord, je vais aller ici et donner un formulaire, la classe de formulaire que j'ai définie en haut, si vous vous souvenez. Et l'une de ces propriétés sera une base flexible être automatique. Et aussi nous avons besoin d'une autre perpétuité est appelé flex une fille. Et ce flex grow sera un. Et aussi nous avons besoin d'avoir quelque chose comme vous le voyez ici, rembourrage, non ? Donc on peut pousser, le manuel est un peu loin de l'entrée. Donc on peut mettre un peu de rembourrage, où ça peut être comme quelque chose de huit pixels. Donc, de cette façon, ils sont alignés l'un près de l'autre. Et aussi ils ont comme, comme le bouton est là. Donc, comme vous voyez la base flexible, il s'appelle Auto. Il donne comme le flex pour être dynamique de ce formulaire et obtenir le reste de l'espace à partir de cet article est la réservation. Par exemple, cette opacité touchable est réservée uniquement, disons cinq ou 10 pixels. Mais ici, cette entrée prendra le reste. Donc, en disant flex base auto et flex grandir un. Donc, cela signifie que prendre le reste de l'espace et l'aligner de cette façon. Et nous donnons le droit de frapper de ne pas laisser cette entrée coller sur l'opacité touchable. Donc la dernière chose que nous devons gérer comme quelque chose sur soumission. Donc pour ce bouton, donc l'opacité touchable qu'il a sur la presse et nous devons gérer le onsubmit pour cela. Donc, nous aurons une méthode qui peut être appelée et soumettre de la valeur de l'entrée qui est entrée dans l'entrée. Et pour cela onsubmit, comme rapide et faire comme lettre majuscule sur Soumettre. Je peux le définir en haut. Ainsi, nous pouvons avoir des résultats similaires et les données seront toujours résolus et appelant notre service. Donc, de cette façon, je vais définir une autre constante qui peut être appelée onsubmit et qui sera comme une fonction. Et cette fonction reviendra pour moi quelque chose comme appeler le service que nous avons créé auparavant. Donc, pour l'instant, je vais à console.log la valeur que je veux obtenir de la recherche. Donc, je veux que l'utilisateur mette un paramètre de requête. Donc, je veux que l'utilisateur mette une requête et je reçois cette requête et je la passe par le service comme nous l'avons dit précédemment. Donc, nous pouvons appeler cela comme une requête. Donc maintenant, je vais également consigner cette requête par console. Mais ici, nous n'avons rien, nous n'avons pas passé de requête. Ainsi, je vais utiliser ce texte. Donc, ce texte est en train de changer en fonction du texte de modification ou de l'utilisateur ici. Nous pouvons donc prendre ce texte et le transmettre aussi à notre méthode onsubmit. Alors sauvegardons ça. Et nous pouvons ouvrir notre terminal pour voir le journal de la console. Alors faisons un peu plus grand. Et je vais mettre de la valeur, comme on peut le dire ici, film. Et puis je clique sur le bouton Soumettre. Comme tu vois, j'ai eu le film, un film comme celui-ci. D' accord ? Rechercher par exemple, comme un nouveau film, quelque chose comme ça. Et je reçois le résultat sur Soumettre. Donc maintenant, je vais utiliser leurs services pour saisir les données et afficher que garde ici exactement le même composant de carte que nous avons utilisé dans la page d'accueil et d'autres pages. Ainsi, nous verrons comment nous allons appeler le service lors de la prochaine conférence. 58. Résultats de recherche: Ok, maintenant dans cette conférence, nous allons faire un modèle pour afficher les résultats de la recherche. Mais tout d'abord, nous devons appeler le service qui est chargé de nous apporter les résultats de la recherche. Alors suivez que si vous vous souvenez, nous avons créé un service qui s'appelle Search movie ou un téléviseur. Et il demande deux paramètres, qui est une requête et un type. Donc je vais mettre ça aussi appelé ici. Donc quand il y aura onsubmit, je vais appeler ce service. Donc, nous aurons quelque chose comme le film de recherche dV, que je vais importer des services. Donc je vais mettre ici Import et puis je vais mettre le nom du service et puis l'avant-bras. Et puis nous mettrons comme des services. Et on appellerait les services de cette façon. Maintenant, nous avons la télé du film de surtension. Donc, cette télévision de film de surtension me demandera d'avoir deux paramètres. La première sera la requête, et la seconde sera un film ou une télévision. Par exemple, un film comme maintenant. Donc ce que nous avons ici, film ou cela dépend de l'API, comment nous l'utilisions. Donc ça disait, oui, ok, cinéma et télé, donc on va passer le film. Donc maintenant, cela va me revenir une promesse comme nous l'avons vu auparavant. Je vous verrai alors et après, nous aurons les résultats. Donc nous appellerons comme ça comme une poussée, ou nous pouvons l'appeler comme une donnée. Ce sont les données de recherche et ces données que nous allons faire quelque chose avec elles. Et si vous vous souvenez pour cela, nous créions une autre variable d'état. Et cette variable d'état, nous l'utilisions dans le modèle. Donc, je vais dire ici que nous pouvons donner comme résultat de recherche et cette poussée ou des résultats, faisons comme ça et puis définissez les résultats de recherche afin que nous puissions avoir aussi bien ici ledit résultats de surtension. Donc, de cette façon, nous allons stocker toute cette inflammation dans ce résultat de recherche. Donc, nous ne pouvons pas avoir ici définir le résultat de recherche pour être des données. Donc, de cette façon, nous aurons les résultats ou le tableau qui ont été retournés à partir de l'API avec les films réinitialisés ou définis dans les résultats de recherche ici. Donc, ici, je vais utiliser un modèle qui vient des résultats de recherche. Parce que nous en avons parlé plusieurs fois et je vous ai dit que nous avons plusieurs façons d'organiser tous ces modèles. Nous en avons parlé comme quand il est chargé, quand il n'est pas chargé et quand il y a une erreur, je vais coller le modèle que j'ai déjà préparé. N' expliquez pas, et je vous fournirai le code. J' ai donc créé ce modèle. Ce modèle aura une vue. Il sera à l'intérieur de la vue défilante et défilante. Donc, nous avons ici une vue qui s'appelle conteneur. Et ce conteneur tiendra la forme et aussi cette opacité touchable. Et puis nous aurons une autre vue où nous aurons les résultats de l'élément de recherche. Donc, j'ai créé ici est u, si vous vous souvenez de quelque chose appelé résultat de recherche. Donc, je vérifie ici. S' il y a des résultats de recherche et que la longueur du point des résultats de recherche est supérieure à 0, alors je dois afficher une liste plate avec leurs cartes. Si vous vous en souvenez, nous l'avons déjà fait plusieurs fois lorsque nous le faisions. Gardes sur la page d'accueil ici. Donc tu n'as pas à t'inquiéter de ce point. Une seule option que j'ai supplémentaire, C'est appelé colonnes num, ce qui est comme si je montrais combien de colonnes dans cette ligne. Ainsi, par exemple, dans le résultat de la recherche, j'aurai trois colonnes baril. Donc, je ne les aurai pas comme ce défilement. Je n'ai fixé que trois dans le mobile et ils sont comme si je pouvais passer par eux. Donc aussi, vous aurez cette propriété de données et l'élément de rendu. Je veux les rendre comme un gardien. Je ne vais pas les rendre comme quoi que ce soit d'autre. Et le composant de garde que nous avons créé auparavant, si vous vous souvenez de l'utiliser aussi dans la page d'accueil, nous avons quelque chose comme extracteur de clé. Ça va faire comme une accélération pour nos recherches. Donc ça va et c'est lié à quelque chose comme jaillir. Ainsi, vous pouvez utiliser l'extracteur et vous pouvez spécifier quelle est la clé. Donc, ce sera l'ID de l'élément ou l'ID du film qui est retourné à partir des résultats de la recherche. Et aussi quand il y a certains résultats, mais que la longueur est 0, cela signifie que nous n'avons pas de valeurs ou de résultats correspondant à nos critères. Nous pouvons donc essayer différents mots-clés. Et aussi s'il n'y a pas de résultats de recherche du tout, ce qui est l'état initial de notre recherche, alors je dirais taper quelque chose pour commencer la recherche. Donc, après cela, nous avons un composant qui est appelé erreur. Et au cas où il y aurait une erreur, alors je vais montrer le composant d'erreur que nous avons créé auparavant aussi. Donc, ici, nous avons comme une erreur par défaut est de dire, quelque chose s'est mal passé, etc. Donc, c'est un modèle. On a déjà parlé de tout ça. Je fais juste quelques EFS différents, quelques commentaires pour vous de ne pas avoir, comme toute erreur ou toute erreur. Ils sont tous dans la zone sûre de U. OK, allons à la recherche et je vais enregistrer mes résultats. Joli. Nous avons ici taper quelque chose pour commencer à chercher. Donc, je vais taper comme par exemple, Nouveau. Et je vais appuyer sur le bouton Rechercher. Bien, j'ai eu directement, c'est Alts. Donc nous avons quelque chose ici et vous jaugez et vous groovy, et cetera. Donc quand je clique sur un de ces films, comme vous le voyez ici, je vais voir le détail du film. Donc, je peux obtenir aussi que faire l'appât de détail parce que j'utilise la carte que Dieu a l'opacité touchable que nous avons créé. Et lorsque vous cliquez dessus, vous naviguerez jusqu'aux détails. C' est très génial. Et cet enfer, nous voyons que nous utilisons la dynamique de React natif de la création de composants. Ok, gentil. Donc je vais rendre quelqu'un vieux, ce qui n'est pas trouvé. Ok, personne n'est vieux qui correspond à votre région. Essayez de trouver nos différents mots-clés. Donc, quand nous supprimons tout et mettre comme recherche, ok, Cela ne répondra pas parce que nous n' envoyons pas de résultats et nous n'avons pas de résultats. Alors maintenant, nous avons notre, notre modèle prêt avec les films et les gardes. Il y a juste une petite chose qui ici sont les gardes sont très proches les uns des autres. Pour que nous puissions donner à leur marge de garde en bas. Donc on peut aller à cette composante de garde. Et si vous vous souvenez que le composant de garde a quelque chose appelé conteneur, qui sera l'opacité touchable. Et dans le conteneur, nous pouvons lui donner une valeur ou un bouton de marge. Donc on ne peut pas dire ici Margin-bottom, on en donne comme cinq. Donc, de cette façon, il va y avoir loin l'un de l'autre. Nous pouvons lui donner plus, par exemple, huit pour être plus perceptible. Donc maintenant, nous avons à nouveau notre API en cours d'exécution. Tout va bien. Donc, de cette façon, nous avons le modèle de recherche. Rien ne peut vous non plus avoir créé quoi que ce soit, n'est-ce pas ? Juste comme ça ? J' ai juste une nouvelle classe ici qui s'appelle des éléments de surtension. J' ai donné rembourrage environ cinq, où il tiendra le conteneur des éléments de recherche juste pour pousser le contenu un peu loin du contenu ici. Donc on ne peut pas avoir quelque chose de nouveau. Et puis il me cherchera de ne pas coller sur les bordures de la forme. Alors c'est tout. Il s'agit des éléments de recherche. Je vais attacher leur code dans la prochaine conférence afin que vous puissiez l'utiliser et savoir s'il y a comme si cela correspondait à votre code. Et vous pouvez travailler dessus facilement sans aucun problème et sans aucun problème. 59. Forder les films et les résultats de recherche de télévision: Ok, Comme vous vous en souvenez, nous avons créé la télévision de films de recherche et nous avons utilisé uniquement pour les films. Donc si nous voulons utiliser plusieurs, comme nous avons besoin de mu pour le cinéma et la télé. Comment peut-on faire ça ? Si vous vous souvenez, nous utilisions quelque chose qui s'appelle promis tous. Il est donc possible de se marier pour moi de multiples promesses. Donc on ne peut pas le faire ici aussi. Alors je dirai ici, promets point, et ensuite Tout. Et puis je peux faire fusionner ici deux. Et puis je peux avoir ici les services, le mariage ensemble. Donc, le premier, ce sera le film de recherche TV, mais pour le film et l'autre avec peut être comme pour la recherche de film TV, mais pour la télévision. Donc, dans ce cas, j'appelle le service 2 fois pour la télé et le film. Et puis je peux fusionner les résultats en quelque sorte, car ici les résultats viendront pour moi comme tableau de deux éléments, si vous vous souvenez, l'un est des films et l'autre est les visuels. Donc, je ne peux pas dire ici comme d'accord, Je vais obtenir ici des films comme un premier but parce que j'ai cherché un film et aussi je vais obtenir ici dv. Donc, de cette façon, je vais obtenir deux points sont deux députés ici. Donc, de cette façon, nous avons un tableau afin que nous puissions mettre tous ceux entre parenthèses afin de ne pas avoir d'erreur. Et puis nous pouvons obtenir ces données, que nous les avons ici, et les fusionner ensemble. Pour qu'on puisse fusionner films et télé ensemble. Donc, comment nous pouvons le faire facilement pour la fusion est assez simple. On peut juste faire des données. Nous pouvons définir une constante qui est appelée données. Et ces données contiendront comme un tableau en utilisant des opérateurs, comme des opérateurs de propagation. Donc, je vais avoir des films ensemble et aussi des téléviseurs. Donc, de cette façon, je fusionne deux tableaux ensemble pour être dans un tableau. Donc, dans ce cas, quand je sauve, je vais obtenir les résultats de cette promesse point tous. Et puis je les fusionne dans un tableau. Alors, stylisons un peu le code. Joli. Nous sommes maintenant passés au service deux fois, puis nous fusionnons ces données et les envoyons ensuite à leurs résultats de recherche. Donc dans ce cas, je vais chercher quelque chose ici. Je te mettrai. Et puis je vais obtenir des résultats mélangés entre la télé et aussi les films. Et normalement, la télé sera à la fin parce que nous avons dit ici que nous voulons montrer cette télé après les films. 60. Thèmes de l'application: D' après le titre de cette conférence, vous savez peut-être ce que je veux dire ? Je veux dire que nous pouvons ajouter de la coloration pour notre application sans avoir ces couleurs codées en dur, que nous avons créées auparavant dans navbar et d'autres composants, nous les avons soigneusement placés avec quelques variables où je serai en mesure de changer le thème de mon application. Donc, de cette façon, je peux avoir une variable externe et puis-je en lire ? Et puis j'ai configuré mon thème en fonction de quelque chose comme sur ces couleurs. Donc, tout d'abord, nous pouvons aller aux fichiers de l'application et créer un fichier qui est appelé thème. Ainsi, nous pouvons créer un dossier sur le niveau racine. Donc, je vais dire ici comme thème ou thèmes, nous pouvons dire. Et à l'intérieur de ce dossier de thème, je peux ajouter aussi comme quelque chose appelé couleurs. Donc, dans ces couleurs point JS, j'aurai mon application lecture des couleurs de ce fichier. Donc, de cette façon, je peux aussi créer une constante. Et cette constante, je peux lui donner un nom comme des couleurs. Donc nous pouvons dire ici const. Et dans ce cours, nous ne pouvons pas dire que ce sont des couleurs et ces couleurs seront un objet. Et je peux dire à l'intérieur de cet objet que je vais définir les couleurs dont j'ai besoin pour mon application. Donc ces couleurs, je les ai déjà créés. Comme bien sûr, vous pouvez créer vos couleurs comme vous le souhaitez. Donc, je crée quelque chose comme nous pouvons dire, j'ai, par exemple, fond, qui sera comme celui-ci, noir, blanc, gris clair, couleur primaire aussi, qui sera ce bleu que nous avons pour le bouton Play. Ainsi, vous pouvez également ajouter le thème de votre application manière à ce qu'il puisse être différent d'un client à l'autre. Donc, après cela, il est préférable de donner une lettre majuscule pour les exportations. Et puis nous pouvons exporter par défaut, comme nous pouvons dire l'exportation par défaut, et nous disons les couleurs. Ainsi, nous serons en mesure de l'importer quelque part dans notre application. Donc après cela, je vais aller à mon exemple où nous étions, nous étions assez bar dans le bar. J' ai, par exemple, un problème avec la couleur qu'il est codé en dur. Je l'ai remplacé par une couleur blanche. Donc, je vais aller ici et je vais avoir ici Importer, et puis je vais obtenir comme par exemple, les couleurs. Et ces couleurs viennent de Theme Colors comme nous l'avons vu auparavant. Alors maintenant, je vais aller et utiliser ces couleurs exactement pour mettre mes couleurs à l'intérieur de cela. Donc, je vais avoir ici au lieu de la couleur FFF, je dirai les couleurs blanc point par exemple. Donc, de cette façon, mon application où NDR sur le bon chemin que je vais avoir, la navigation sera couleur. Donc, comme vous le voyez ici. Donc maintenant, nous allons mettre toutes ces couleurs, par exemple, pour cette navigation quelque part ici. Et bien sûr, nous ne pouvons pas le vendre pour toutes les couleurs codées en dur et les placer dans notre application. Par exemple, j'irais sur le bouton Play et puis je dirai ici que je ne veux pas ici, aussi la couleur, donc j'ai besoin d'importer les couleurs aussi bien. Donc, je vais avoir ici importer des couleurs, thème à partir de couleurs. Donc, nous pouvons avoir aussi la même façon exactement comme nous l'avons fait avant. Donc, de cette façon, j'ai ici que les couleurs seront colorées en blanc et aussi en couleur du bouton. Si vous vous souvenez, nous avons codé en dur une couleur ici. Donc, nous pouvons aussi le placer avec quelques couleurs, comme une couleur primaire. Donc on peut avoir quelque chose qu'on appelle une primaire. Et de cette façon, mon application aura une couleur primaire de cette couleur. Donc, je peux utiliser la couleur primaire partout dans mon application. Donc maintenant je vais aller comme ici, deux couleurs que je vais changer, par exemple, à cela nous pouvons faire un 000. Et dans ce cas, toutes les couleurs utilisant de cette couleur changeront dans l'application. Ainsi, vous pouvez programmer votre application d'une manière appropriée sans avoir un triple, comme vous devez changer notre couleur partout pour être la même. Donc, je n'utiliserai pas cette couleur codée en dur. Je vais utiliser seulement comme les couleurs ne sont pas primaires. Donc, de cette façon, vous avez seulement besoin de changer ces couleurs au cas où voulez-vous livrer l'application à un autre client ? Mais vous voulez changer quelque part dans la mise en page et les couleurs. Donc, à la fin de cette section, vous ne verrez pas comme le code avec des couleurs codées en dur. Nous l'aurons comme avec le thème, mais ne prenez pas la vente si longtemps dans la conférence. Donc, je vais le faire rapidement et joindre le code pour vous dans l'application ou les ressources de ces conférences. 61. Fixer des coraux de style: Ok, nous sommes maintenant dans une conférence où nous allons réparer le style. Donc le style, comme vous le voyez ici, nous avons quelques bugs. Donc, par exemple, ici, le titre coche trop sur le téléphone. Alors réparons ça et faisons comme un peu de travail facile pour cette conférence. Donc maintenant je vais devoir, ils sont à, au moins nous avons ce texte et ce texte, il a un style pour que nous puissions le donner aussi, un peu de batting autour. Donc on peut avoir un peu d'espace autour d'elle. Donc on ne peut pas avoir quelque chose comme frapper en général ou mal dans ce genre. Et nous donnons quelques espaces. Donc, de cette façon, nous devons le déplacer avant parce qu'alors en ajoutant le bouton serait tout border. Donc je vais mettre ici comme dire alors, et essayons de voir si ça marche bien. Ok, c'est bien. Je suppose. Maintenant, nous avons comme mieux cela et nous pouvons réduire à lui un peu le bouton de frappe afin que nous puissions le mettre 15. Ok, je pense que maintenant c'est sympa. Ok, maintenant vérifions si nous avons d'autres bugs de style. Donc on peut aller ici et voir les yeux ici. On n'a rien. Nous avons dans la navigation ou quand nous allons à la recherche que nous avons ici, la coloration de cette icône n'est pas tellement claire, donc c'est large. Nous pouvons le mettre comme une couleur moyenne, qui peut être gris clair par exemple. Donc tout ce que nous pouvons aller à l'application ou à la barre de navigation. Et dans la barre de navigation, nous utilisons cette icône. Donc nous avons ici bavardage von retour. Donc ici, nous mettons un gris clair comme ça. Donc on peut faire ça comme une couleur plus foncée, par exemple, tu peux mettre trois C, ok, gentil. C' est mieux comme ça. Et aussi si on va à une page détaillée, ok, on peut toujours la voir. D' accord. Oui, c'est bon. D' accord. D' autres correctifs de style, nous n'avons pas d'autres correctifs de parement. Tout va bien. Notre application fonctionne en douceur et facilement sans aucun problème. Et si vous trouvez un bug, ce serait génial de le signaler aux questions Q et a et. Nous pouvons le réparer directement, et je serais très heureux de corriger tous ces bugs.