React Native: Learning by Doing [2024]

1. EINFÜHRUNG: Willkommen bei React Native Kurs. In diesem Kurs lernen wir das Erstellen einer Film-Anwendung von Grund auf mit einer React Native CLI. Und in diesem Kurs werden Sie in der Lage sein, Filme Kataloge und auch einige Schieberegler auf der Oberseite in der Anwendung zu sehen . Und Sie werden auch in der Lage sein, zu einem Film zu navigieren und Daten oder diesen Film zu lesen und einige Informationen darüber anzuzeigen, wie die Kategorien der Bewertung des Films und einige Beschreibung. Und auch, Sie werden ihr Veröffentlichungsdatum sehen. Natürlich werden wir einige eine Play-Schaltfläche haben, wo Sie den Film abspielen können und Sie einige Video mit Ladeanzeigen spielen können. Und Sie werden in der Lage sein, Ihr Telefon zu drehen und Sie werden sehen, wie es fünfte ist und direkt anpassen, um einen Vollbild Ihrer Anwendung direkt wenn wir drehen ihre Form ist alles von Ihrer Hand. Und auch werden wir genau so etwas tun wie die Suche nach Filmen aus einer echten Datenbank, die mit dem Internet verbunden ist. Und Sie können zum Beispiel nach einigen Filmen suchen und Sie können diese Filme anzeigen und Sie können sie besuchen, um ihre Bewertung und einige Informationen über diesen Film zu sehen. Zum Beispiel suche ich nach einem Film und ich werde es bekommen, und dann werde ich alle Informationen darüber bekommen. Und ich kann es auch nicht spielen. Natürlich können Sie viel Erfahrung mit diesem Kurs haben. Du wirst viel lernen. Sie können diese Anwendung in Ihrem Portfolio haben. Sie können es präsentieren, wenn Sie ein Vorstellungsgespräch haben oder sogar wenn Sie einen Kunden haben, der diese Anwendung Ihren Kunden anzeigen kann, damit Sie sie gewinnen und einige Bewerbungen für sie haben. Auch, Ich mag nicht ihre Kurse, die Balling sind, wie die gehen theoretisch und Sie werden sehen, was Komponente ist, was Service, et cetera. Aber ich mache gerne etwas Unpraktisches. Ich mag es, etwas vor mir zu sehen, was mich am Ende glücklich macht und einige Bewerbung macht. Ich kann es auch meinen Freunden vorstellen. Wie wir externe Bibliotheken aufrufen werden, wie wir Komponenten von React Native verwenden können. Das Schöne an diesem Kurs, Es basiert nicht auf Expo , Das ist wie genau für Anfänger. Jetzt sind die Unternehmen und professionellen Unternehmen, sie verwenden eigentlich nur wie React Native CLI. Ich hoffe, Sie werden glücklich sein, nachdem Sie diesen Kurs angemeldet haben, denn am Ende haben Sie eine Bewerbung zwischen Ihren Händen und Sie können nicht immer stolz darauf sein. Und natürlich beantworte ich Ihre Frage sehr gerne. Und wir haben gemeinsam viele Dinge besprochen. Bist du bereit? Lasst uns anfangen. 2. Kursanforderungen: Okay, wer kann diesen Kurs nehmen oder was sind die Voraussetzungen für den Kurs? Zunächst einmal müssen Sie nichts über React native wissen. Ich werde Ihnen alle Möglichkeiten zeigen, eine Anwendung mit React native zu erstellen, natürlich, aber ich werde Ihnen nicht alles über React native beibringen. Ich werde Ihnen auch in diesem Kurs beibringen, was wir für unsere Bewerbung brauchen. Sie müssen kein Wissen über die mobile Entwicklung von Peer Reviewern kennen. Sie müssen nur über einige kleine Styling-Grundlagen wissen, die ich auch im Laufe des Kurses erklären werde. Und jetzt, was Sie wissen sollten, sollten Sie nicht JavaScript, weil Sie wissen, React Native basiert auf JavaScript und Sie können JavaScript verwenden, um native Anwendung zu generieren. Und auch, Sie müssen React kennen. React ist auch ein Framework, das über JavaScript gebaut wird, aber diese React ist darauf gerichtet, in Web-Anwendungen verwendet werden, nicht auf dem Mobiltelefon. Wie React Native macht, auch das, ich werde erklären, was sind die Komponenten, was sind die Requisiten, und was sind die Zustände in diesem Kurs? Auf diese Weise werden Sie lernen, indem Sie dies tun, Ich werde nicht alle React Native erklären. Ich werde nur erklären, was wir für diesen Kurs brauchen. Und wir bauen eine Reihe von Kursen, damit Sie alle von ihnen nehmen können. Sie werden sehen, wie praktisch und einfach zu erlernen React Native ohne einen Kurs der Dokumentation und gehen etwa 20 Stunden. Und du hast nur theoretische Dinge gelernt. Der beste Weg ist, praktisch zu lernen, etwas Praktisches zu tun, immer mehr und mehr zu lernen. 3. Was ist die Reagierung von Reagieren: Okay, Wie ich Ihnen bereits sagte, reagiert React Native ähnlich, aber es ist für die Entwicklung mobiler Anwendungen entwickelt. So, wie wir sagen können, dass die Erstellung von nativen Anwendungen mit JavaScript. So können Sie Ihre Fähigkeiten in JavaScript verwenden, um Anwendungen für Formulare wie iOS und Android zu erstellen . Und sie sind wirklich native Anwendung. Sie sind keine Web-Anwendung, die reagieren, dass sie auf dem Desktop und auch auf dem Mobiltelefon arbeiten. Wir verwenden einige CSS-Fähigkeiten, um es als eine Anwendung reagieren zu lassen, um am Telefon zu arbeiten. Nein, sie sind wirklich, wirklich einheimisch. Wie Sie sehen, können wir zwei Anwendungen erstellen, indem Sie eine Sprache verwenden, das heißt, Oder zum Beispiel, ein Framework mit JavaScript, das auf Android als native Anwendung funktioniert, auf iOS als native Anwendung als auch. So sind die meisten Unternehmen heutzutage vorwärts React Native, denn in diesem Fall sparen Sie Geld für die Einstellung eines Teams auf iOS, um zum Beispiel Xcode oder die Sprache zu kennen , die mit iOS verwandt sind. Und auch, um ein anderes Thema zu mieten, das Java kennt, das auch verwendet wird, um eine Android-Anwendung zu erstellen. Nein, Sie müssen nur ein Team einstellen, das JavaScript und die Grundlagen von reagieren kennt , um zwei Anwendungen gleichzeitig mit React Native zu erstellen. Auf diese Weise wird das Unternehmen eine Menge Geld sparen. Deshalb geht es so gut, vielleicht wirst du mir sagen, okay, das ist gefährlich, wie ich mich vielleicht wirst du mir sagen, okay, das ist gefährlich, auf JavaScript verlassen kann. Was ist, wenn meine Anwendung erstellt wird und viel Sicherheit hat und genau sein muss. Also muss ich es wirklich als native bauen. Okay, ich werde Ihnen ein Beispiel für Top-Unternehmen geben, die React Native verwenden. Zum Beispiel, Facebook, Instagram, und auch dieser Akkord, Himmel, Pinterest, Tesla. Also alle diese Unternehmen verwenden heutzutage React Native für ihre Anwendungen auf beiden Plattformen, Android und iOS. Auf diese Weise müssen Sie nicht viel Wissen über iOS oder Android einstellen. Wenn Sie JavaScript kennen, garantiere ich Ihnen, dass Sie einige Back-End-Anwendungen bereitstellen können. Zum Beispiel, Keuchen kennen NodeJS und auch mobile Anwendung mit React Native und reagieren. 4. Expo CLI oder React Native: Ich bin mir sicher, wenn Sie über React Native gelesen haben, hören Sie von Export. Export ist auch gemeinsame Zeilenschnittstelle, um Projekte von React Native zu erstellen. Und es bietet viele Werkzeuge und Komponenten, die bereit sind, in React Native verwendet werden. Der Hauptunterschied zwischen React Native und Export liegt in der Codestruktur. Zum Beispiel, wie Sie auf der linken Seite sehen, haben wir ein React Native Projekt. Und wir sehen, dass wir zwei Ordner haben, die Android-Projekt und iOS enthält. Dies ist das Projekt, dass echtes Projekt von Android, das darin ist, Java oder Katlyn. Und auch wir haben das iOS, das mit einem Swift geschrieben wird. Wenn Sie also ein React Native Projekt erstellen, erstellen Sie in diesem Fall auch das Android- und iOS-Projekt. Und auf diese Weise haben Sie in Ihrem Projekt Zugriff auf diese Module in Android und iOS. Dies, was React Native CLI gibt, die Realität der Verwendung der nativen Bibliotheken. Aber in Expo werden Sie nur ein sehr reines JavaScript-Projekt generieren, und Sie können hier nur das JavaScript verwenden, da Export auch verwendet wird, um eigene native Bibliotheken und eigene native Komponenten zu erstellen. Viele Menschen bevorzugen heutzutage die Verwendung von React Native. React Native ist stabiler und effizienter. Und wir werden sehen, was die Vorteile von React Native Expo für Anfänger sind, wie ich Ihnen am Ende dieser Vorlesung sagen werde. Wenn wir also zur React Native CLI gehen, können Sie native Module hinzufügen, die Java, Objective-C geschrieben sind , auch mit dem Swift. Und Sie können sie auch direkt zu Ihrem Projekt hinzufügen. Und Sie können sie in JavaScript als JavaScript-Bibliothek verwenden. Und auch die Einrichtung unseres Projekts ist einfach und es kann in einer Minute erledigt werden. Aber natürlich dauert die Einrichtung der Umgebung ein wenig Zeit. Weitere dritte Bibliotheken werden unterstützt. Sie werden viele dritte Bibliotheken mit React Native CLI geschrieben haben, und Sie Leute, Sie sie in Ihrem Projekt. Der größte Vorteil und der nette Vorteil von React Native CLI, dass Sie eine geringere Größe von Produktionsdateien haben. Zum Beispiel, wenn Sie eine Anwendung mit React Native CLI erstellen, werden Sie sehen, dass Sie zum Beispiel zehn Megabyte der APK-Datei haben und auch für das iOS, fein. Aber wenn Sie ein Projekt mit Expo erstellen, wird diese Datei oder jene Produktionsdatei sehr größer sein und sie hat meist 60 oder 70 Megabyte in der Hauptlast der React Native CLI, die nur 10 Megabyte hat. Dies, weil der Export auch die Dateien und die Module hinzufügt und die Komponenten die APK-Datei signieren, so dass sie in der Anwendung verwendet werden kann. Aber hier, wenn wir native Module verwenden die sich bereits in Ihrem System oder auf Ihrem Telefon befinden, dann brauchen Sie nicht auch eine große Datei der Produktion zu haben. Ich habe ein Projekt gebaut, das als E-Sharp E-Commerce-Build mit Export gemacht wird. Und auch gibt es viele Kurse über Expo und es gibt nicht so viele Kurse über React Native CLI. Also ziehe ich es vor, diesen Kurs mit React Native CLI zu machen , um den Vorteil beim Unterschied zwischen ihm und Export zu sehen. Und natürlich, wenn Sie wollen, können Sie sich für unseren Kurs anmelden, der spricht und Ali mit Expo bauen, die baut eine e-Sharp auf Handy. Also hier gibt es einige wie Empfehlung von React Native Projekt. Wie Sie sehen, heißt es, dass, wenn Sie neu in der mobilen Entwicklung sind, der einfachste Weg, um loszulegen ist mit der expo CLI. Wenn Sie jedoch bereits mit der mobilen Entwicklung vertraut sind, sollten Sie React Native CLI verwenden. Okay, vielleicht wirst du mich fragen, du hast am Anfang gesagt, dass ich keine Anforderung an die mobile Entwicklung brauche. Okay, ja, wirklich Sie brauchen nicht, zum Beispiel, für dieses Projekt, das wir bauen werden, Sie brauchen nicht so viel Fähigkeiten in der mobilen Entwicklung. Ich werde Ihnen nur die wichtigsten Dinge beibringen, wie Sie Module, native Bibliotheken importieren und sie in Ihrem Projekt verwenden. Das war's. Wir werden nicht viele Dinge in den nativen Bibliotheken bearbeiten. Wir werden sie nur zu unserem Projekt anrufen. Und natürlich gibt es einen nicht guten Vorteil, wie React Native CLI zu verwenden, die Sie Xcode oder Android Studio installieren müssen, um Ihr Projekt auf Ihrem Telefon auszuführen. Aber auf diese Weise garantieren Sie, dass Sie Ihr Tool wirklich testen ohne wie eine Middleware, die auf nicht native Weise gebaut ist. einigen Tagen habe ich auf React Native Community auf Facebook gefragt, was bevorzugen Sie für die Entwicklung von mobilen Anwendungen mit React Native? In den meisten Antworten und Stimmen Spiel mit React Native CLI. Und wie Sie in einigen Antworten von Experten sehen, sagten sie, Export ist wie mit Trainingsrad für ein Fahrrad, Sie müssen sie schließlich abnehmen. Und auch, eine andere Antwort war, ich sehe Export ist für Anfänger. Und natürlich, wie ich Ihnen sagte, wenn Sie ein Anfänger sind, können Sie sich einfach für den anderen Kurs anmelden, in dem wir E-Sharp bauen. So können Sie mit Expo nicht wirklich praktisch lernen. 5. Nodejs installieren: Okay, um mit dem Aufbau unserer Umgebung zu beginnen, brauchen wir zuerst NodeJS. Nodejs ist ein Tool für die Bereitstellung und Installation von Bibliotheken, die wir für unser Projekt benötigen, um NodeJS zu installieren, Sie müssen nur auf die Website gehen no js.org. Und hier finden Sie zwei Installationsmethoden. Eines sind die neuesten Funktionen, die als aktuell bezeichnet wird, auch für die meisten Benutzer empfohlen. Immer, Ich gehe immer für, empfohlen für die meisten Benutzer, das ist wie stabiler. Und es bietet mir die wichtigsten Tools, die ich für meine Entwicklung benötige und die zu den aktuellsten Bibliotheken passen, die verfügbar sind. Und natürlich ist NodeJS für alle Systeme verfügbar, wie nicht nur für Windows oder Mac, es ist für Linux, für alle anderen wie Betriebssysteme verfügbar . Also wählen Sie einfach Ihre aus und stellen Sie dann sicher, dass Sie hier installiert haben. Danach öffnen wir die Installation und wir gehen einfach wie folgt, nächstes, wie die Installation einer beliebigen Anwendung und es wird auf Ihrem Computer installiert. Das war's also. Ich habe es bereits auf meinem Rechner und ich habe es bereits installiert. Also muss ich es nicht erneut installieren. Also danach öffnen Sie das Terminal, so dass zehn Jahrtausende Sie es wie ein Terminal in Mac-Buch öffnen können, können Sie die Anwendungen öffnen und Sie nach Terminal oder in Windows suchen, können Sie ausführen und dann finden Befehlszeile, , die gemeinsame Zeile genannt wird, dann die Standard-Befehlszeile. Und dann müssen Sie überprüfen, welche Version von Node.JS Sie haben. Also das Wichtigste, was ich möchte, dass Sie sicher sein , dass Sie die richtige Version von Node haben. So sonst werden Sie nicht in der Lage sein, die meisten Kommentare zu laufen, wenn Sie alte Version haben, wie wir die Version kennen, die wir nach der Installation haben, können wir zum Terminal gehen, wie ich Ihnen sagte. Und Sie setzen wie Knoten minus v. Und damit können Sie die Version sehen, die Sie haben, es ist besser, mit React Native CLI zu entwickeln, um die Version zu verwenden, die 12 und höher ist. Stellen Sie also sicher, dass Sie die Version 12 und mehr haben. Und dann können Sie problemlos mit React Native CLI programmieren. 6. Die Entwicklungsumgebung einrichten: Okay, jetzt werden wir unsere Umgebung einrichten. Ich rate Ihnen, immer die Dokumentation zu folgen , die von React Native formal zur Verfügung gestellt wird. Wenn Sie dorthin gehen, werden Sie alle Schritte sehen, die Sie für die Installation Ihrer Umgebung benötigen. Also zuerst gehen Sie zu React Native dot dev, und dann gehen Sie zu den Dokumenten. Hier sehen Sie etwas, das Umgebungen eingerichtet genannt wird. Und dies wird auf dem neuesten Stand sein, immer basierend auf den Versionen, basierend auf den Betriebssystemen von Android und iOS. Basierend darauf, werden Sie immer sehen lassen Sie die neueste Dokumentation. Ich werde Ihnen zeigen, wie wir ihm folgen können. Zunächst einmal, wie ich Ihnen gesagt habe, müssen wir nicht der Expo CLI folgen, wir werden mit React Native CLI arbeiten, die von den meisten mobilen Entwicklern am meisten bevorzugt wird. Aber natürlich, wenn Sie ein Anfänger sind, ziehe ich es Ihnen vor, zu meinem Kurs zu gehen, der über die Arbeit mit Expo verwandt ist. Und ich habe dort die ganze Umgebung gebaut, die Sie für die Zusammenarbeit mit Experten benötigen. Aber jetzt werden wir mit React Native CLI arbeiten. Dann gehen wir zum Betriebssystem. Das Betriebssystem, wie Sie sehen, ist es für Mac OS, Windows und Linux verfügbar. Ich werde hier mit Mac OS arbeiten. Natürlich können Sie auch Windows folgen. Alle von ihnen sind gleich, aber mit kleinen Unterschieden wie das Einrichten der Puffer, die wir für die Ausführung unserer Kommentare wollen. Aber wie ich Ihnen sagte, ist es immer besser, der Dokumentation für die Versionen zu folgen. Außerdem müssen Sie auch auf das Betriebssystem abzielen , für das Sie bereitstellen werden. Natürlich werden wir mit Android und iOS in der gleichen Zeit arbeiten. Und beide haben eine andere Installation. Ich fange jetzt mit Android an. Also zuerst werden wir zum Mac OS gehen, dann gehen wir zum Ziel-Android, und dann installieren wir die Abhängigkeiten, wie wir hier haben, einen Knoten. Und wir müssen andere Sachen installieren, die ich es im Detail erklären werde. Also zuerst werden wir mit dem Android arbeiten, wie Sie hier in der Dokumentation und in der Vorlesung sehen. Danach werden wir mit iOS arbeiten, um zu sehen, wie wir auch iOS ausführen können. Leider, wie unter Windows, wenn Sie unter Windows arbeiten möchten und Sie iOS haben, können Sie die Bereitstellung oder Entwicklung von iOS-Anwendungen nicht unterstützen. Dies, weil diese iOS-Anwendung etwas namens Xcode ausführen muss. Und Xcode ist erforderlich und wird nur auf Mac-System installiert. Dafür verwende ich manchmal eine VM, VMware-virtuelle Maschine. Ich installiere Mac OS auf meinem Windows, und dann kann ich mit iOS arbeiten. Auf diese Weise. Wenn Sie kein MacBook haben, können Sie die virtuelle Maschine installieren. Es gibt viele Möglichkeiten, eine virtuelle Maschine auszuführen. Einfach Google es und Sie werden es sofort finden und Sie werden sehen wie Sie Virtual Machine von Michael S unter Windows installieren können. Deshalb mache ich diesen Kurs derzeit mit macOS. Es ist also allgemeiner. So können wir mit Android und iOS in der gleichen Zeit arbeiten. In der nächsten Vorlesung werde ich Ihnen zeigen, wie wir mit der Installation für Android-Systeme beginnen können. 7. Android einrichten: Okay, in diesem Vortrag werden wir reden, wie wir unsere Android-Umgebung einrichten. Also zuerst gehen wir, wie wir in ihre Dokumentation sagten, und dann gehen wir zu Mac OS und dann zu Android. Und in Android gibt es Tool, das ein Gebräu Homebrew genannt wird, das hilft für die Installation der Anwendung oder einige Tools leicht auf Ihrem Mac-System. Also, wenn Sie Homebrew nicht installiert haben, Es ist besser, es zu installieren. Es wird Ihnen helfen, viele Anwendungen zu installieren , ohne sich darum zu kümmern, die Installation dafür zu finden. Also, zum Beispiel möchte ich Node installieren, wie ich Ihnen zuvor gezeigt habe, ich gehe einfach zu meinem Terminal und ich führe brew install Node, wie ich Ihnen zuvor sagte. Also, wenn Sie hier gehen, sehen Sie, dass brauen installieren Knoten und auch gibt es ein anderes Werkzeug, das Watch-Mann genannt wird. Dies ist ein sehr tolles Werkzeug. Es wurde von Facebook gemacht. Gehen, um Ihre Änderungen auf Ihrem Dateisystem zu beobachten. Und es ist sehr empfehlenswert, da es eine bessere Leistung für Ihre Anwendung und das Ansehen der Updates für die Dateien ist. Also lassen Sie uns versuchen, dies zu installieren, denn bevor wir bereits NADH installiert haben, wie ich Ihnen gezeigt habe, meine normalerweise ohne Gebräu, aber jetzt werde ich dies mit Hebräisch installieren. Also nach der Installation von Homebrew, genau das gleiche. Sie kopieren einfach den Kommentar auf das Terminal und Sie werden Homebrew haben. Danach werden Sie in der Lage sein, ihren Kommentar blau zu verwenden, so dass Sie jedes Programm installieren können, das in diesem Paket verfügbar ist. Also lassen Sie uns versuchen, zum Beispiel Wächter zu installieren. Also werde ich zum Terminal gehen und dann werde ich Gebräu installieren Watchman einfügen. Und dann werden wir auf die Installation warten. Und wir werden sehen, dass es das gesamte Programm für mich installiert, einschließlich der Pfad ist enthalten, alle Informationen, die für die Entwicklung benötigt werden, um dieses Tool zu verwenden. Okay, wie Sie sehen, dass die Installation durchgeführt wurde. Also war ich, als würde ich das Video überspringen, weil es einige Zeit dauert. Also, jetzt ist es installiert. Gehen wir nochmal zur Dokumentation und sehen, was wir hier haben. Also auch, wir brauchen dafür ein Java Development Kit. Dies ist für Android-Systeme erforderlich. Also müssen wir das auch installieren. Das Gleiche. Wir werden diesen Befehl kopieren, der als Brühinstallation bezeichnet wird. Und dann können wir Open JDK sehen, was dafür erforderlich ist. Und sie sagten, wenn Sie GDK bereits auf Ihrem System installiert haben, stellen Sie sicher, dass Sie JDK 8 oder neuer haben. Sie müssen also sicher sein, dass Sie Version 8 haben, aber lassen Sie uns das auch mit Homebrew installieren. Also werde ich diesen Kommentar nochmals einfügen und auf die Installation warten , wie wir zuvor mit einem Watchmen gesehen haben. Manchmal, wenn Sie einige Berechtigungen für den Administrator benötigen, Sie nach einem Passwort gefragt. So müssen Sie nur das Passwort für Ihr Mac-System setzen, dann wird es einfach für Ihren Computer installiert werden. So, wie Sie hier sehen, dass es erfolgreich installiert ist. Also gehen wir wieder zum nächsten Schritt. Also haben wir hier nach dieser Installation von Android Studio, Android Studio, wir werden es nicht als Editor verwenden, aber wir brauchen das SDK daraus. Wir brauchen SDK, SDK-Plattform und auch virtuelles Gerät, weil wir auch unsere Änderungen der Anwendung sehen müssen, wie jede Anwendung, die Sie es auf Android ausführen. Wir müssen unsere Änderungen auf der irgendeinen Form sehen, ein virtuelles Telefon. Es ist also besser, Android SDK zu installieren. Und auch das SDK ist als Module Teil von React Native erforderlich, weil, wie wir sagten, die Anzeige native verwendet die Module, die in Android-Projekten und iOS verfügbar sind, wie wir zuvor erklärt. Also zuerst müssen wir Android Studio installieren und herunterladen. Um Android Studio zu installieren, ist es auch der gleiche Prozess, bei dem Sie Android Studio herunterladen müssen. Es ist auch für alle Betriebssysteme wie zum Beispiel Windows und Linux, und auch Chrome OS für alle Betriebssysteme verfügbar. Also ist es besser, diejenige zu wählen, die für Ihr System geeignet ist, und dann laden Sie es herunter und der Installationsprozess ist sehr einfach, gehen Sie einfach nächstes, als nächstes, und dann Sie, es wird auf Ihrem Computer installiert werden. Und wir werden das Android Studio laufen und wir müssen einige Optionen angeben, wie ich Ihnen zeigen werde. Wie Sie hier sehen, habe ich den Download-Button. Es dauert etwa 900 Megabyte. Und danach installieren Sie es und führen dann die Anwendung aus. Ich habe es bereits auf meinem Betriebssystem installiert. Und wenn Sie Android Studio ausführen, werden Sie dieses Fenster sehen, wie Sie ein neues Projekt erstellen müssen und Sie gesperrt oder Projekt haben, oder möchten Sie auch einige andere Arten von Projekten? Was müssen wir hier tun, um zu Configure zu gehen, und hier werden wir als Anweisungen für die Einrichtung der Entwicklung arbeiten. Verwenden von React Native. Also lasst uns dorthin gehen. Wie Sie hier sehen, sagt es, wie installieren Sie das Android SDK. Also, nachdem wir auf die gehen müssen, sehen Sie dieses Fenster, wir müssen auf Konfigurieren klicken. Und dann, wie sie kamen Manager und wie sie kamen Manager ist immer hier aktualisiert. Sie müssen immer die Versionen folgen, die hier verfügbar sind. Es ist also besser, sie genau so zu installieren, wie sie hier immer beschrieben werden. Wenn Sie also eine andere Version in der Dokumentation sehen, dann dieses Video, müssen Sie auch dieser Dokumentation folgen. Also gehe ich zum Konfigurieren, ich gehe zum SDK-Manager, und dann müssen wir überprüfen, ob wir Android Q haben. also müssen wir dieses installieren, wie Sie hier sehen. Also zuerst müssen wir Android 10 haben. Q, natürlich können Sie auch das standardmäßig installierte überprüfen, denn wenn Sie Android Studio installieren, kommt acht standardmäßig mit diesem. Es ist also besser, dieser Dokumentation zu folgen und Android 10 zu sagen. Q. Ok. Was sonst noch? Es besagt, dass Sie sicherstellen müssen, dass die folgenden Elemente überprüft werden. Also müssen wir dieses Android 10 erweitern und wir überprüfen Android SDK-Plattform. Also, wie können wir das tun? Sie gehen wieder in dieses Fenster und dann sagen Sie sicher Paket Detail. Wenn wir also auf Paketdetails anzeigen klicken, sehen Sie weitere Details dazu. So sagt es uns, stellen Sie sicher, dass Android SDK-Plattform 29 verfügbar oder überprüft ist. Und auch, wie Sie hier sehen, haben wir etwas anderes, das Intel X86 Atom 64 System-Image ist. Also müssen wir das auch überprüfen. Sie sehen, dass es standardmäßig nicht aktiviert ist, daher müssen wir das auch überprüfen. Daher ist es wichtig, Sharp Paketdetails zu überprüfen. Sie werden in der Lage sein, alle Details des Pakets als auch zu sehen. Es gibt noch etwas, das wir brauchen, um sicher zu sein, dass Google API, Intel X86, Atom-System. müssen wir auch überprüfen. Also, wenn wir hier gehen, so haben wir diese, also ist es sehr wichtig, diese Empfehlung zu befolgen. Als nächstes heißt es, dass wählen Sie die SDK-Tools und aktivieren Sie das Kontrollkästchen, Zeigen Sie Paketdetails sowie, und erweitern Sie Android SDK-Build-Tools. Also lasst uns das machen. Also gehen wir hier und dann gehen wir zu SDK-Tools, und dann gehen wir hier und wieder sagen wir überprüfen Pakete wie recede zeigen Detail des Pakets. Dann werden wir wie eine Version sehen, sagen wir, welche Version es sagt, dass wir auswählen müssen, stellen Sie sicher, dass Sie 2902 haben. Also müssen wir hier gehen und wir überprüfen 2900, um sicher sein zu müssen, dass Sie dieses Paket auch installieren. Natürlich haben Sie die Freiheit, all dies zu behalten, alles, was Sie entfernen können, basierend auf dem Platz, der auf Ihrem Computer verfügbar ist. Danach haben wir alles ausgewählt. Wie Sie hier sehen, klicken wir auf Bewerben. Also haben wir alles als Dokumentation ausgewählt. Wir klicken auf Übernehmen und es wird die Dinge installieren, die wir ausgewählt haben. Installiert, unsere Schätzung beträgt zwei Gigabyte. So müssen Sie sicherstellen, dass Sie wirklich den Platz haben , weil sie groß sind und Sie müssen sicher sein , dass alles richtig installiert ist, weil es etwa 88 Gigabyte dauern wird. Also klicken wir auf OK, und es wird alle Dinge herunterladen. Ich werde dieses Video zu schnell, damit du nicht so viel Zeit in Anspruch nehmen kannst. Okay, diese Installation ist jetzt erfolgreich, und wie Sie hier sehen, haben wir Android 10 als Anforderung installiert ist, und auch die SDK-Tools, wie wir zuvor gesehen haben. Wenn wir gehen, um es Pakete zu zeigen, stellen wir sicher, dass alles installiert wurde, wie in der Dokumentation beschrieben. Okay, wir klicken auf OK, wir gehen weg von Android Studio und dann gehen wir zum nächsten Schritt, wo es geschrieben ist konfigurieren Android Home Environment Variable. Und in Mac, Sie tun es anders als Windows. Also müssen wir sicherstellen, dass Android-Kommentare auf meinem Computer gut funktionieren. Das hängt also von der Art Ihres Terminals ab. Ich spreche jetzt über Mac, okay, Also, wenn Sie Windows sehen wollen, können Sie ein wenig überspringen das Video, das ich Ihnen unter Windows zeigen werde. Also zuerst für Mac, müssen Sie gehen, fügen Sie die folgenden Zeilen zu Ihrem Home-Bash-Profil hinzu. Und hier müssen wir diese Datei bearbeiten und diese Zeilen hinzufügen. Zunächst müssen wir sicherstellen, dass wir Android SDK wirklich auf diesem Pfad installiert haben. Also, wie können wir das tun? Zuerst gehen Sie zum Finder in Mac, und klicken Sie dann auf Los, und dann sehen Sie Ihre Bibliothek. Wenn Sie also auf Bibliothek klicken, wird es für Sie die Bibliothek auf Finder öffnen. So können Sie es hier finden. Und Sie werden sehen, dass es Android-Ordner gibt, und in diesem Android-Ordner gibt es SDK. Also hier, was wir haben müssen, so stellen wir sicher. Wir haben wirklich dieses Bad Heimbibliothek, Android SDK. Okay, das ist also alles nett. So haben wir jetzt zwei Arten von Terminals in Mac. Wie Sie hier sehen, benutze ich diejenige, die Zed SH vorangestellt ist. Also dieses ist mein Terminal, das ich für meine Anwendungen verwende. Sie können also die mutigen Schritte machen, die ich jetzt tun werde. Also, um sicherzustellen, dass alle Ihre Terminals gut funktionieren. Also zuerst werde ich home dot bash Profil bearbeiten. Also, wie wir das tun können, werde ich das Terminal wieder öffnen. Und wie Sie sehen, habe ich zuvor versucht, Ich habe einen Kommentar, der Sudo nano genannt wird und dann etwas fein bearbeiten. Also werde ich diesen Kommentar noch einmal setzen. Also, warum habe ich Sudo? Weil ich Sudo habe, weil ich dafür Berechtigungen brauche. Sie können diese Datei nicht ohne Privilegien bearbeiten. Nano ist Editor, der intern auf Mac-Systemen oder Terminals installiert ist. So können Sie Dateien durch sie bearbeiten. Man kann also nicht Sudo nano sagen, wie wir hier sagen. Und es wird die Datei für Sie öffnen und dann müssen Sie exportieren und kopieren und einfügen, was in der Dokumentation geschrieben ist. Also lassen Sie uns das alles kopieren, wie wir hier sehen, und gehen Sie dann wieder zu diesem Terminal und fügen Sie sie hier ein. Okay, Nett. Wir haben sie alle. Danach müssen Sie beenden, Sie müssen beenden. Also hier gibt es einige Verknüpfungen. Sie müssen sagen, dass wir X kontrollieren müssen. Also müssen Sie Control X in Mac drücken. Und es würde Ihnen bieten, dass speichern, ändern, modifizierte Puffer. Du kannst also sagen, ja, ich will sie retten. Also nach diesem Dateinamen zu schreiben, so wird es Sie fragen, überschreiben Sie dies. Also drücken Sie einfach die Eingabetaste und es wird gespeichert, um sicher zu sein, dass Sie alle Bearbeitungen erledigen können. Klicken Sie einfach noch einmal darauf. wirst du sehen. Öffnet den Kommentar erneut. Das siehst du schon alle. Also gehe ich wieder, ich kontrolliere. Ich gehe zurück zur Befehlszeile oder zum Terminal. Ich gehe zum nächsten Kommentar, wo ich Zed als Kanteneditor verwende , damit wir diese Datei dann bearbeiten können. So gehen Sie zum Terminal und genau das gleiche sudo nano und das gleiche, und dann fügen Sie das ein und es wird für Sie wieder geöffnet, einige Editor können Sie auch die Mühen exportieren, die hier benötigt werden. Also wieder, wir müssen alle diese Befehle kopieren und zum Terminal gehen. Und dann haben wir diese gegründet. Wir können hier sagen, Sie können sie darunter einfügen und dann drücken Sie Speichern, oder Sie können Control X sagen, um es genau so zu speichern, wie wir es vorher gemacht haben, okay, überschreiben Sie die Daten und alles ist gut gespeichert. Um sicherzustellen, dass unsere Befehlszeile akzeptiert, dass Sie nur diesen Befehl ausführen müssen, der Echo Android home heißt. Also gehen wir wieder zum Terminal und dann fügen wir diesen Befehl ein und Sie werden sehen, dass wir leer sind. Dies liegt daran, dass Sie das Terminal neu starten müssen, um die Änderungen zu sehen, die auf Ihrem, auf Ihrem Terminal durchgeführt werden. Andernfalls, wenn das immer noch nicht funktioniert, müssen Sie erneut dieses SSID-Profil überprüfen, wie wir zuvor gesehen haben, und stellen Sie sicher, ob Sie Exportpfad am Ende haben. So vergesslich, hast du hier gesehen, ich habe es geschafft, es war wie hier. Dieser Exportpfad war also hier. Also schiebe ich es einfach runter, um am Ende zum letzten zu sein. In diesem Fall können wir also alle Busse exportieren, die hier definiert sind. Stellen Sie also sicher, dass dies wie bei der Fehlerbehebung ist. kannst du tun. So können Sie sicherstellen, dass Ihr Terminal funktioniert. Also werde ich dieses Terminal schließen und es wieder öffnen , um zu sehen, ob ich wirklich in der Lage bin, Android Home Pfad zu sehen. Also schließen wir es, öffnen das Terminal wieder. Ich würde einen Zoom machen. Also werde ich den Befehl echo Android Home Augen einfügen, wie Sie sehen, Ich habe es. Jetzt der Pfad wie ich kopiere oder Echo dies, drucken Sie den Kommentar oder den Pfad, der in meiner Kommentardatei gespeichert ist, die für z als h ist. Also hier, wie Sie sehen, dass alles gut funktioniert, obwohl wir sicher sind, dass unsere Partner sind genau hier eingestellt. So steht hier geschrieben, dass Sie sicherstellen können, dass alles gut funktioniert. Also danach gibt es React Native bekam Befehlszeilenschnittstelle. Wir werden diesen Schritt sehen, nachdem wir auch für iOS fertig sind. Also werde ich diesen Schritt vorerst behalten. Für Windows. Wenn ich zu Windows gehe, den Pfad einstelle, sehr einfach, gehe zu Umgebungsvariablen, die in Windows festgelegt sind. Und es ist alles hier erklärt. So gehen Sie einfach zur Systemsteuerung und dann zu Benutzerkonten. Und dann wieder Benutzerkonten, ändern Sie meine Umgebungsvariable. Und Sie müssen den Pfad hinzufügen, der auf Ihrem Computer für Android SDK installiert ist, normalerweise kommt es von Benutzern, und dann würden Sie Benutzername kommt hier, und dann AppData, Local Android SDK, das ist es. Und Sie müssen dann sicherstellen, dass all dieser Weg unser Set in Ordnung ist. Sie müssen also PowerShell oder Common Line öffnen, kopieren und einfügen gutes untergeordnetes Element und dann überprüfen, dass und Android Home hinzugefügt wird. Es ist genau so, wie wir sicherstellen, dass wir Android Home Variable gesetzt ist. Dies ist eine Möglichkeit, wie wir die Android-Umgebung für Windows und Mac einrichten. Als nächstes werden wir über iOS erklären. Und danach leider, wie ich Ihnen gesagt habe, dass iOS nur auf Mac verfügbar ist, also werde ich es nur auf der Karte erklären. Wir werden keine Erklärung für Windows oder Mac OS und auch das iOS-System haben, das in der nächsten Vorlesung sein wird. Und danach werden wir unsere React Native starten oder zuerst native Anwendung handeln. 8. IOs einrichten: Okay, in diesem Vortrag werden wir über die Installation für Environment Development für iOS-System sprechen . Also haben wir mit macOS, Android gearbeitet , und ich werde auf iOS-System zu bewegen. Installation für iOS-System ist genau die gleichen Schritte, wie wir zuvor mit Watchmen und den anderen Tools gemacht haben. Aber wir müssen auch eine Anwendung installieren, hieß es Xcode? Xcode ist im Mac App Store verfügbar, und wenn Sie es installieren, stellen Sie einfach sicher, dass Sie die Version zehn und eine neue Bestellung haben. Dies ist also die wichtigste Information, die Sie kennen müssen. Nach der Installation ihres Xcodes gibt es etwas, das heißt, als müssten Sie ihre Kommandozeilentools überprüfen. Also nach der Installation habe ich Xcode zuvor auf meinem eigenen, meinem Betriebssystem installiert. Ich gehe zum Xcode und klicke dann auf Einstellungen. Wenn Sie also zu Einstellungen gehen, werden Sie hier wie einige, einige Registerkarten sehen. Einer von ihnen ist Standorte. Stellen Sie einfach sicher, dass gemeinsames Zeilentool ausgewählt ist, dass Xcode basierend auf der Jungfrau, die Sie installiert haben. Also danach müssen wir auch installieren. Simulator. Simulator ist in Komponenten vorhanden. Wenn Sie also zu Komponenten gehen, müssen Sie einen Simulator installieren. Ich installiere jetzt den neuesten Simulator der iOS-Version für Mobiltelefone von iOS. Also installiere ich 14.4. Natürlich, wenn Sie sehen, höhere Version ist besser, es zu installieren. So kann Ihre Anwendung mit der neuesten Version von iOS-Systemen arbeiten. Normalerweise sind diese Größen hier erhältlich. Sie müssen auch Platz auf Ihrem PC haben. Zwei, gehorchen Sie der Größe des Simulators. Danach gehen wir zu ihrem nächsten Schritt. Nach der Installation ist die CocoaPods, Kakaoboote wie Ruby-Installation und es ist für Mac OS verfügbar. Es bietet uns eine Menge wie Bibliotheken für iOS oder Pakete für iOS sagen, Sie haben optional können Sie es installieren. Also werde ich es auch durch diesen Kommentar installieren, ich werde mein Terminal öffnen und dann werde ich diesen Befehl hier einfügen. Und dann wird es mich um ein Passwort bitten. Ich werde auch mein Passwort einfügen. Und es wird für mich etwas installieren, das CocoaPods genannt wird. Wenn Sie mehr darüber wissen wollen, gibt es wie einen Link hier. Sie können es überprüfen. Also gehst du zu CocoaPods. Es gibt viele Pakete und Bibliotheken für Objective-C-Projekte, so dass Sie sie für Ihre Anwendungen haben können. Wir werden später darüber sprechen, wenn wir diese CocoaPods in unserem Kurs verwenden werden. Aber derzeit werden wir native React-Komponenten verwenden, aber es ist besser, dies zu verwenden. Für weitere Informationen können Sie also einen Blick auf diesen Link werfen. Sie können „Erste Schritte mit CocoaPods“ sehen. Sie können es genauso gut installieren wie Anweisungen, die wir hier haben, aber derzeit brauchen wir es nicht. Wir werden es später brauchen. 9. Code-Editor: Der Editor, den ich in diesem Kurs verwenden werde, wird Visual Studio Code sein. Wie ich Ihnen gesagt habe, haben wir Xcode installiert und wir haben auch Android Studio installiert, aber wir werden sie nicht als Editoren verwenden. Wir werden Visual Studio Code verwenden, der sehr schnell und dynamisch ist und sehr gut für die Entwicklung eines React nativen ist. So, wie Sie hier sehen, haben wir einen Code V Punkt Visual Studio.com. Sie gehen hier und dann klicken Sie auf Download mac universal, und Sie werden die Version für Mac haben. Und auch, wenn Sie auf diesen Pfeil klicken, werden Sie eine andere Version für Windows und Linux sehen. Die Installation von Visual Studio-Code endet mit der Installation von Visual Studio-Code auf Ihrem Computer und Sie werden so etwas haben. Also in der nächsten Vorlesung werden wir sehen, wie wir einige Erweiterungen hinzufügen , um es unsere Codierung Fähigkeiten unter Windows zu wickeln, oder es wird normale Installationsdatei sein und auch auf Mac können Sie es installieren und es wird als ZIP-Datei heruntergeladen werden. Und wenn Sie die ZIP-Datei öffnen, wird sie extrahiert und Sie haben Ihre Visual Studio Code Dot App. So können Sie diese Anwendung auf Ihre Anwendungen in Mac OS verschieben. So wird es hier sein. Ich habe es bereits installiert, also muss ich das nicht tun. So, wie Sie hier sehen, haben wir Visual Studio-Code-App, und wenn Sie es öffnen, werden Sie sehen, dass Visual Studio-Editor auf Ihrem Computer installiert. Wie Sie hier sehen, habe ich hier mein Visual Studio Code auf meinem Computer installiert. Für Windows wird es genau das gleiche sein, aber es werden ausführbare Dateien sein, so dass Sie es wie jede Anwendung unter Windows installieren können. 10. Erweiterungen für die schnelle Programmierung installieren: Visual Studio Code kommt mit einer zusätzlichen Erweiterung, die Sie sie für ein bestimmtes Verhalten Ihres Visual Studio-Codes installieren können . Um also die Bibliotheken oder dergleichen zu besuchen, zum Beispiel ihren Markt für diese Erweiterungen, müssen Sie nur auf Erweiterungen in Visual Studio Code klicken. Wie Sie hier von diesem Symbol sehen, werde ich darauf klicken und dann werden Sie viele vorgeschlagene Erweiterungen sehen. Also lassen Sie uns zuerst nach unserer ersten Erweiterung suchen, die es React native Tools sein wird. Und diese Erweiterung ist sehr hilfreich für unsere React Native Anwendung, wie wir später sehen werden. So wird es uns zum Beispiel helfen, wie einige Snippets zu erstellen. Wie Sie sehen, ist es sehr hilfreich und es wickelt unsere Beschichtung ein. Und es hat viele Funktionen wie die automatische Vervollständigung der Dinge. Also, was wir den Vorteil dieser Erweiterung später sehen werden, aber jetzt lasst es uns installieren. Also klicke ich auf Installation und es wird in meinen Erweiterungen installiert. Eine weitere Erweiterung, die wir auch installieren müssen, um unsere Leistung zu beschleunigen, heißt React Native, React Slash Redox Snippets für ES6, ES 7. Das werden wir also in diesem Kurs verwenden. Also, was ist das wie Erweiterung? Dieser ist wie für uns einige Verknüpfungen zu machen , die wir schreiben können und es wird für uns den vollständigen Code generieren. Zum Beispiel, wie Sie hier sehen, habe ich einige Importe, zum Beispiel Iran EMR, und dann wird es laufen, es wird Code für mich importieren React von reagieren. Es ist also wie eine Abkürzungen, die wir schreiben können und es wird für uns basierend auf den Dingen importieren. Zum Beispiel habe ich IM, RPC, es wird für mich eine reine Komponente von reagieren importieren. Es sind also einige Verknüpfungen, die wir verwenden müssen, wie wir später im Kurs sehen werden. Und es wird die Produktivität beschleunigen. Erweiterung, die wir installieren müssen, nennt man hübscher. Prettier ist wie eine sehr schöne Erweiterung, die für die Code-Formatierung verwendet wird. Wenn Sie also eine Datei speichern, formatiert es automatisch Ihren Code basierend auf Konfiguration, die mit React Native Installation kommen wird, wie wir später sehen werden. Also zuerst müssen Sie nur diese Erweiterung installieren und sicherstellen, dass Sie die Option haben, die als sicher oder Format auf Speichern bezeichnet wird. So, wie Sie diese Option finden können, müssen Sie nur zu den Einstellungen von VS Code gehen. Also gehen Sie einfach zum Code und wählen Sie dann Einstellungen und dann Einstellungen aus. Wenn Sie also auf Einstellungen klicken, können Sie etwas namens Format auf Speichern finden. Das ist also der Kommentar. So müssen Sie nur sicher sein, dass das Format auf Speichern, diese Option aktiviert ist, sonst funktioniert das Format auf Safe nicht für Sie. Also, das war's vorerst. Wir werden sehen, wie wir hübscher verwenden würden. Wie ich Ihnen gesagt habe, wird es automatisch diese Konfiguration mit einem React Native Projekt installiert . Das letzte, was oder die letzte Erweiterung, die wir brauchen, ist etwas wie optional. Wenn Sie möchten, können Sie es installieren oder nicht. Es heißt Material und dann Icon Theme. Das ist also, als ob Sie eine Dateistruktur haben , die Symbole der Dateien basierend auf dem Dateityp platziert werden. Also ist es besser, es auch zu installieren, um für die Dateiliste, die Sie hier haben, sehr bequem zu machen. Nach der Installation, wird es Ihnen geben, wählen Sie Datei Icon Theme. Du musst nur diesen benutzen. Also werde ich Material Icon Theme oder seti verwenden. Lasst uns das hier benutzen. Und dann werden Sie wie Ihre Dateiliste B mit einem bestimmten Icons der Dateien im Editor sehen. Also diese Symbole, Sie sehen sie zum Beispiel, so. So wird jede Datei mit CSS beendet, es wird ein Symbol wie dieses haben. Jedes Datei-Finish, zum Beispiel, mit MPM wird wie folgt haben, JavaScript und et cetera. So sind alle Icons verfügbar, was Ihnen leicht macht, einen Blick durch Ihre Dateistruktur zu werfen und die Datei zu holen, die Sie wollen, die Erweiterungen, die wir jetzt brauchen die Erweiterungen, die wir jetzt brauchen, werden wir unsere erste -Projekt oder ein React Native Projekt, und wir werden die Effektivität all dieser Erweiterungen später sehen. 11. Erstellen von React: Okay, Jetzt sind wir bereit, eine neue Anwendung mit React Native zu starten. In der Dokumentation gibt es ein Werkzeug, das MAX genannt wird, die die Möglichkeit bietet, Anwendungen wie eine Kesselplatten zu erstellen. Und dieser MPS ist Teil von MPM. Es kommt immer mit der neuesten Version von Node. Stellen Sie also sicher, dass Sie die neueste Version von Node installiert haben. Wenn wir diesen Befehl ausführen, werden wir ein neues Projekt in React Native erstellen. Um sicherzustellen, dass alles gut funktioniert, Lassen Sie uns diesen Kommentar ausführen. Zuallererst werde ich zu meinem Terminal gehen. Also, wenn Sie sich erinnern, wir haben dieses Terminal oder Befehlszeile, die unter Windows verfügbar sein kann. Stellen Sie also sicher, dass Sie sich auf dem Desktop oder in einem beliebigen Ordner befinden, in dem Sie beispielsweise auf Ihrer Festplatte bevorzugen . Also hier habe ich den Desktop verwendet, also werde ich diesen Ordner verwenden, um mein Projekt zu erstellen. Also werde ich diesen Befehl kopieren, wie Sie sehen, wie MPI x React Native darin. Und dann geben Sie den Namen des Projekts an, mit dem Sie arbeiten möchten. Also lasst uns das versuchen. Also werde ich zuerst zum Terminal gehen und dann werde ich diesen Befehl einfügen, aber ich werde zum Beispiel Namen geben. Wir können sagen, Kursprojekt. So wie für jetzt, um sicherzustellen, dass alles gut für uns funktioniert, ist es besser, immer wie die Großbuchstaben des zu haben, wie der Name des Projekts. So können wir Kursprojekt wie dieses haben. Also, jetzt werde ich die Eingabetaste drücken. Und dann wird es für mich auf dem Desktop einen Ordner erstellen , in dem es Gores Projekt genannt wird. Wenn ich zu meinem Desktop gehe, wie Sie hier sehen, wird es für mich ein neues Projekt erstellen. Aber dieser Prozess wird ein wenig Zeit in Anspruch nehmen, weil es einige Ressourcen herunterladen wird, um das Projekt zu erstellen. So, wie Sie hier sehen, seinen eigenen Fortschritt. Ich werde dieses Video überspringen, weil es ungefähr fünf Minuten dauert. Also werde ich dieses Video überspringen und ich werde dir zeigen, wenn es fertig ist. Wie Sie hier sehen, ist die Installation abgeschlossen. So laden Sie einige Vorlagen, Kopieren Vorlage Verarbeitung der Vorlage und dann einige CocoaPods, die Abhängigkeiten, wie wir zuvor gesehen. Und hier sind einige Anweisungen zum Ausführen des Projekts auf Android und auch Anweisungen, es auf iOS auszuführen. So jetzt, wie Sie hier sehen, installiert ist, wenn ich jetzt auf meinem Desktop gehe, werde ich sehen, das Projekt ist bereits hier. So wie Sie das sehen, habe ich gehört, dass ich hier dieses Kursprojekt habe. Gehen wir also zu Visual Studio Code und öffnen Sie das Projekt dort. So wie Sie sehen, haben wir hier diesen Ordner und wir können auf diesen Ordner Explorer oder Datei-Explorer klicken. Und dann sehen Sie Symbol oder Schaltfläche, die Open Folder genannt wird. Und hier werden wir den Ordner unseres Projekts öffnen, wo wir uns auf dem Desktop befinden. Also werde ich hier gehen, Kursprojekt, und ich werde diesen Ordner öffnen, wie Sie hier sehen. Wenn Sie also einen Blick werfen, werden wir die ganze Datei hier haben, also sind wir bereit für die Programmierung. Lassen Sie uns einen kurzen Blick durch die Dateistruktur des Projekts werfen. Fangen wir von oben nach unten an. Also zuerst werden wir einen Test haben , der wie eine Testdatei zum Testen der Anwendung wie End-to-End-Test oder Komponententest sein wird , der auch hier erstellt wird. Wir werden einen VS-Code sitzen. Also immer, wenn Sie eine Einstellungen, bestimmte Einstellungen für Ihr Projekt haben möchten , können Sie diese Einstellungen von Visual Studio Code hinzufügen , wenn Sie alle Team Visual Studio Code verwendet. Zum Beispiel die Schriftgröße des Codes, wie Sie hier sehen. So können Sie ihre Einstellungen, die in Ihrem Editor standardmäßig durch die Einstellungen überschreiben , die in dieser Datei oder in diesem Ordner angegeben sind. Und das werden wir später sehen. Und jetzt haben wir Android-Projekt. Dies wird ein reines Android-Projekt sein, also wird es in Java geschrieben. Sie werden hier Gradle sehen, wir werden nicht mit diesem Projekt umgehen oder arbeiten , weil wie ich Ihnen sagte, dass React Native mit Android und iOS-Projekt interagiert, um für uns eine native Apps zu generieren. Also werden wir nicht so viel mit diesen beiden Ordnern nur arbeiten , wenn wir einige spezifische Module hinzufügen oder löschen möchten, wie ich Ihnen später zeigen werde, ist Knotenmodul die Knoten JS-Bibliotheken. Also, wo wir die Bibliotheken in JavaScript installieren , die wir für die Ausführung unseres Projekts benötigen. Wenn Sie beispielsweise diesen Ordner öffnen, sehen Sie, dass Sie die native React-Bibliothek haben. Sie haben TypeScript, Sie haben viele Bibliotheken, die für Duran dieses Projekt benötigt werden, buck config ist so etwas wie für Maven ist ein Server, der für Android ausgeführt werden kann. Also werden wir auch damit arbeiten, wenn wir es brauchen. Editor Config ist so etwas wie, wenn Sie sich erinnern, ich sprach über eine hübschere. Sie können hier auch eine Konfiguration für Ihren Editor festlegen. Sie können eine Konfiguration für diesen Editor haben, aber es wird von dem hübscheren Eis RC außer Kraft gesetzt, wie ich später darüber sprechen werde. Es fusselt ist auch etwas Wichtiges für das Projekt. Es fusselt ist ein Werkzeug, das mit einer Erweiterung kommt, wenn Sie wollen, können Sie es installieren, die ES fusselt genannt wird. Und wenn Sie ES lint installieren, würde es Ihnen zeigen, dass Sie die Codefehler leben, die Sie in Ihrem Projekt haben. Zum Beispiel, wenn ich hier zu ArcJS gehe, werde ich einen Fehler haben , der mir zeigt, dass, okay, es gibt. Dies kann nur in TypeScript verwendet werden, kann aber nicht in JavaScript-Datei verwendet werden. Also meine ich den Import. In diesem Fall können Sie diese Regel auch überspringen. Sie können die Regel in Eastland RC-Datei bearbeiten. Also ES lint RC-Datei ist eine Datei, in der die Regeln für Ihren Code enthalten. Also in diesem Fall, okay, es ist ein Projekt wird ausgeführt, aber Sie werden einen Tippfehler haben. Zum Beispiel, wenn ich hier doppelte Anführungszeichen setzen, Es ist, das Projekt wird es nicht mögen. Oder ESA-Agent wird es nicht mögen. Es wird sagen, es ist besser, ein einzelnes Zitat zu haben , wie es in den Regeln des Projekts festgelegt ist. Um mehr oder über ES Flusen zu suchen, können Sie einfach zu ES Fusseln gehen und Sie können die Regeln nicht überprüfen. Es gibt viele Regeln, die Sie für Ihr Projekt festlegen können. So werde ich zum Beispiel einen von ihnen nehmen. Zum Beispiel, keine Konsole, Konsolenprotokoll ist schwer für den Browser, wenn Sie sie vergessen, wenn Ihr Projekt, wird das Projekt mit Konsolenprotokoll ausgeführt und dann wird es für Sie einige Probleme in der Leistung. Es ist daher besser, das Konsolenprotokoll immer aus dem Projekt zu entfernen. Hier gibt es ein Gesetz oder eine Regel für Eastland. Immer wenn es ein Konsolenprotokoll gibt, wird es darunter Fehler angezeigt. Also müssen Sie zeigen, dass, okay, entfernen Sie bitte das Konsolenprotokoll. Wenn Sie also an einer dieser Regeln arbeiten wollen, wie wir hier sehen, dass wir diese genommen haben, gehe ich einfach hierher und überprüfe am Ende etwas namens Regeln. Und dann können Sie die Regel angeben, die keine Konsole von allen genannt wird, Sie können es auf eins oder 0 setzen. Also in React können wir das auch verwenden, diese Regeln. Wenn Sie also zu ihrem Projekt gehen und Eastland RC gehen, müssen Sie nur ein Feld hinzufügen, das Regeln genannt wird. Und diese Regeln werden ein Objekt sein. Und in diesem Objekt setzen Sie Ihre Rolle. Zum Beispiel werde ich sagen, dass keine Konsole, wie Sie hier sehen, zum Beispiel, wenn wir gehen und wir kopieren diese eine, so werden wir sagen, alles, was wir haben keine Konsole. Also hier haben wir dieses, aber wie gesagt, wird dies nur ein einfaches Zitat mögen. Also setzen wir es in ein einfaches Anführungszeichen. Und wir sagen hier, dass, wie schalten Sie es für mich ein oder diese Fehlerkonsole, schalten Sie es ein. Wenn Sie sparen. Wie Sie hier sehen, ist es bereits formatiert, wie ich Ihnen bereits gesagt habe, weil wir auf sagen Format setzen. Ein hübscherer hat es schon für mich formatiert. Also, wenn ich zum Beispiel zur App gehe, möchte ich hier eine Konsole, Konsolenprotokoll hinzufügen. So können wir wie ein Konsolenprotokoll hier hinzufügen, wie Sie sehen. So wird es mir den Fehler unerwartete Konsolenanweisung geben. Also ist es besser, es einzuschalten. Denken Sie immer daran, dass ich Konsolenprotokollfehler in meiner Anwendung habe. Also, wenn Sie es deaktivieren möchten, gehen Sie einfach wieder auf die Straße und setzen Sie einfach hier von, wie es in der Beschreibung des Projekts geschrieben ist. Und wie Sie jetzt sehen, wird der Fehler nicht angezeigt oder die Warnung wird nicht mehr angezeigt. Das war's also. So können Sie die Regel angeben, die Sie wollen. Sie müssen nach Regeln suchen. Und dann kannst du mit diesen Regeln tun, was du willst. Und Sie können Ihr Projekt stabil und einheitlich code-weise aus dem ganzen Team machen, das heißt, die die Codebasis teilen. Also lassen Sie uns diese Regel geben, zum Beispiel, und entfernen Sie das Konsolenprotokoll. Und lassen Sie uns mit dem feinen Strukturfluss Config fortfahren. Du brauchst es vorerst nicht. Es geht nur darum, wie sich der Fluss beim Exportieren und Erstellen des Projekts verhalten wird. Gute Attribute auch Sie brauchen es für jetzt nicht ignoriert werden. Sehr wichtige Datei, wohin Sie gehen. Wenn Sie zum Beispiel das Projekt mit einem Git-Repository verknüpfen, müssen Sie einige Dateien nicht schieben. Zum Beispiel sind Knotenmodule sehr riesig. So ist dieser Ordner etwa 300 Megabyte, wenn Sie ein neues React Native Projekt starten. Sie müssen also diesen Code oder diesen Ordner nicht in das Git-Repository schieben. Sie müssen nur die Bibliotheken schieben, die Sie in Ihrem Projekt reduzieren. Also schließe ich Knotenmodule von dem guten aus, um mit meinen Commits und Pushes zur Codebasis auf GitHub geschoben zu werden. Hübscher, wie ich Ihnen gesagt habe, gibt es hübschere Konfiguration, die dieses hübschere bereits konfiguriert. Und wie Sie hier sehen, dass wir Brot hier hier definiert ist, ICC nach unten und es wird Ihnen immer Fehler zeigen und die Regeln, die auf dieser Datei nach oben JSON folgen , ist die Datei, die Einstiegspunkt für unser Projekt ist. Wie zum Beispiel können wir sagen, die Homepage der Anwendung. Wie wir später sehen werden, wenn wir die Anwendung ausführen, werden wir sehen, wie all dies in unserem Telefon gerendert wird, und wir werden sehen, wie wir es bearbeiten und angepasst, um unsere Anwendung zu machen. Und wir werden später über diese Datei sprechen. Abc JSON ist genau wie einige Eigenschaften für die Anwendung, wie der Name und der Anzeigename. So können Sie eine Eigenschaften hinzufügen, die Sie wollen. Babel config ist etwas für ESR, ES6 Jahre fünf ist ein Builder, der ihre JavaScript ES6 Jahre fünf zu Vanilla JavaScript umwandelt . Und Sie können, der Browser oder jeder Browser kann es verstehen. Index js. Es ist auch der Haupteinstiegspunkt Ihrer Anwendung. Also hier ist die Anwendung ISA wie Index zwei Jahre angegeben, als ich das Projekt gestartet habe, wird es von hier aus starten, index.js. Und ich gebe den Namen der Datei an, die App-Name genannt wird. Und hier wird es für mich den App-Namen aus der App starten , den ich von hier importiert habe. Also wird die app.js tatsächlich innerhalb des Index GS aufgerufen , der der Wurzelhauptpunkt Ihres Projekts ist . Und jetzt haben wir metro config, die das Projekt von JavaScript Bayes auf eine native Codebasis übertragen , wie wir später gesehen haben. Und es wird auch als Compiler verwendet. Und es zeigt Ihnen die Fehler, wenn Sie einige Fehler im Code machen. Wenn wir tun, wie Entwicklungspaket JSON wird für Bibliotheken verwendet, die wir brauchen. So können wir Bibliotheken installieren und Bibliotheken entfernen, wie nur JavaScript-Bibliotheken. So können wir sie basierend auf Paket JSON hinzufügen oder entfernen. Und wie wir später sehen werden, wie wir mehrere Bibliotheken nennen, die wir brauchen, um unser Projekt zu bauen. Dies ist also ein kurzer Überblick über die Dateistruktur des React Native Projekts. Wir werden später mehr und mehr Details über all diese Dateien sehen. Erstens, wir werden unser Projekt aufbauen. 12. Laufen auf iOS Simulator: Okay, in dieser Vorlesung werden wir sehen, wie wir das Projekt auf iOS-Simulator ausführen können. Wie Sie hier sehen, haben wir die Anweisungen über iOS, die wir brauchen, um zu unserem Projekt zu navigieren. Und dann müssen wir den Befehl npm ausführen, React Native, iOS ausführen. Lassen Sie uns das versuchen. Aber ich würde es von unserem VS Code oder Visual Studio Code versuchen. Wir werden dieses Terminal nicht mehr verwenden, weil Sie wissen, dass VS-Code bereits die gemeinsame Zeile enthält , die zum Verwenden oder Einfügen von Befehlen verwendet wird , die wir für unser Projekt benötigen. Okay, also lassen Sie uns diese Empfehlung nehmen und diesen Kommentar zuerst kopieren, und dann gehen wir zu Visual Studio-Code. Wenn wir also diese gemeinsame Zeile schließen, gehen wir zu Visual Studio-Code. Um das Terminal in Visual Studio-Code zu öffnen, müssen Sie einfach Control J unter Windows oder Befehl J auf Mac drücken. Also lasst uns das versuchen. Und Sie werden sehen, dass Sie das Terminal und die Bash-Datei erhalten , oder Sie können genauso gut den Zed als NMAC haben. Also jetzt werden wir den Kommentar einfügen, den wir zuvor hatten. Aber denken Sie daran, dass Sie bereits den Xcode und auch den Simulator installiert haben. So werden wir automatisch sehen, dass wir Simulator haben, der auf dem iPhone sein wird. Also lasst uns das versuchen. Es wird einige Zeit dauern, um das Projekt auszuführen und die Pakete einzuschließen. Und wie Sie hier sehen, startet das iPhone 12 ist der Simulator, den ich zuvor installiert habe, und jetzt wird es geladen. So, wie Sie hier sehen, der Simulator, der gestartet und jetzt bauen wir die Anwendung. Also, was haben wir hier, dass der Simulator oder der Compiler versucht, das Projekt mit dem iOS-Projekt zu bauen, das wir zuvor mit unserem React Native Kommentar erstellt haben. Und wie Sie sehen, kann dieser Prozess einige Zeit in Anspruch nehmen, also müssen Sie geduldig sein. Es hängt von Ihrem Speicher Ihres PCs und auch vom Prozessor ab. Vielleicht werden Sie feststellen, dass der Lüfter des PCs höher wird und der Prozessor überlastet wird, aber kein Problem. Es wird kommen, wenn alles gestartet wird. Also, nachdem die Rechnung erfolgreich war, wie Sie hier sehen, haben wir für uns ein neues Terminal eröffnet. Und dieses Terminal zeigt uns, dass das gebündelte Projekt index.js ausgeführt wurde. Und wie ich Ihnen bereits gesagt habe, enthält dieser Index GS den Einstiegspunkt für unsere Anwendung. Und wie Sie hier sehen, haben wir den ganzen Compiler, der Metro heißt. Und auch hier haben wir den Simulator und die Anwendung, die standardmäßig von React Native Boilerplate kommt. Wenn Sie also zum Beispiel eine Änderung im Code vornehmen, werde ich diesen Schritt 1, diesen Satz in etwas anderes ändern . Also gehen wir dorthin zum Code und finden Sie in app.js, wie ich Ihnen sagte, es wäre der Einstiegspunkt für unser Projekt. Also hier unsere app.js. Wie Sie hier sehen, ist die Determinante, die wir zuvor geöffnet haben, erledigt und hat ihren eigenen Job gemacht, also brauchen Sie sie hier nicht mehr. Wenn ich also nach Schritt 1 suche, spielt es keine Rolle, dass dieser Code, wie Sie ihn hier sehen. Ich werde es Schritt für Schritt erklären, aber lassen Sie uns diesen Schritt einen Satz hier ändern. Also werde ich es ändern, zum Beispiel, um React Native Ziele. Und wenn ich speichere, werden wir sehen, dass die Änderungen sofort auf das Telefon reflektiert werden. Und diese App wird eine wirklich native App sein. Es wird per U-Bahn zum iOS-Projekt verletzt, um JavaScript in iOS auszuführen und in eine native Anwendung konvertiert, wie Sie hier sehen. Jedes Mal, wenn ich etwas ändere, würde es sich hier widerspiegeln. Es wird also sehr hilfreich für uns zum Codieren sein. Sie müssen nicht die gesamte Anwendung erneut laden, da dies als Hot Reloading bezeichnet wird. Es spiegelt also direkt die Veränderungen wider, die wir tun werden. Wenn wir also die Anwendung erstellen, müssen wir nicht bei jeder Änderung neu laden, die wir tun. Also speichern Sie es einfach und es würde direkt hier ausgeführt werden. Dies ist also die Art und Weise, wie wir die Anwendung ausführen. Also, wenn Sie dort waren, wie zum Beispiel, ein Fehler. Wie Sie sehen, werde ich einen Fehler machen. Es wird Ihnen den Fehler direkt hier zeigen. Also auf dem Telefon selbst, und auch auf Metro, dem Terminal, das sich automatisch geöffnet hat, wird es Ihnen die genaue Linie zeigen, wo der Fehler passiert ist. So müssen Sie sich keine Sorgen über die Fehler machen. Sie können sie also nicht direkt sehen, wenn Sie auf Speichern klicken und Sie bereits einen Fehler haben. Also habe ich es zurückgelegt und das Projekt läuft wieder. Also, nachdem Sie sicherstellen, dass Ihr installierter Xcode und genauso gut Sie als Simulator heruntergeladen haben, wie ich Ihnen zuvor gezeigt habe. Jetzt sind wir in der Lage, das Projekt sehr einfach und reibungslos zu laufen. Auf diese Weise können Sie die Anwendung auf iOS-Telefon ausführen. 13. Laufen auf Android-Emulator: Okay, jetzt in diesem Vortrag werden wir unser Projekt auf Android-Gerät laufen. Dieses Gerät wird Emulator wie ein virtuelles Gerät sein. Wie wir genau gemacht haben, war iOS-Gerät. Also, jetzt werde ich zur Dokumentation von Android gehen oder auf Android laufen. Also die gleiche Dokumentation, die wir folgten, möchte ich sagen, Ziel Android. Also jetzt, wenn wir nach unten gehen, werden wir diesen Kommentar sehen, wo wir das Projekt laufen werden. So haben wir zuvor ein Projekt erstellt, wie Sie gesehen haben. Jetzt werden wir das Projekt auf einem Gerät ausführen. Aber hier gibt es einige Anweisungen, die wir zuerst tun müssen. Zunächst müssen wir ein physisches Gerät oder ein virtuelles Gerät erstellen. In dieser Vorlesung werde ich Ihnen zeigen, wie Sie ein virtuelles Gerät erstellen. Wir müssen also den Anweisungen folgen, die hier geschrieben sind. Und vielleicht werden sie auch in Zukunft nach der Aufnahme dieses Kurses aktualisiert. Aber jetzt können Sie dieser Anleitung folgen, die hier existieren. Es wird immer das gleiche für die Zukunft sein. Lassen Sie uns zunächst einen neuen AVD erstellen. Es heißt virtuelles Gerät, Android Virtual Device. Also zuerst gehen wir Android Studio, wie Sie hier sehen, und wir klicken auf Konfigurieren und dann AVD Manager, wir klicken darauf und wir werden ein anderes Fenster haben. Und in diesem Fenster können Sie, wie Sie sehen, Ihre Geräte hinzufügen, wie Sie möchten. Es gibt also ein Standardgerät, das bereits in Android Studio verwendet wird , aber wir werden ein Standardgerät verwenden das von der React Native Dokumentation empfohlen wird. Also werde ich auf Virtuelles Gerät erstellen klicken. Und natürlich wird es eine Form sein. Natürlich, wenn Sie für Tablet oder zum Beispiel Automobil oder TV entwickeln , wäre es anders, aber das Betriebssystem wird immer noch das gleiche sein. Jetzt werden wir eines dieser Geräte auswählen. Daher empfehle ich zum Beispiel, das Pixel 3 oder Pixel 2 zu verwenden. Kein Problem. So können Sie eine richtige Dimensionierung Ihrer Anwendung haben. Also, jetzt klicken wir auf Weiter. Und dann, wie Sie in der Dokumentation sehen, sagten sie, dass es besser ist, Q-System zu verwenden, wo wir 29 Bild haben. Wenn wir also ins Android Studio gehen, müssen wir nach X86-Bildern suchen. Wir müssen Bilder suchen. Und dann werden wir diejenige auswählen, die Q genannt wird. Diese haben wir zuvor heruntergeladen, wie Sie sich erinnern, als wir Android Studio installiert haben. Und danach klicken Sie auf Weiter und geben Sie einen Namen für dieses Gerät an. Und Sie können wählen, ob es sich um Querformat oder Hochformat handelt. Aber es spielt keine Rolle. Sie können es während der Laufzeit des Geräts ändern, und klicken Sie dann auf Fertig stellen. Danach haben Sie das Gerät ist hier. Jetzt müssen wir das Gerät ausführen, das wir installiert haben. Also danach können wir hier gehen und wir klicken auf Play Button. Also, wenn Sie diese Play-Schaltfläche sehen, dann wird es, es wird die AVD laufen. Es wird ein Telefon für Sie virtuelles Formular öffnen, genau wie wir in iOS gemacht haben und den Unterschied hier, dass wir das Telefon manuell hier ausführen müssen. Und dann müssen wir warten, bis das Telefon losgeht oder es startet. Dann müssen wir etwas tun, um unsere Anwendung auf dem Gerät auszuführen. So wie Sie hier sehen, haben wir jetzt das Gerät läuft, alles ist in Ordnung. Wir haben wie ein echtes Telefon. Wie Sie hier sehen, hat es Kamera, es hat Anwendungen, und es ist genau wie ein echtes Telefon. Also jetzt müssen wir die Anwendung ausführen, die wir zuvor mit React Native auf dieser Bindung erstellt haben . Was wir zuerst tun müssen, empfehlen sie, das Gerät von AVD oder gemeinsame Linie von Android zu finden . Also, wie können wir das tun? Dafür müssen wir sicherstellen, dass das Gerät wirklich an Android angeschlossen ist. Ich meine, dass React Native das Gerät sehen kann, dass wir die Anwendung darauf ausführen können. So, wie wir das tun können, können wir ein neues Terminal-Fenster in Visual Studio-Code öffnen und den Befehl ADB-Geräte ausführen. So ist ADB wie die gemeinsame Linie, die wir am Anfang erstellt haben, wenn wir Android Studio installieren. Also hier, wenn wir den Befehl ADB ausführen, wird es einige Optionen haben. Einer von ihnen ist Geräte. Wenn wir also auf Enter klicken, werden wir sehen, dass wir Emulator 55, 54 Gerät haben. Wenn Sie hier nichts sehen, müssen Sie sicherstellen, dass Sie den Emulator ausführen. Andernfalls können Sie Ihre Anwendung nicht mit React Nate ausführen. Danach müssen wir die Anwendung mit ausführen und auch, wie wir es vorher gemacht haben, als wir ausgeführt wurden oder wir die Anwendung installiert haben. Also, wenn Sie sich erinnern, hatten wir diesen Befehl, der MAX React Native laufen Android heißt. Sie können diesen Schritt überspringen, da dieser Kommentar wird diesen Befehl automatisch danach ausführen, was wie U-Bahn läuft, wie wir zuvor gesprochen haben. Also lassen Sie uns jetzt den Befehl ausführen, den wir Android ausgeführt haben, wenn Sie iOS ausführen möchten, die es einfach durch iOS ersetzen. Also lassen Sie uns jetzt die Anwendung ausführen. Wieder. Es wird es bauen und es wird einige Zeit dauern bis die Anwendung auf diesem Gerät ausgeführt wird. Du musst gar nichts tun. Du musst nur warten. Und wenn es fertig ist, öffnet es ein neues Terminal für die U-Bahn und USE die Anwendung wird hier erstellt. Also werde ich zwei Simulatoren setzen. Eines ist das iPhone, das wir zuvor gemacht haben, und hier das mit Android. Und ich werde dieses Video überspringen, um schnell zum Laden und Ausführen der Anwendung zu machen. Wie Sie hier sehen, ist das Gebäude fertig und es baut die Anwendung langsam auf dem Telefon. Und es wird die Anwendung ausführen, es auf dem Telefon installieren, und wir werden genau sehen, wie wir es mit iOS gemacht haben. Wie Sie hier sehen, läuft Metro immer noch und überbrückt zu den Board-Geräten. Jetzt konvertiert es den JavaScript-Code in Android-Code und iOS. Und es zeigt uns diese Implementierung hier. Also lasst uns etwas in ihrem Gott ändern, ich werde das hier nur kleiner machen. Und dann können wir das schließen. Und ich werde zum Beispiel einen React Native Kurs setzen . Und ich werde auf Speichern klicken. Wir werden sehen, dass die Änderungen auf beiden Formularen angewendet werden. Also ohne Probleme und ohne Probleme. Und wie Sie hier sehen, haben wir sofort alle Updates, die wie heißes Nachladen kommen. So zu sehen, dass unsere Anwendung läuft und wir können unsere Änderungen sofort vornehmen. Dies ist eine Möglichkeit, das Android-Gerät auszuführen. Wenn Sie irgendwelche Probleme haben, können Sie gehen immer tun Fehlerbehebung, die hier auf der Seite zur Fehlerbehebung. Hier haben sie einige häufige Probleme gesammelt und sie beheben sie durch diese Fehlerbehebung, die Sie immer brauchen, wenn Sie einige Probleme haben. Das war's also. Sie brauchen nur, wenn Sie Probleme haben, gehen Sie einfach zur Fehlerbehebung oder fragen Sie mich in der Q und a, oder Sie können auch in ihrem GitHub-Repository nach Problemen fragen. Und Sie können ein neues Problem öffnen und sie werden Ihnen antworten, wie Sie es beheben können. Aber ich hoffe, wenn Sie meine Schritte befolgen, die ich Ihnen erklärt habe, werden Sie beim Ausführen Ihrer Anwendung keine Probleme haben. 14. Auf deinem mobilen Gerät mit Vysor verwenden: Einige Funktionen, die wir auf unserem Android-Gerät oder Emulator verwenden, sind nicht verfügbar, wie wir ein Ray-Gerät haben. So leiden auch einige Leute, dass Android Studio sehr schwer für ihren Computer ist und sie haben eine begrenzte Menge an RAM. So wissen Sie, dass Android Studio viel RAM und viele Ressourcen benötigt , die Sie auch auf Ihrem eigenen Handy entwickeln können. So kann es entweder iPhone oder Android sein. Ich werde Ihnen zeigen, wie ich mein Android-Gerät verbinden werde und ich werde mich darauf entwickeln. Aber ersten Schritt müssen wir das tun, um sicherzustellen, dass der Emulator ausgeschaltet ist. Also müssen wir den Emulator ausschalten , der auf Android Studio läuft. Sie können also nicht auf diese Schaltfläche klicken, die Macht genannt wird. Und dann würde es für Sie das Gerät komplett ausschalten. Nach der Mahnung des Geräts müssen Sie es also auch von hier aus schließen. Sie müssen also das Gerät vollständig von Ihrem Computer und auch von Ihrem Emulator schließen. Sie müssen sicher sein, dass auf Android Studio alles auf Ihren virtuellen Geräten ausgeführt wird. Danach werden wir ein Programm oder eine Anwendung, die Visor genannt wird, verschieben und installieren . Und dieses Visier, können Sie auf die Website Visier dot io gehen, und Sie können es für alle Ihre Betriebssysteme herunterladen, Windows, Mac, Linux, und auch Sie können es auf dem Browser mit einer Erweiterung installieren. Okay, wie können wir dieses Visier benutzen? Ich habe diese Anwendung bereits heruntergeladen, und wie Sie hier sehen, führe ich sie auf meinem Gerät aus. Also haben wir hier zwei Optionen, Android-Geräte und iOS-Geräte. Ich werde zeigen, wie wir auf Android-Gerät entwickeln können. Also werde ich dir selbst zeigen und dann zeige ich dir wie ich mein Gerät verbinde und diesen Debugging-Modus, den USB-Debugging-Modus, wie es hier erwähnt wird, aktiviere . Hallo und willkommen. Ich bin Familie und ich werde Ihnen zeigen, wie Sie Ihr Android-Gerät verbinden. Um dies zu berechnen, müssen Sie zunächst das ursprüngliche Kabel, USB-Kabel, verwenden , das ursprünglich mit dem Telefon geliefert wird. Ansonsten werden Sie einige Probleme mit der Verbindung zu Ihrem PC haben. Zuerst werde ich es anschließen, verwenden Sie es, diesen USB. Und dann werden Sie auf dem Telefon mehrere Optionen haben wenn Sie nach unten rutschen oder wenn Sie ein Dropdown haben, dass Dropdown, es heißt, wie Laden über USB, wie Sie hier sehen. Aber jetzt, was ich gehe, werde ich auf diese Ladung über USB klicken. Sie haben mehrere Optionen. Das unterscheidet sich also von mobil zu mobil. Also einige Geräte, die sie haben nur Fotos übertragen, Dateien übertragen, nur laden, und umgekehrte Ladung, und importieren Midi. So funktionieren einige Geräte direkt mit ihrem Computer, wenn Sie sagen, Dateien übertragen. Aber einige von ihnen, müssen Sie etwas namens Import Midi haben. Wie mein Gerät hier sagt, ich habe Huawei Telefon und es ist, Ich habe diese Option hier. Also werde ich diese Option am Ende auswählen. So, wie Sie hier sehen, und dann wird das Verhalten des Geräts geändert. Also bis jetzt, wie Sie dieses Visier sehen, haben sie nichts erkannt, weil wir den Debugging-Modus oder Entwicklermodus aktivieren müssen , wie können wir das tun? Zuallererst müssen Sie zu den Einstellungen auf Ihrem Telefon gehen. Also gehe ich zu Einstellungen und Einstellungen. Am Ende werden Sie etwas über das Telefon sehen. Du klickst darauf. Und dann haben Sie etwas namens Build-Nummer. Und wie Sie hier in der Build-Nummer sehen, werde ich mehrmals darauf klicken. Wie werde ich meinen Finger setzen und es wie in einer Weise tun, dass ich Optionen haben werde. So wie es mir sagen wird, dass du dich jetzt als Entwickler benimmst. Okay, jetzt ist alles in Ordnung. Mein Gerät gut als Entwickler, aber wir müssen das USB-Android-Debugging aktivieren. So wie Sie hier sehen, können wir auch in der Einstellung suchen. Wenn ich also zu meiner Einstellung auf meinem Gerät gehe, wie Sie hier sehen, haben wir einen Anstieg an der Spitze. So können wir in der Einstellung suchen. Und in dieser Suche können Sie Android- oder USB-Debugging eingeben. Und es wird direkt bei der zweiten Option Ihrer Optionen in den Einstellungen gefunden . Wir klicken darauf. Und dann wird es Sie zu etwas namens Entwickleroptionen bringen. Und in diesen Entwickleroptionen müssen Sie den Debugging-Modus aktivieren. Sie scrollen einfach nach unten und Sie werden USB-Debugging sehen, wie Sie hier sehen. Beim USB-Debugging müssen Sie das nur zulassen. Also werde ich das zulassen. Und klicke auf, okay. Und Sie werden wie einige haben, eine Benachrichtigung sagen, dass Berater versucht, sich mit Ihrem Gerät zu verbinden, dann müssen Sie es zulassen. Also müssen Sie in diesem Fall drücken. Ok. Also bin ich plus OK. Und jetzt ist alles weg und ist in Ordnung. Und wie Sie auf dem Visier sehen, dass mein Gerät erkannt wurde. Wenn wir also auf dem Laptop oder Computer zu meinem Gerät gehen, wenn ich auf Play klicke, werde ich sehen, dass mein Gerät hier auf dem Emulator läuft. Also werde ich etwas genau wie den Emulator haben , den wir zuvor mit Android Studio hatten. Und es wird hier einen Metallring meines Gerätes zeigen. So jetzt, wie Sie sehen, habe ich alle Informationen oder zeigt mein Telefon total live mit dieser Anwendung. Damit können Sie die Anwendung dann auf Ihrem Gerät und auf Ihrem Mobilgerät bereitstellen. Und dann wird es auf Ihrem mobilen Gerät am NIH laufen, denken Sie, es würde auf Ihrer Anwendung installiert werden. Es würde hier gerettet werden. Sie müssen sich also nicht darum kümmern, die Anwendung erneut zu installieren oder sie bereitzustellen und dann auf Ihr Gerät zu legen. Es wird bereits auf dem Gerät bereitgestellt. Wenn Sie also diese Optionen nicht gesehen haben, über die ich vorher gesprochen habe, dann ist es hier. Also, wenn ich klicke, wie Sie sehen, habe ich Sphärenfotos gemacht, Dateien übertragen. Einige mobile Ionen haben Input-Midi. Also etwas, das wie Musikgeräte ist, funktioniert es nicht auf andere Weise, aber einige Geräte arbeiten mit Übertragungsdateien. Auf diese Weise müssen Sie nur wechseln, bis Sie klüger sind Anwendung diese Änderung erkennen. Und in diesem Fall können Sie auswählen, was Sie wollen. Lassen Sie uns also fortfahren und unsere Anwendung auf dem Mobiltelefon bereitstellen. Wir sehen uns damit. Okay, jetzt, wie Sie hier sehen, ist mein Telefon bereits mit diesem Visier verbunden und wir werden die Anwendung auf diesem Gerät bereitstellen. Wie ich Ihnen sagte, müssen Sie sicherstellen, dass der Android-Emulator , den wir mit Android Studio installiert haben, ausgeschaltet werden muss. Um das auch zu gewährleisten, müssen wir die gleichen Schritte wie zuvor tun. Also zuerst müssen wir zuerst die ADB-Geräte ausführen, wie Sie sich hier erinnern. Wenn ich also ADB-Geräte betreibe, wird mein Gerät automatisch erkannt. Dies ist der Code meines Geräts, und dann wäre es hier. Stellen Sie also sicher, dass Sie nur ein Gerät in der Liste haben. Andernfalls funktioniert die React-Anwendung nicht ordnungsgemäß. Lassen Sie uns die Anwendung erneut mit Android ausführen. Ich werde das Kommando nochmal setzen. Wie Sie sehen, installiert es die Anwendung. Es wird die Anwendung auf meinem Telefon zu installieren, auf die physische Form, mit der verbunden ist. So wird es auch ein wenig Zeit des Bauens in Anspruch nehmen. Aber wie Sie hier sehen, dass es schneller wird als der Emulator. Denn hier wurde die Anwendung installiert und direkt auf dem Gerät bereitgestellt und verwendet die Ressourcen des Geräts. Wir müssen keine Ressourcen des PCs verwenden, um ihren Code zu debuggen und ihn dann dort bereitzustellen. Jedes Mal, wenn ich etwas mit meiner Anwendung mache, werde ich hier wieder ändern, Kerne und speichern. Wir werden die direkt sehen, die Änderung wird hier erkannt werden. Und auch der Simulator des iPhone funktioniert und funktioniert immer noch gut. Also, wie Sie hier sehen, haben Sie eine Freiheit. Sie können Emulator oder iOS-Emulator oder Simulator verwenden. Und auch Sie können Ihr Gerät verwenden. Und wie Sie sehen, können Sie auch offline gehen. Sie können die deaktivieren, vollständig die Entwicklung oder für die Anwendung. Und Sie werden sehen, dass die Anwendung auf Ihrem Gerät bereitgestellt wird. Also werde ich es dir schnell zeigen. Und wie Sie sehen, ist die Anwendung hier, Kerne Projekte. Also, wenn ich auf diese Anwendung klicke, werde ich sehen Sie direkt geöffnet und auch ein Ich trenne das Telefon. Wir werden immer noch die Anwendung sehen und ohne Probleme laufen. Es ist wie auf meinem Handy installiert. Dies ist also eine großartige Funktion, weil es das native Android verwendet. Deshalb ziehe ich es vor, React Native CLI als x bar, x bar zu verwenden . Okay, Sie können die Anwendung ausführen, aber über einige Überbrückung, die x Bar Anwendung genannt wird, Sie müssen es auf Ihrem Telefon installiert haben und auch auf Ihrem PC. Aber hier wird die Anwendung direkt gespeichert und Sie können sie auf Ihrem Gerät verwenden. 15. Hallo World App und Logging: Der einfachste Weg, um die Anwendung oder mobile Anwendung zu debuggen, ist das Ausführen und Protokollieren. Protokollierung. Ich meine, dass ich ein Konsolenprotokoll mache, wie ich Ihnen zuvor gezeigt habe, dass wir console.log haben und dann haben wir eine Daten. Also Konsolenprotokoll, es wird für mich im Terminal suchen, aber welches Terminal? Das Terminal, das unter Metro läuft. Metro Bundler, wird mir alle Konsolenprotokolle zeigen, die ich mache. Und es ist wie unsere Konsole. also etwas in Wenn Siealso etwas inder Konsole protokollieren und die Anwendung speichern, werden die Daten dort protokolliert. Aber lassen Sie uns diesen Code einfacher machen. Du weißt, dass das ein bisschen kompliziert ist. Wir müssen das also einfacher machen, damit wir Schritt für Schritt gehen können. Wenn Sie in die Anwendung selbst gehen, sehen Sie etwas, das die Grundlagen genannt wird. Es ist wie Helloworld Anwendung. Also lassen Sie uns auf diesen Link klicken und es wird uns zu etwas wie Einführung bringen. Und wir werden hier ein Beispiel haben, das wir volle Anwendung für Hello World sein werden. Also lassen Sie uns den ganzen Code kopieren. Ich werde es später erklären. Also gehen wir wieder zu unserer Anwendung in app.js. Wie ich Ihnen sagte, der Einstiegspunkt unserer Anwendung, löschen wir alles. Und dann würden wir diesen Code, lassen Sie uns gegen den Simulator öffnen und dann drücken wir Speichern. Also werden wir unseren Code speichern. Wie Sie sehen, wird es automatisch formatiert. Und wie Sie hier sehen, habe ich hier meine Anwendung ist debuggt und geladen. Also, wenn ich dies ändern, werde ich sagen, zum Beispiel, hier, Hallo Welt. Also nur um sicher zu sein, dass alles gut funktioniert. Ok, nett. Wir haben hier Hallo Welt. Wenn wir zu den Teilen der Anwendung gehen, werden Sie sehen, dass es sehr einfach ist. Also zuerst müssen wir React aus der React-Bibliothek importieren, und wir müssen auch einige Komponenten importieren. Und diese Komponenten werden immer verwendet. Die Anwendung, wie Sie wissen, ist React Native nicht HTML oder CSS. Nein. Es ist so etwas, wie wir Komponenten sagen können, wir verwenden eine Komponente und dann rufen wir diese Komponenten und platzieren einige Daten in ihnen, um sie in unserer Anwendung anzuzeigen, wir werden in unserem Kurs für die Komponenten gehen, die wir brauchen, um erstellen Sie unsere Anwendung. Dafür werde ich die Komponenten erklären, die wir für den Kurs selbst benötigen. So haben wir zum Beispiel hier zu dieser Ansicht. Diese Ansicht ist etwas, wie Sie in HTML sagen können, ist ein div und div, das zum Beispiel eine andere Komponente enthält , oder zum Beispiel Texte oder Schaltflächen oder Textfelder. Also hier, wie Sie sehen, dass diese Ansicht als div in meiner Anwendung implementiert wird. Ich kann auch einen Blick in dich haben. So können wir wie div in div genau die gleiche Weise verwenden. Text. Wenn Sie einen Text platzieren möchten, können Sie ihn auch verwenden. Wie Sie jeden Text platzieren können, ist wie eine Spanne oder wir können Absatz sagen. Und dann können Sie den Text in diesem Tag hier platzieren. Also, danach können wir sagen, dass unsere Komponenten-App Ihre App genannt wird. Wir können sagen, dass diese, Ihre App, hier geladen ist. Wenn ich also meine eigene Komponente erstelle und sie hier platzieren, wird die Komponente innerhalb meines Einstiegspunkts meiner Anwendung aufgerufen. Also lassen Sie uns all das umbenennen. Wir können sagen, das ist AB und das ist AP. Es zeigt, dass dies eine Funktion ist und diese Funktion für mich zurückgibt, dass React Native Vorlage. Und diese Funktion wird exportiert und in der index.js aufgerufen, wie Sie hier sehen. Und es wird geladen und registrieren Sie die Hauptkomponente als AB und AB Registry wird für mich das Ausführen der Anwendung tun. Diese verkürzte Geschichte, wenn wir zu ihm gehen, kommuniziert es mit Android und auch mit iOS-Bibliotheken, um die Anwendung auszuführen und sie in eine native App zu ändern. Wir werden dies nicht im Detail eingehen. Wir werden eine praktische Dinge zu tun. Ich mag es nicht, viele Theorien zu machen. Ich mag auch immer etwas Praktisches zu tun. Deshalb sind meine ganzen Kurse unpraktisch. Denn eigentlich lerne ich gerne von der praktischen Sache. Ich muss etwas vor mir sehen. Also lassen Sie uns ein Konsolenprotokoll machen. Wie ich Ihnen gesagt habe, werden wir ein Konsolenprotokoll erstellen. So kann die Protokollierung so sein, dass wir sagen können, dass der Einstiegspunkt meiner Anwendung innerhalb dieser Funktion sein wird. Also wird diese Funktion für mich diese Vorlage zurückgeben. Aber vorher können Sie jeden JavaScript-Code schreiben, wie ich Ihnen sagte. So JavaScript-Code können wir console.log sagen und wir können Hallo Welt sagen. So können wir unsere Sachen trösten. Und wo ich sehen werde, wird es in meinem Terminal erscheinen, das Metro genannt wird, wie ich Ihnen gezeigt habe, dass es sofort nach der Bündelung der Anwendung ausgeführt wird. Also lasst uns das zoomen. Ich will es größer machen. Und wie Sie hier sehen, haben wir Hello World. Schön. Also jetzt, wenn ich wieder zu meiner Anwendung gehe und dies ändern, wie ich hier sage, Hallo Welt. So werden wir sehen, dass der Login noch hier protokolliert ist, und das ist Informationen, die log genannt wird. Okay, toll, also lassen Sie uns zum Beispiel Konstante definieren , richten Sie es konstant aus und ich sage x und dieses x wird zum Beispiel Wert, meinen Kurs haben . Und dann werde ich das setzen, und jetzt werde ich dieses x trösten, damit wir dieses entfernen können, alles speichern können. automatische Formatierung funktioniert einwandfrei. Und wenn ich zum Terminal gehe, werde ich wieder meinen Kurs sehen. Schön. Das ist also JavaScript. Eigentlich schreiben wir hier JavaScript, das wir innerhalb unserer Komponenten für diesen Teil verwenden werden, der Styling genannt wird. Es ist wie Styling, aber Nazi SS, Es ist React Native Styling. Und wir werden später sehen, wie wir unsere Anwendung gestalten werden. Ich werde über all die Dinge sprechen, die wir für unsere Komponenten stylen müssen. Auf diese Weise können Sie Ihre Anwendung mithilfe der Konsole Ihrer Anwendung protokollieren und debuggen . 16. Chrome löschen: Okay, in diesem Vortrag werde ich Ihnen zeigen, wie Sie unsere Anwendung debuggen. Natürlich ist Debugging eine sehr großartige Funktion, also können wir es verwenden, um unsere Probleme zu verfolgen, wie ich Ihnen sagte, okay, Wir können Konsolenprotokoll verwenden, aber es ist besser, das Debugging zu verwenden. Es gibt zwei Möglichkeiten zum Debuggen in React Native. Zuerst von ihnen verwendet Google Chrome. Ja, über den Browser. Natürlich können Sie auch einen Browser verwenden, um Ihre Anwendung zu debuggen. Wie wir das tun können. Zuerst müssen Sie auf Ihren Simulator klicken, und dann gibt es eine Verknüpfung. Sie müssen es schaffen, was Control D unter Windows oder Befehl D auf Mac ist. Wenn Sie also auf Control D klicken, haben Sie ein Menü wie dieses. So haben Sie mehrere Optionen. Einer von ihnen debuggen mit dem Chrome. Wenn Sie also auf den Fehler mit Chrome klicken, wird es für Sie beim Debugger geöffnet. Also debugge ich Seite. So, wie Sie hier sehen, können wir sehen, dass wir einige Debug-Seite haben. Und diese Seite enthält einige Informationen. So können Sie mit dem Debuggen beginnen. Okay, also werde ich den Debugger erstellen. Wie ich sehen kann, wie ich einen Haltepunkt in meinem Chrome platzieren kann. Also zuerst müssen wir diese DevTools öffnen. Also, wie öffne ich die DevTools? Drücken Sie einfach F2, indem Sie F2 drücken. Wie Sie sehen, habe ich hier den Inspektor, die DevTools von Chrome. Okay, jetzt muss ich zum Beispiel einen Haltepunkt platzieren , aber wo, wie kann ich zu der Datei gelangen, die zum Beispiel für mich die Datei ab.js ist . Also zuerst, wenn Sie sich erinnern, haben wir hier ein Konsolenprotokoll. Also bin ich sicher, wenn Sie diese öffnen und auch die Konsole öffnen, werden Sie die Nachricht sehen, die wir gedruckt haben. Es wird sich hier in der Konsole befinden. Also habe ich es so ausgedrückt. Wenn ich also nachladen drücke, werde ich sehen, dass meine Anwendung neu geladen wurde. Jetzt können wir diese Botschaft sehen. Wenn ich also auf diese app.js sechs klicke, wird es mir im Code angezeigt, wo ich diesen Kommentar platziert habe, wo ich dieses Konsolenprotokoll platziert habe, und es wird für mich den Code öffnen, genau wie ich es in Visual Studio-Code habe. Auf diese Weise können Sie einen Haltepunkt erstellen. Sie wissen, in Chrome können Sie einen Haltepunkt erstellen, indem Sie auf die Zeilennummer klicken. Also, wenn ich hier klicke, habe ich einen Haltepunkt erstellt. Okay, lasst uns jetzt die App neu laden. Und wie wir sehen, dass wir auf dem Haltepunkt automatisch gestoppt haben. Also, jetzt bekomme ich, um den Wert von x zu sehen und zu überprüfen, zum Beispiel, indem ich einfach die Maus darüber lege. Und ich kann sehen, was hier los ist. Also, wenn ich einen weiteren Schritt gehen möchte, klicke ich auf diesen Pfeil. Damit wir noch einen Schritt gehen können. Und dann werde ich sehen, dass x Wert hat, meinen Kurs. Auf diese Weise tun wir Debugging über Chrome. Und natürlich, nachdem Sie das Debuggen beendet haben, drücken Sie Play und die Anwendung wird weiter geladen. Sie können also die Datei app.js nicht genau aus den Quellen hier behandeln, wie Sie immer wissen. Aber Sie müssen ein Konsolenprotokoll platzieren oder Sie können dieses aktivieren und die Endbögen auf Mantelausnahmen aktivieren. Wenn es also eine Ausnahme gibt, zeigt es Ihnen in Ihrem Anwendungscode an, wo die Ausnahme platziert wird. 17. Debugging mit VSCode: Eine andere Möglichkeit, unsere Anwendung zu debuggen, ist die Verwendung von Visual Studio Code Debugger. Visual Studio bietet auch ein Debugger-Tool, das wir auch verwenden können, wie wir mit Chrome gemacht haben. Aber zuerst und sehr wichtige Informationen, die Sie tun müssen , bevor Sie den Debugger in Visual Studio-Code einrichten, müssen Sie Metro deaktivieren. Metro, wie es in unserem Terminal automatisch geöffnet wird, wenn wir iOS laufen, React native App. In diesem Fall müssen wir die Metro schließen. Dasselbe kann mit Android passieren. Also lassen Sie uns das schließen. Also werde ich es hier einfach aufhalten. Wie durch Drücken von Control C oder Befehl C und dann werde ich es komplett schließen. Und wie Sie hier sehen, dass wir kein Debugging mehr haben und unsere Anwendung nicht geladen werden kann und wir haben jetzt normale Form. In diesem Fall werden wir nun einen Debugger mit Visual Studio Code einrichten. Also, wie können wir das tun? Zuerst müssen Sie zu dieser Schaltfläche gehen. Wir können sagen, ausführen und debuggen. Und dann finden Sie hier etwas wie erstellen Aidan JSON-Datei und Wäscherei JSON-Datei ist die Datei, in der wir die Konfiguration für unseren Debugger setzen werden. Wenn Sie also auf diesen Link klicken, erhalten Sie einige Optionen. Einer von ihnen muss der AC nativ sein. Aber wie Sie hier sehen, habe ich diese Option nicht, weil ich die React Native Tool-Erweiterung installieren muss, die ich Ihnen bereits gesagt habe. Dies ist React native Tools. Also in einem Fall, dass es nicht funktioniert, manchmal wird es geu nach dem Nachladen gefragt. So können Sie einfach die Anwendung erneut laden oder auf neu laden klicken. Oder Sie können es zum Beispiel einfach deaktivieren und wieder aktivieren, und Sie haben diese Option. Also zum Beispiel, ich habe wieder hier, nur um sicher zu sein, dass es funktioniert, okay, es ist in Ordnung. Jetzt werde ich auf das Debugging-Tool klicken und ich werde eine lange JSON-Datei erstellen. Jetzt habe ich React Native Option. Also, wenn Sie diese Option nicht haben, nur um die Erweiterung zu starten und Sie werden es wieder haben, okay, klicken Sie auf React Native, dann würden Sie eine andere Option erhalten. Einer von ihnen ist beigefügt, um es zu verpacken. Es gibt mehrere Debugging-Möglichkeiten, aber zum Beispiel ist das Anhängen an Packager die einfachste. Also können wir dieses deaktivieren und das zum Packager hinzufügen. Jetzt klicke ich auf OK. Und es wird für mich eine Datei generieren, JSON-Datei, wo es eine Konfiguration namens Attach to Packager hat. Und dieser Versuch, Budget und Packager zu planen, hat einige Kommentare, wo es mit meinem Debugger funktionieren wird. Ok, jetzt müssen wir unsere Anwendung ausführen. Wir werden unsere Anwendung nicht so ausführen, wie wir es vorher gemacht haben. Wie, ich werde nicht zur Befehlszeile gehen und ich werde in px React Native oder ein iOS sagen oder nicht. Wir werden den Anhängen an Packager lassen, um die Anwendung für mich auszuführen. Also, wenn ich hier zum Debug gehe, Natürlich, wenn Sie auf der Dateiliste sind, gehen Sie wieder zum Debugger. Sie werden Schaltfläche hier und diese Schaltfläche haben, es heißt Ausführen und Debuggen. Und Sie werden mehrere Optionen haben. Einer von ihnen ist an, dass zu Packager. Es basiert auf der Konfiguration, die wir hier im Darlehen JSON haben. Und wenn Sie neugierig sind zu wissen, wo dieser lange Jason entsteht. Wie Sie sehen, wird es in Punkt v ist Code-Ordner. Wie ich Ihnen bereits gesagt habe, dass in diesem Ordner wir eine Konfiguration, die wir mit dem Team geteilt haben, wie ich Einstellungen wie Start, wie zum Beispiel einige Empfehlungen für Erweiterungen usw. So jetzt können wir hinzufügen und führen Sie unsere Anwendung aus. Also lasst uns auf Ausführen klicken. Und wie Sie sehen, wird es die Anwendung genau ausführen, wie Metro geht. Wenn Sie sich erinnern, dass wir das gleiche Schild hier und jetzt hat der Packager angefangen. Ok, nett. Aber jetzt meine Anwendung, die nicht automatisch gestartet wurde, also müssen Sie das tun und es automatisch oder manuell ausführen, sorry. So klicken Sie einfach darauf. Und Sie haben natürlich, wie ich Ihnen sagte, die Anwendung wird auf Ihrem Computer oder auf Ihrem Gerät installiert und Sie führen es einfach aus. Und wie Sie sehen, wie der Angreifer bereits weiß, dass es ein Telefon läuft die Anwendung. Jetzt können wir damit beginnen, es zu debuggen. Okay, versuchen wir, einen Bruchpunkt zu platzieren. Ich werde hier einen Haltepunkt auf unsere Konstante setzen, die wir vorher geschaffen haben. Zum Beispiel dieses, und speichern Sie dann. So wie Sie sehen, dass Debugging beginnt zu funktionieren. Also gehe ich jetzt Schritt für Schritt. Und hier habe ich den Wert von x, genau wie wir mit dem Chrome hatten. Ok? Manchmal funktioniert der Haltepunkt nicht für Sie, da wir den Debug mit Chrome aktivieren müssen. Also ich weiß nicht, sie nennen es aktiviert die Arbeit mit gewachsenen, aber es sollte wie nur Debugging aktivieren. So, wie wir Debugging aktivieren können, wenn Sie sich erinnern, haben wir Tastenkombination gedrückt, die Control D oder Befehl D auf Mac ist. Und manchmal müssen Sie mehrmals Control D drücken, weil es nicht angezeigt wird. Schnell, also musst du es mehrmals tun, bis es hier oben ist. Also, jetzt danach, sehen Sie hier starten Debugging mit Chrome und dann klicken Sie darauf. Wenn Sie zum Beispiel nicht darauf klicken, werde ich das Debuggen stoppen. Und dann okay, ich muss meine Bewerbung fortsetzen. Okay, machen wir weiter. Sie sehen, dass es keine Antwort mehr gibt, da sie nicht an das Debugging angehängt ist , da ich meine Anwendung jetzt nicht debuggen kann. Dieser Haltepunkt kann nicht sehen, was in der Anwendung passiert. Daher ist es sehr wichtig, den Bug mit Chrome zu aktivieren. Okay, es ist mit Chrome geschrieben, aber es ist mit allem, was wie an Packager angehängt ist. So können wir genau hier, angehängter Debugger oder Debuggen mit Chrome. Jetzt kann ich meinen Haltepunkt platzieren, die Anwendung neu laden, ich habe am Haltepunkt angehalten. Also müssen Sie sicher sein, dass zwei Dinge. Zuerst schließen Sie die U-Bahn, das Terminal, das wir am Anfang geschlossen haben. Zweitens müssen Sie das Debugging hier in den DevTools der Anwendung aktivieren , sind wir es hier. Eine weitere wichtige Information, wenn Sie das Debuggen beenden möchten, da Sie wissen, dass das Debuggen die Anwendung sehr langsam macht. Sie müssen also das Debuggen stoppen. Sie müssen das Debuggen stoppen, indem Sie viele Dinge tun. Zuerst müssen Sie auf diesen Stop-Debugger klicken und auch das Debuggen in den DevTools gestoppt haben, wie Sie hier sehen. Und auch, Sie müssen einen Kommentar finden, indem Sie F1 drücken und die F1, Sie müssen nach React Native suchen. Stoppen Sie Packager. Es ist sehr wichtig, dies zu tun, da sonst der Packager noch im Hintergrund läuft. Und wenn Sie das Paket ausführen oder erneut, oder Sie eine neue Anwendung ausführen, wird es Ihnen sagen, dass der Packager bereits läuft und Sie werden es nicht wissen, weil Sie alles gestoppt haben und Sie es von hier aus gestoppt haben und es ist läuft immer noch und Sie wissen nicht, wo Sie es stoppen können. Der beste Weg, dies zu tun, ist, F1 zu tun und zu drücken und Stop-Packager aus dem nativen Befehl React zu finden. Und dann wird es das Paket stoppen oder ganz. Und Sie werden zum Beispiel die Anwendung wieder so normal ausführen können, wie wir im Terminal gesehen haben. Oder Sie können es erneut mit angehängtem Paket ausführen oder indem Sie den Fehler erwähnen, den ich Ihnen gesagt habe, vielleicht werden Sie dieses Problem bekommen, wie Sie hier sehen, dass Sie die Summe erhalten würden. Ein anderer Debugger ist bereits mit dem Packager verbunden. Bitte schließen Sie es, bevor Sie versuchen, mit VS-Code zu debuggen. Das ist also sehr wichtig. Also müssen Sie auch den Packager stoppen, wie ich Ihnen sagte, hier, stoppen Sie den Packager, packen oder gestoppt. Und Sie müssen auch das Terminal überprüfen. Alles ist in Ordnung, du hast nichts am Laufen. Und auch das dann minnow, das wir hier benutzt haben. Also müssen Sie das wissen oder glänzend völlig. Also habe ich es hier. Beenden Sie. Ok. Sie haben jetzt auf Ihrem Telefon getrennt von Metro und dann führen Sie Anhängen an packager und die Anwendung wird erneut ausgeführt. Wie Sie sehen, habe ich es wieder laufen, aber ich habe keine Anwendung. Sie müssen also nur noch einmal die DevTools öffnen. Und zum Beispiel können Sie sagen, laden Sie die Anwendung neu, nur um sie wieder zu verbinden. Und debuggen Sie auch mit Chrome, um das Debugging mit Breakpoints zu aktivieren. Also all diese Fehlerbehebung, müssen Sie darauf achten. Sehen Sie sich dieses Video mehrmals an. Wenn Sie Probleme haben, werden Sie wissen, wie Sie mit VS Code debuggen. 18. Die Movies Übersicht: Okay, jetzt beginnen wir den zweiten Abschnitt, nachdem wir unser Vitamin vorbereitet haben und fügen installiert, was von uns benötigt wird. Zuallererst brauchen wir eine API, wir brauchen eine Daten, wir brauchen Bilder der Filme. Wir müssen irgendwie ein Video des Films machen. Dafür brauchen wir etwas namens API. Und die API wird uns eine Liste von Daten als JSON-Daten zur Verfügung stellen, die wir in unserer Anwendung verwenden können und zeigen, wie es hier auf der Website gesehen. Es gibt eine Website, die den Film db.org oder den Film database.org genannt wird, die diese API anbietet. Also, wie Sie hier sehen, haben wir Liste von Filmen wird gerade gehen. Einige Kritiken über Filme zeigt nur wie einige Bilder, die die Schauspieler sind und jemand Ansichten, et cetera. Also werde ich die API dieser Website verwenden. Und wieder werden wir diese Informationen anzeigen, aber auf mobile Anwendung. Aber wenn Sie Ihr eigenes Framework erstellen möchten, müssen Sie natürlich eine API erstellen. Und beim Erstellen einer API können Sie mehrere Backend-Technologien verwenden, wie zum Beispiel NodeJS, alle C-Sharp. Sogar Sie können eine Firebase verwenden. Aber um es schnell zu machen, denn wir sind hier vor und, und mobile Entwicklung spezialisiert. Wir sind keine Back-End-Entwickler. Wir werden diese API verwenden, die bereits implementiert ist. Und wenn Sie wissen möchten, wie Sie eine API erstellen , die wie auf der Rückseite basiert und auf Node.JS basiert. Sie können zu meiner Seite folgen, wo es blaue Bits obwohl Dev ist, ich habe einen vollständigen Kurs über den Aufbau einer kompletten E-Commerce-Web-API. Diese API werden Sie, oder in diesem Projekt, werden Sie lernen, wie Sie die API selbst erstellen. In unserem Fall wird es wie die API eines Films sein. Sie sind, können Sie sie zum Beispiel Filme speichern. Machen Sie sie immer eine Filterung all dieser Informationen. Dies ist also ein echtes praktisches Projekt mit E-Commerce, aber auch Sie können wissen, wie Sie Bilder hochladen, wie Sie die APIs erstellen und wie Sie sie sichern können. Für unseren Kurs werden wir die API verwenden, die auf dieser Website zur Verfügung gestellt wird, die kostenlos und für jedermann verfügbar ist. Zunächst müssen wir auf Join klicken, CMDB. Wir müssen uns dort registrieren und ein Konto erstellen, um Zugriff auf ihre API zu haben. Also werde ich dieses Formular schnell ausfüllen. Und wie Sie hier sehen, füllte ich meine Daten und ich werde mich anmelden. Und danach erhalten Sie eine E-Mail und leiten Sie diese E-Mail weiter, die Sie benötigen. Verifizieren Sie Ihr Konto, also müssen Sie zur E-Mail gehen. Sie erhalten dort einen Link, und dann klicken Sie auf den Link und dann Ihr Konto wird verifiziert. Also gehe ich jetzt zu meiner E-Mail. Ich habe Informationen erhalten, dass meine E-Mail verifiziert wurde. Also werde ich mich jetzt einloggen. Also hier haben wir bereits den Bildschirm. Ich werde mein Passwort nochmal eingeben und dann nachsehen. Schauen wir uns an, nachdem meine Bewerbung oder unser Konto erstellt wurde. So, jetzt habe ich das Konto erstellt. Dafür können wir auch die API verwenden. So, wie wir anfangen können, API zu verwenden, ist es sehr einfach. Sie wissen, dass EPI so etwas wie ein Link ist. Und dieser Link, Sie können ihn bekommen und Sie können Daten daraus bekommen, wie wir diesen Link verwenden können oder wie wir ihn finden können. Zuallererst müssen Sie zu Ihren Profileinstellungen gehen. Sie müssen also hier klicken und dann auf Einstellungen klicken. Und dann nach diesen Einstellungen, sehen Sie, ich habe alle meine Informationen. Ich habe etwas namens API. Und für die API müssen wir einen API-Schlüssel anfordern. Okay, lassen Sie uns zuerst gehen, Dokumentation dieser API. Er sagte, dass sich unsere primäre Dokumentation unter diesem Link befindet. Sie gehen also zu diesem Link und wie Sie hier sehen, erhalten wir alle Informationen und alle Schritte, wie wir diese API verwenden können. Jetzt werde ich Ihnen diese Schritte schnell zeigen. Also zuerst müssen wir dort zu unserem Konto gehen und dann API. Und dann möchte ich einen API-Schlüssel generieren oder anfordern, weil jede API einen Schlüssel benötigt. Leisten Sie können die Option entwickeln wählen, weil wir Entwickler sind und wir werden diese API verwenden. Und wir sagen, dass unser Projekt Non-Profit. Wir müssen also eine Vereinbarung zustimmen, damit wir all diese Informationen lesen können , und dann können wir das akzeptieren. Und danach, was die Art der Verwendung. Sie müssen also wissen, was die Art der Verwendung für Ihre Anwendung ist. Zum Beispiel sage ich eine mobile Anwendung oder zum Beispiel eine Desktop-Anwendung oder eine Website. Es liegt an dir. Für jetzt werde ich zum Beispiel eine mobile Anwendung verwenden. Name der Anwendung. Wir können Movies App nur durch einen Namen sagen, was einfach ist. Und dann klicken Sie auf „Senden“. Und danach haben Sie eine Benachrichtigung, dass Sie das gesamte Formular ausfüllen müssen. Also werde ich es schnell vor Ihnen ausfüllen und ich würde auf Absenden klicken. Also fühle ich mich alle erforderlichen Informationen. Ich habe dir ein paar zufällige Informationen zur Privatsphäre vorgelegt. Also werde ich einreichen. Wenn also hier steht, Adressstatus nicht leer sein. Also kann ich hier geben Sie einen, und dann können wir auf Senden klicken. Unsere Änderungen wurden vorgenommen, und dann bekomme ich einen API-Schlüssel. Dieser API-Schlüssel können Sie ihn verwenden, um Daten aus der Datenbank dieser Website zu erhalten. Zum Beispiel gibt es hier ein Beispiel, API-Anfragen. So können wir diese URL nehmen, diesen Link, und dann können wir zu Postman oder einem anderen Werkzeug gehen, wo Sie verfolgen oder eine Daten sehen. Sie können diese URL beispielsweise auch im Browser verwenden. Also zum Beispiel werde ich hier gehen und dann werde ich den Link auf den Browser setzen. Und wie Sie sehen, habe ich mehrere Daten und Informationen über einen Film. So zum Beispiel, ich erwachsene fällt, all diese Informationen dafür. Wie Sie hier sehen, ist diese API hässlich. Also verwende ich ein Werkzeug, das Postman heißt. Also diese Post-Geld, können Sie es von ihrer ursprünglichen Website herunterladen. Also werde ich hierher gehen. Und wie Sie sehen, haben wir auf Google den ersten Link. Und im ersten Link können Sie einen Postboten installieren und herunterladen. Oder wenn Sie den Link nicht leicht finden, können Sie direkt hier auf Google gehen, um Postman herunterzuladen, und dann werden Sie die App direkt auf Ihrem Betriebssystem herunterladen. Also, nachdem ich Postbote heruntergeladen habe, wie Sie hier sehen, habe ich diese Ansicht oder den Bildschirm bekommen. Das ist also Postbote, den wir verwenden oder unsere API testen werden. Also werde ich einen neuen Tab öffnen. Und diese Registerkarte zeigt mir mehrere Methoden für GET, Post, PUT usw. All dies sind Informationen, die ich erklären werde, um die Daten zu erhalten. Wir sind GET-Anfrage, wir tun eine get Anfrage. Dann fügen Sie einfach die URL hier ein. Wie Sie sehen, ist die API ein Link, der bereitgestellt wird und es immer mit API-Schlüssel Suffix. Und dieser API-Schlüssel, was wir für unser Konto bekommen haben. Also, nachdem Sie dieses Beispiel API einfügen, können wir dann auf Senden klicken. Und wenn ich eine Anfrage sende, dann bekomme ich alle Daten über zum Beispiel einen Film. Und dieser Film heißt Fight Club. Und es gibt eine Beschreibung über die Popularität von Filmen und all diese Informationen und Bewertungen in Ländern, Laufzeit, gesprochene Sprache, all die Daten, die ich brauche. Und es sind genau die gleichen Daten, die Sie auf ihrer Hauptwebsite sehen. Also zum Beispiel, ich werde hier gehen und ich werde den Fight Club überprüfen, was wie ein Film ist. Oder wir können auf jeden Film klicken, zum Beispiel die Simpsons. Und dann sehen Sie Beschreibung Übersicht, und Sie sehen, wer der Schauspieler sind. All dies kommt mit der API, die ich Ihnen jetzt im Postboten gezeigt habe. Dazu müssen Sie auch diese API in Ihrer Anwendung verwenden, um zum Beispiel anzuzeigen, wie Sie auch ein Bild sehen, damit der Benutzer darauf klicken und einige Details sehen kann. Okay, werfen wir einen Blick auf die Dokumentation dieser API. Wie Sie sehen, gibt es viele Informationen, die Sie benötigen. So zum Beispiel gibt es Filme und Insider-Filme, es gibt eine Menge Informationen wie Bilder bekommen, Credits bekommen, gute Änderungen. Raid Film zum Beispiel, erhalten Sie neueste Filme, jetzt spielen Filme, die zum Beispiel, Ich möchte beliebte Filme und beliebte Filme zu bekommen. Wie Sie sehen, gehen Sie und probieren Sie es aus. Sie werden den gleichen Link hier sehen. Um diese API zu testen, müssen Sie nur alle diese URL kopieren, zu Postman gehen und sie dann hier platzieren. Und dann müssen Sie diesen API-Schlüssel zwischen all diesen Pfeilen durch Ihren Schlüssel ersetzen. Also gehe ich wieder auf mein Konto. Und dann werde ich den API-Schlüssel kopieren. Und dann werde ich mit diesem API-Schlüssel ersetzen, wie Sie hier sehen. Also, jetzt habe ich alle Informationen. Es hat einige andere Informationen wie Sprache und Seiten, weil es mehrere Seiten sein wird, wie Seite 1, Seite 2 usw. Also lasst uns auf Senden klicken und auf die Antwort warten. Schön. Wir haben eine Antwort. Wir haben mehrere Seiten oder mehrere ähnliche Ergebnisse. Eine oder erste davon ist der erste Film und der zweite Film, dritte Film, wie Sie hier sehen. Und jeder Film hat wie einen Namen oder Titel und es hat wie ein Bild und eine Übersicht. Bisher müssen Sie immer die Dokumentation befolgen, um zu bekommen, was wir wollen. Und während des Kurses werde ich diese Dokumentation verwenden, um zu erfüllen, was wir für unsere Anwendung benötigen. Also, was von Ihnen jetzt benötigt wird, registrieren Sie sich einfach auf dieser Website, erstellen Sie einen API-Schlüssel, und dann gehen wir zu dieser Dokumentation zu bewegen. Und wir werden in der nächsten Vorlesung während der Erstellung unserer Anwendung sehen. 19. So gestaltest du Movies: Okay, jetzt lassen Sie uns ein neues Projekt erstellen. Das Projekt, das wir zuvor gesehen haben, dass wir ein Hello World Projekt oder so etwas wie Kursprojekt erstellt haben, das wir in der Einleitung gesehen haben. Aber jetzt werden wir ein neues Projekt für unsere Film-App erstellen. Um das zu tun, machen wir den gleichen Schritt. Wir öffnen das Terminal, indem Sie auf Control J. Und dann werden wir den Befehl MP x React Native darin schreiben, und dann den Namen Ihres Projekts. Aber vorher müssen wir wissen, wo wir sind. Also, jetzt öffne ich das Terminal ay, Sie müssen einen Ordner erstellen. Also bevorzuge ich es, den Ordner auf meinem Desktop zu erstellen. Also lassen Sie uns sagen, zum Beispiel, um zu wissen, dass ich jetzt Mac-System. Natürlich sehen Sie, wenn Sie unter Windows sind, den Ordner, in dem Sie Visual Studio Code öffnen. Aber jetzt habe ich gerade Visual Studio Code geöffnet. Ich bin in keinem Ordner, denn wenn Sie hier klicken, gibt es nichts. Also zuerst können wir nur das Terminal öffnen und überprüfen, wo wir sind? Also werde ich LS eingeben, wie Liste für mich, die Ordner, in denen ich mich befinde. Also habe ich hier all diese Ordner. Ich gehe auf den Desktop. So können Sie sagen, Desktop und Sie drücken die Tabulatortaste, es wird Auto-Vervollständigung tun. Und dann kannst du klar sagen, wie du den Bildschirm löschen kannst. Jetzt befinden Sie sich unter dem Desktop-Verzeichnis. Also lassen Sie uns jetzt ein neues Verzeichnis erstellen. Wir können es einen Namen geben, Zum Beispiel, Projekte oder zum Beispiel Anwendungen im Allgemeinen, wie wo Sie gehen, um Ihre Anwendungen zu machen. Also werde ich es für die Prüfung machen dire, die Schaffung eines Verzeichnisses. Es wird für mich einen Ordner auf meinem Desktop erstellen und ich werde ihm einen Namen geben, Anwendungen, nicht nur dass es. Also, jetzt werde ich sagen CD, wie Zugriff, die Anwendungen. Wie ich jetzt unter Anwendungen hier bin, kann ich meinen nativen React Befehl setzen, wie wir zuvor gesehen haben, um eine Anwendung zu erstellen. So, wie wir es tun können und px React Native, und dann in es. Und dann gebe ich einen Namen für die Anwendung. Zum Beispiel werde ich Filme geben bei, in diesem Fall werde ich laufen und es wird für mich die Vorlagen und alle erforderlichen Dateien herunterladen , wie wir zuvor in der Einleitung gesehen haben. Also werde ich dieses Video überspringen und zu Ihnen zurückkommen, wenn alle Dateien installiert sind. Okay, jetzt wurde meine Anwendung installiert und wir haben jetzt ihre Empfehlungen, für die wir uns gewöhnt haben. Also gehe ich zum Verzeichnis oder navigiere zum Verzeichnis. Ich würde sagen CD, Filme App. Und dann werde ich in die Film-App gehen. Seien wir sicher, dass wir drinnen sind. Wir tippen ls, okay, wir sind hier drinnen. Lassen Sie uns nun das Projekt in Visual Studio-Code öffnen. Also werde ich hier gehen und dann würde ich sagen Open Folder. Ich gehe zu meinem Ordner, zu den Desktop-Anwendungen, und dann wähle ich Filme App und öffne dann das Projekt. Wie Sie hier sehen, haben wir alle Akten, über die wir zuvor gesprochen haben. Also lassen Sie uns das Terminal wieder öffnen, MP x, React, Native, und dann laufen. Hier können Sie also ein System auswählen, an dem Sie arbeiten möchten. In diesem Kurs. Ich werde auf iOS-System arbeiten. Und natürlich, wenn wir die Anwendung beenden, werde ich es Ihnen auch auf Android zeigen. Lassen Sie uns also die Anwendung auf iOS ausführen. Also mein Simulator, wo ich anfangen soll. Und dann werden wir in der Lage sein, es zu verwenden und die Anwendung zu sehen, die wir erstellt haben. So läuft unsere Anwendung jetzt, wie Sie auf iOS-System sehen. Also, was wir tun müssen, um all ihren Standardcode zu ersetzen , den wir hier erstellt hatten oder hatten, und ersetzen Sie ihn durch etwas wie Hello Welt. Wenn Sie sich erinnern, haben wir eine Anwendung erstellt, die Hello World heißt. Und um den Code von dieser Anwendung zurück zu bekommen, können Sie zur Dokumentation von React Native gehen und dann sagen Sie Einführung. Und dann in der Einleitung gibt es helloworld Anwendung. Sie können es für den Start in diesem Projekt verwenden. Also zuerst werde ich diesen Code kopieren. Es gibt zwei Arten von wie React Native Styling Code Styling. Also können wir einen von ihnen benutzen. Für mich ziehe ich es vor, Funktionskomponente zu verwenden, weil sie kürzer und einfacher zu lesen ist, nicht wie eine Klassenkomponente. So können Sie bis zu Ihnen, Sie können eine von ihnen wählen. Funktions-Komponente. Nehmen wir diesen und nehmen all diesen Code. Gehen Sie zurück zu unserem Visual Studio. Lassen Sie uns den Bildschirm wie normalerweise entwickeln ich in einer Weise, wie ich diesen Bildschirm wie diese kleine Größe setzen. Und hier die Anwendung. Und auch wir machen das hier kleiner. So können wir mit mehr Freiheit arbeiten. Also in der app.js, Lassen Sie uns alles entfernen und setzen Sie hier unseren Code. Und dann speichern wir bei unserer Anwendung wird erodiert und neu gestartet und Sie können hier mit der Programmierung beginnen. Also, wenn Sie sich daran erinnern, dass wir alle wie hübscher eingerichtet haben, all die Konfiguration, die wir für die Codierung in React Native benötigt werden. Also alle von ihnen, sie haben standardmäßig konfiguriert, können Sie Ihre Konfiguration hinzufügen, wie Sie wollen. Also hier haben wir die App-Anwendung. Lassen Sie uns all dies entfernen und es umbenennen, zum Beispiel nur in App. Als ob Sie nicht Hello World App haben müssen, ist es nicht schön. So können wir einfach alle diese umbenennen, um in index.js hinzuzufügen. Sie gehen dorthin und Sie stellen nur sicher, dass Sie nur App importieren und alles wird gut funktionieren. Also speichern wir, wir haben app.js und jetzt sind wir bereit für die Codierung. 20. Erstellen von Data Populäre Filme: Okay, wir sahen vorher, wie wir Daten von Filmen API, die wir zuvor gebaut haben, oder die wir aus der Film-Datenbank bekommen. Wie Sie hier sehen, benutze ich Postman und diesen Postboten, zum Beispiel verwende ich eine der APIs, um beliebte Filme zu greifen. Und beliebte Filme werden auf diese Weise zurückgegeben. So gibt es ein Feld namens Seite, um die Anzahl der Seiten, die wir haben und auch ihre Ergebnisse beziehen . Also im Inneren ist alles, es wird eine Reihe von Filmen sein. Also, was wir jetzt tun werden, dass wir brauchen, um zum Beispiel, Liste der Namen der populären Filme, die von dieser API kommen. Um das zu tun, müssen wir einen Dienst verwenden. Und mit einem Service, um Daten aus der API zu erfassen, benötigen wir eine Bibliothek namens axis. Also gehen wir zum Terminal und wir müssen eine Bibliothek installieren, die Achse genannt wird. Und diese Achse, Sie können es von MPM oder NPM installieren und dann axiom installieren. Sie nach der Installation sicher, dass Sie sich im Ordner Ihrer Anwendung in der gleichen Ebene des Pakets Jason befinden. Und Sie gehen und überprüfen Paket Jason, Sie werden sehen, dass Achse hinzugefügt wird. Danach können wir Achsen einfach verwenden. Also, wie Achsen zu verwenden? Gehen wir zur app.js. Und hier können wir sagen, importieren Axiome von der Achse. So ist es sehr einfach, weil wir es bereits installiert haben. Also kann ich sagen, die Achse von der Achse importieren. Bevor ich also die Anwendungs-App öffne, gehe ich hier und definiere eine Konstante wie im Allgemeinen. Und ich gab ihm einen Namen, zum Beispiel, bekommen beliebte Filme. Und dies wird eine Funktion sein, die eine Funktion definiert, die auf diese Weise sein wird. So können wir sagen, dass wir eine Zeilenfunktion haben, wie wir mit der App-Funktion gesehen haben. Die App ist also Pfeilfunktion und ist auf diese Weise geöffnet. Und du kannst tun, was darin drin ist. Es ist wie Funktion und dann populäre Filme zu bekommen. Und dann habe ich diese Steuer eröffnet. Es ist also genau die gleiche Art und Weise. Aber hier machen wir es auf andere Weise, weil wir E-Commerce-Skript oder ES6 verwenden. Also müssen wir uns für das Styling von Funktionen gewöhnen. Also möchte ich die zurückgegebene Liste beliebter Filme in einigen Variablen speichern. Also habe ich hier konstant. Und ich gab diese Konstante wie einen Namen. Wir sagen Antwort, die die Antwort ist, die von der API wie diese kommt. Und dann werde ich die Antwort mit Achse haben. Also werde ich hier Achse haben, die ich hier importiert habe. Axioms verhalten sich wie Postbote, was wir im Hintergrund sagen können. Weil ich einen GET oder Post oder beides gebe oder etwas aus der API lösche. Also werden wir Get benutzen. Also, wenn Sie einen Punkt setzen, dann erhalten Sie hier mehrere Methoden. Einer von ihnen ist bekommen. Um die Daten zu erhalten, wie Sie sehen, fragt es mich, eine URL und diese URL-Zeichenfolge bereitzustellen. Wenn Sie sich erinnern, haben wir das vorher und wir haben gesehen, wie wir diese URL erstellen. Wir haben es von der API von Filmen bekommen und wir haben den API-Schlüssel dazwischen übergeben. Also, jetzt werde ich diesen Link verwenden und ich brauche nicht, um die anderen Parameter wie Sprache EN uns, es sei denn, wenn Sie eine andere Sprache der Filme für jetzt haben wollen , werde ich es einfach so verwenden. Also werde ich die Haupt-API-URL nehmen und dann Filme populär. Wir haben gesehen, wie wir das bekommen. Und dann der API-Schlüssel. Also werde ich diesen Teil kopieren und dann zum Code zurückkehren. Und hier werde ich die gleiche Zeichenfolge platzieren, die ich von Filmen API bekommen habe. Also platzieren wir diesen Drink. Und dann der beste Weg zu wissen, ob wir wirklich Antwort bekommen. Wir haben Konsolenprotokoll, Look Log und dann RESP verwendet , und das war's. Mal sehen, welche Achse für mich zurückkehrt. Aber zuerst, wo ich diese Rakete nennen kann, müssen wir diese Methode aufrufen, wenn die Anwendung läuft? Also, wenn Sie sich erinnern, wir trösten Globus etwas vor der Rückkehr und es wurde jedes Mal ausgeführt, wenn ich die Anwendung neu lade oder aktualisiere. Also können wir es hier benutzen. So kann ich sagen, bekommt populäre Filme, die gleiche Methode, die ich hier erstellt habe. Also lasst uns alles retten. Und jetzt, nachdem ich den IC gespeichert habe, dass die Anwendung geladen wird, aber wir müssen das Konsolenprotokoll an der Konsole sehen, ist im Terminal. Wenn Sie sich erinnern, unser Terminal, haben wir erstellt und es wird automatisch geöffnet, wenn wir die Anwendung ausführen. Also werde ich es größer machen, diese Daten zu sehen. Und wie Sie hier sehen, dass wir null werden, weil wir hier sagen, wie wir eine API oder eine Antwort bekommen, aber es ist leer. Es ist völlig leer. Wir werden nicht so etwas wie du 0 etwas und verständlich bist. Also brauchen wir irgendwie die richtigen Daten zu bekommen. Dies, weil diese Methode, erhalten diese populären Filme vor dieser GetMethod ausgeführt wird, die von Achse zur Verfügung gestellt wird. Da diese Methode müssen Sie wie warten, bis dies passiert ist, und dann können wir die Antwort konsoldieren. Die Antwort hier bekommt also nichts von der Achse, weil sie noch nicht fertig ist. Wir brauchen eine Zeit, wir müssen warten. Die API in Ordnung, hat auf mich geantwortet und dann kann ich zu ihrem Konsolenprotokoll fortfahren. Wie wir das lösen können, müssen wir asynchrone JavaScript verwenden. Wir können ein Schlüsselwort hinzufügen, bevor Achsen Punkt bekommen. Wir können wie Warten sagen, warten, bis die Antwort fertig ist, und dann mit dem Code fortfahren. Also, wie wir das tun können, sagen wir einfach hier, warten Schlüsselwort. Dieses await-Schlüsselwort ist in JavaScript reserviert, aber es erfordert etwas, dass Container-Methode, die diese ist, eine Senke sein muss. Wir müssen es asynchron machen, wie wir sagen können als wäre es eissynchronisierte Methode, es ist isochrones JavaScript. Wir müssen irgendwie auf die Antwort warten. Also müssen wir diese Methode auf diese Weise als asynchron machen. Also lasst uns das retten. Und dann wird unsere Anwendung neu geladen. Gehen wir zum Terminal. Und du siehst, dass wir alle Daten haben. Wir haben alle Daten im Konsolenprotokoll genau wie wir sie in Postman haben. So zeigt es uns, dass alle Daten kommen, die wie wir mit zusätzlichen Daten wollten. Und wie Sie sehen, ist es ein bisschen schmutzig. Wir müssen es ausrichten, weil es als JSON kommt und wir diese JSON-Daten ausrichten müssen, wie sie im Back-End kommen. Also, um die Antwort zu sehen, wie wir sie in Postman haben, wie Sie hier im Konsolenprotokoll sehen, können wir einen Trick tun, der in JavaScript sein wird. So kann ich eine JSON-Bibliothek verwenden. Also heißt es JSON oder mit Großbuchstaben und dann stringify. Und diese Stringify-Methode kann ich ihre Antwort um sie herum umgeben, aber Sie müssen zusätzliche Parameter haben, die so null sind. Und dann der Wert, ein Wert, der ein Leerzeichen ist, das 2 sein wird. Auf diese Weise wird es ein Format für den JSON genau geben , wie wir es in Postman sehen. Also bin ich Staubkette, die die Antwort definiert. Und ich möchte es irgendwie mehr gestylt und formatiert anzeigen. Wenn Sie also speichern und wieder zum Terminal gehen, werden wir sehen, dass die Antwort damit funktioniert. So können Sie die JSON-Antwort auf eine nettere Weise sehen. Auf diese Weise sind wir bereit, die API zu greifen. Aber zuerst setzt axiom zusätzliche Daten über die API. Zum Beispiel, Sie setzen Daten und dann legte er eine weitere Information über die API, über die Header, die wir nicht brauchen und uns nicht interessieren. Also müssen wir nur die Daten erhalten, weil die Daten für mich nur Seite und Ergebnisse zurückgeben, soweit Sie wissen, müssen wir überprüfen, wie die Antwort enthalten ist. Also, was enthält, also habe ich Punkt gesetzt und wie Sie hier sehen, diese Achse für mich zusätzliche Felder für diese Antwort zurückgegeben. Einer von ihnen sind Daten. Hier werden die Daten gespeichert Daten, die von der API kommen. Andere Dinge wie Status-Header, werden wir sie sehen. Wir werden wie zum Beispiel sehen, den Status für 0 für wie die API nicht gefunden, et cetera. Also für jetzt werde ich nur die Daten bekommen, die in diese Antwort kommen. Nehmen wir an, gehen Sie wieder zum Terminal, um zu überprüfen, ob alles in Ordnung ist. Wir gehen zu unserem Terminal. Okay, nett. Wir bekommen jetzt nur die Daten, aber es ist sehr lange Liste. Lass uns einen Film machen. Also, hier, wenn Sie sich erinnern, Ich bekomme die Daten und innerhalb der Ergebnisse, Es ist Array. Und in diesem Array werden Filme enthalten. Jedes Mitglied dieses Arrays ist also ein Film. Nehmen wir den ersten. Also werde ich wieder zum Code gehen und dann werde ich hier sagen, nicht für mich zurückkehren, die ganzen Daten, die für mich zurückgegeben wurden, Ergebnisse. Okay, Sie können hier keine Ergebnisse finden, weil die Daten alle sind, es ist unbekannt. Wir können im Editor nicht sehen, was die API sehr winzig zurückkehrt. Also muss ich sicherstellen, dass okay, ich bekomme Ergebnisse. Und dann genau, wie wir eingeprägt wurden Mann oder im Terminal. Und dann bekomme ich das erste Ergebnis. Um schlechtere Ergebnisse zu erzielen, setzen wir diese Array-Tags und wir setzen 0. Also erster Eintrag dieses Arrays. Also gehe ich zum Terminal. Wieder gehen wir zum Ende. Wir können Lappen hier sehen. Es bedeutet also, als hätte es ein neues Protokoll gestartet. Und in diesem Protokoll sehen Sie, dass wir einen Film haben. Das ist also sehr großartig. Jetzt sind wir bereit, diesen Film in unserer Anwendung hier anzuzeigen. 21. Filmdaten anzeigen: Okay, jetzt, anstatt Hallo Welt anzuzeigen, lassen Sie uns einen Film und den Film, den wir in der Konsole bekommen. Wir werden es hier zeigen. Okay, Zunächst müssen wir zwischen der Vorlage oder der Vorlage von React Native und dem JavaScript-Code unterscheiden . Auf diese Weise möchte ich, wenn ich einige Daten über einen Dienst erhalte, sie in der Vorlage anzeigen. Wie wir das tun können. So kann ich nicht gehen. Zum Beispiel gehe ich hier und ich setze die Methode hier und dann okay, das, dass ich angezeigt wurde. Nein, so ist es nicht möglich. Wir müssen zuerst die Daten zu unserer Anwendung erhalten, die in AP-Funktion ist, und dann die Daten anzeigen, die von der API oder vom Dienst selbst zurückgegeben werden. Also zuerst müssen wir die Daten zurückgeben. Anstatt die Daten der Konsole zu protokollieren, möchte ich diese Daten zurückgeben. So können wir sagen, dass wir auf diese Weise zurückkehren und die Daten, die wir nicht mehr benötigen, zum JSON-Stringify zurückkehren, weil wir es nur verwendet haben, um diesen Code in der Reihenfolge der Ausgabe im Konsolenprotokoll zu formatieren. Jetzt haben wir mehr und Film von dieser Methode zurückgegeben. Oder wir können diese Methode populären Film nennen, aber jetzt haben wir es Filme. Also lassen Sie uns zuerst alle Filme zurückgeben. Also wird diese Methode für mich beliebte Filme zurückkehren. Aber diese Methode, Wie jetzt kann ich es in der Anwendung verwenden. Also, wenn ich jetzt hier gehe und ich sage Punkt nach der Methode, nachdem ich es angerufen habe, werde ich dann hierher kommen, weil dieser Film jetzt ein Versprechen zurückgibt. Warum gibt es ein Versprechen zurück? Weil ich es als asynchrone Methode verwendet habe. Und asynchrone Methoden, die Versprechen zurückgeben. Versprechen Sie, wie ich Ihnen verspreche, Ihnen Daten zu geben, sobald ich sie habe. Also hier, diese Methode, es verspricht uns mit git wirkt Jahre, wenn die Daten bereit sind, dann wird es sie zu uns zurückgeben. Und dann ist eine Callback-Funktion. So können wir den Callback verwenden, um die Daten zu erhalten, die von dieser Funktion zurückgegeben werden. Also kann ich hier so etwas machen, wie wir Filme sagen können. Und danach ist es eine Callback-Funktion. So können wir eine Zeilenmethode verwenden, um die Filme zurück zu bekommen. Also können wir nur, für einen schnellen Test, Ich möchte nur hier zu Konsole anmelden. Also, um sicher zu sein, dass ich wirklich die Filme hier bekomme. Also lassen Sie uns auch den ersten Film nehmen, denn hier haben wir nur die Ergebnisse zurückgegeben. Danach gehe ich zum Konsolenprotokoll, okay, alles ist in Ordnung. Ich habe den ersten Film. Okay, jetzt ist unser Fall nur, um diese Hello World zum Beispiel durch den Filmnamen zu ersetzen . Wie ich das ursprüngliche Titelfeld verwenden möchte. Also möchte ich nur den Originaltitel drucken, damit ich sagen kann, original und unterstrichen eng. Okay, jetzt, wie Sie hier im Protokoll sehen, habe ich nur den Originaltitel. Okay, also irgendwie müssen wir diese HelloWorld durch die Methode oder etwas Wertvolles ersetzen , die ich erstellen kann. Zum Beispiel kann ich ihm einen Namen wie Titel geben. Und dieser Titel wird zum Beispiel zunächst einen Titel haben . Also, wenn ich diese Variable im Text hier verwenden möchte, also anstelle von Hallo Welt, kann ich es hier setzen, aber nicht nur Titel, aber wir können es mit gebogenen Klammern umgeben. Also hier kann ich eine gebogene Klammern tun. Und dann habe ich gescannt sagen hier zum Beispiel, Filmname. Okay, ich habe hier den Titel, Filmname ist hier gedruckt. Ok? Nun, wenn ich gehe und sage, okay, nicht Konsolenprotokoll, aber machen Titel gleich dem Filmnamen oder dem Originaltitel des Films. Wenn ich speichere, dann werde ich sehen, dass ich immer noch den ursprünglichen Namen bekomme. Und es ist, als wäre es nie hierher gegangen. Es ist wie Titel, es ändert sich nicht. Also, wenn ich die Anwendung speichern neu lade, ist es immer noch auf dem Namen des Films. Das Problem besteht darin, dass der Titel festgelegt wird, nachdem die Vorlage initialisiert wurde. Also vielleicht wird das dann ausgeführt nachdem der Titel Gut in der Vorlage initialisiert und gerendert und angezeigt wurde. Also müssen wir den Titel irgendwie aktualisieren. Sogar die Vorlage ist geladen. Also dafür müssen wir etwas namens Zustand React native verwenden. Staat ist sehr wichtig. Wir verwenden keine normalen Variablen wie diese. Wir benutzen den Staat. Also alles oder jede Variable, die Sie erstellen und in der Vorlage anzeigen möchten, müssen Sie es als Status verwenden, besonders wenn diese Variable nach einiger Zeit aktualisiert wird. Also, wie wir das tun können, um einen Zustand zu definieren , werde ich dasselbe verwenden. Also können wir sagen const. Und dann öffne ich ein Array, und dieses Array wird zwei Dinge haben. Zum Beispiel der Variablenname, den Sie erstellen möchten. Zum Beispiel werde ich ein Ziel wie einen Film geben. Und der zweite Parameter unseres zweiten Elements dieses Arrays wird den Film einstellen. Also möchte ich Set-Film machen. Dies wird also eine Methode sein, bei der ich in meiner Anwendung verwenden und sie hier verwenden werde , wenn die Daten bereit sind. So können wir hier gehen und sagen, Equal, um Zustand zu verwenden, verwendet Datum. Es wird von React importiert werden. Es ist also etwas Internes in React. Also werden wir dies wertvoll als Zustandsvariable verwenden , damit es aktualisiert werden kann, nachdem ich zum Beispiel das Rendern dieser Vorlage gemacht habe. Also, ich gehe hierher, ich benutze keinen Titel mehr. Ich sage nur, Satztitel oder Sets Film. Und dieser Film, wir werden nicht alle nur den Titel haben , weil wir einen Titel woanders verwenden werden. Also setzen wir den ersten Film, der vom Dienst zurückkehrt, um Film zu setzen. In diesem Fall, Film, haben wir einen Zustand oder es hat einen Wert des ersten Films, der vom Dienst zurückgegeben wird. Also, wenn ich hier zum Film gehe und es hier ersetze, dann speichern wir, werden wir einen Fehler bekommen, weil immer ein Zustand, den Sie brauchen, um es irgendwie zu initialisieren. Es ist nicht immer, aber es ist besser, es zu initialisieren. So kann ich es jetzt zum Beispiel mit einer leeren Zeichenfolge initialisieren. Dieses Datum oder dieser Film wird also als leere Zeichenfolge initialisiert. Natürlich werden wir sehen, wie wir das auf andere Weise umgehen können, aber wir gehen Schritt für Schritt. Also jetzt speichere ich, aber wir bekommen immer noch einen Fehler. Es sagt, dass Objekte in React untergeordnetem Element nicht gültig sind, da hier Film auf einen Film gesetzt ist und dieser Film ein Objekt ist. Wenn Sie sich erinnern, Postbote, dieser Film ist ein Objekt, enthält erwachsenen Autor, Sie einen Überblick, Popularität, et cetera. Also müssen wir eines der Felder dieses Films verwenden. Also werde ich hier sagen, dieser Film Punkt Originaltitel. Also will ich ein Feld aus diesem Film. Wenn ich also die Anwendung neu lade und speichere, werde ich sehen, dass ich den Titel des Films bekam. Okay, Sie können noch etwas hinzufügen. Zum Beispiel können wir hinzufügen, wie wir sagen können, lassen Sie uns die Felder hier in Bozeman Sprache überprüfen. Okay, wir können die Originalsprache nicht bekommen, und wir können sie hier anzeigen. Die unheiligen und dann E n. Natürlich können Sie auch mit den Saiten mischen, so dass Sie Filmnamen sagen können. Und es wird so etwas wie das Unheilige sein. Und auch die Sprache. Sie können sagen, es wird e n sein. Fügen wir ein weiteres Textfeld hinzu. Zum Beispiel, lassen Sie uns dieses duplizieren. Und zum Beispiel gehen wir zu unserer API und wir erhalten Veröffentlichungsdatum. Und wir gehen zum Veröffentlichungstermin, legen es hier. Und wir können hier geben Release. Und wir gehen und laden die Anwendung neu und wir werden sehen, das Veröffentlichungsdatum ist hier. In diesem Fall haben wir den Zustand verwendet, was sehr wichtig ist, weil der Zustand die Variable nach einiger Zeit oder dem Zeitraum automatisch setzt, ich meine, hier werden die Daten vom Server abgerufen . So zeigen wir die Daten aus der API zu unserer Anwendung an. 22. Effektive verwenden: Nach der vorherigen Vorlesung und vielleicht haben Sie bemerkt, dass die CPU Ihres PCs eine höhere bekam und es ist eine Menge Ressourcen wegen der Änderung, die wir zuvor gemacht. Also habe ich getrennte Vorlesung dafür gemacht, weil es sehr wichtig ist , bevor wir unser Projekt beginnen, dieses Problem zu kennen. Wie Sie hier sehen, haben wir unsere Movi App in meinem Aktivitätsmonitor oder im Task-Manager unter Windows, Sie werden sehen, dass es 183% der CPU verwendet. Dies liegt daran, dass wir die Staatsverwaltung machen, ohne die Effekte zu verwenden. Affect ist etwas, mit dem Sie Nebenwirkungen in einer Funktionskomponente ausführen können, was wie die Beziehung zwischen dem DOM und auch diesem Zustand Ihrer Anwendung widerspiegelt . Es ist sehr wichtig, wenn Sie einige asynchrone Methoden verwenden und Sie Stände sitzen oder eine Variable setzen, Sie Dinge Estate, Sie müssen Effekte verwenden. Also, wie können wir diese Effekte verwenden? Normalerweise können Affekte verwendet werden, nachdem die Zustandsvariablen definiert wurden. So gehen Sie einfach hier und Sie können genau sagen, wie wir hier gemacht verwendet Zustand, Sie werden Effekt verwenden. So können wir sagen, verwenden Sie Effekt. Ich erkläre es in einfacheren Worten, wenn Sie mit React nicht vertraut sind. Also jetzt haben wir diesen riesigen Effekt. Es wird eine Callback-Funktion oder Callback-Methode haben, die die API, die ich erhalten habe, oder den Dienst , den ich erstellt habe, um einen Film zu setzen und für mich ausführen würde . Also immer mit diesem FH King Einrichten Abonnement und manuelle Änderungen im Wohnheim mit React erforderlich, um Effekte zu verwenden. Es ist also besser, dass sie keine unbegrenzte Schleife zwischen dem DOM und auch dem Zustandsmanagement in React haben. Die Effekte laufen also nur einmal, um sicherzustellen, dass wir die Daten nur einmal erhalten. Also auch dafür müssen Sie einen Parameter übergeben, der am Ende als zweiter Parameter OF US-Effektfunktion kommt , die ein leeres Array sein wird. Wenn Sie also die Daten aktualisieren oder diese asynchrone Funktion mehrmals aufrufen möchten, können Sie hier die Zeit angeben. Ich möchte meine Daten alle 1 Sekunde aktualisieren. Sie werden also in Ihrer Anwendung sehen, dass diese Daten alle 1 Sekunde aus der Datenbank oder aus der API abgerufen werden. Moment mussten wir nur einmal hingerichtet werden. Und Nutzungseffekt kommt auch von reagieren genau, wie wir Immobilien nutzen werden. Speichern wir das erneut und laden Sie die Anwendung neu. Und Sie werden jetzt sehen, wie sich mein Aktivitätsmonitor beruhigt. So, wie Sie hier sehen, ist die Film-App jetzt mit 0,3% des Prozessors. Auf diese Weise tun wir das Richtige. Sei vorsichtig. Sie müssen immer die Effekte verwenden, um die richtige Verwaltung der Zustände zwischen dem DOM und Ihrem Zustand in der Anwendung von React Native durchzuführen, wenn Sie die Leistung Ihrer Anwendung überprüfen möchten. Zum Beispiel, um zu sehen, wie viel Speicher es verwendet und wie viel, zum Beispiel, was sind die Anforderungen gehen dort. Es ist also besser, das Tool zu verwenden, das hier mit den Entwicklertools zur Verfügung gestellt wird. So können Sie Ihr Netzwerk und auch Ihre Leistung überwachen. Also müssen Sie nur auf dem Telefon Control D drücken und auf Control D sehen Sie einen kurzen Inspektor. Also mit Show Inspector, werden Sie mehrere Dinge sehen. Einer von ihnen ist Netzwerk. Wenn ich zum Beispiel die Anwendung neu lade, werde ich sehen, dass meine Anwendung eine Anfrage an diese API sendet. Und dann, wenn Sie darauf klicken, werden Sie Details davon sehen. Es ist also sehr wichtig, dies zu verwenden, um zu wissen, was dort passiert. Also möchte ich Ihnen zeigen, wie, was passieren wird, wenn ich diese Methode setze, für die ich die Daten außerhalb der Effekte aufrufe, wie wir es gemacht haben, wie es vorher gemacht wurde. Und ich werde Ihnen zeigen, wie das geht. Unbegrenzte Zeiten. Wenn ich darauf klicke, siehst du, dass es unbegrenzt ist. Es fragt nach Daten vom Server, was völlig falsch ist. Lass es uns schnell aufhören, hier kein Problem zu haben. Also jetzt, wenn wir sehen, haben wir nicht mehr diese Schleife. Auch gibt es noch etwas, das Sie Control D bis C auch den Leistungsmonitor drücken können. Es wird Ihnen immer zeigen, wie viel Anwendung oder Ihre Anwendung hier ausgeführt wird, was sehr hilfreich und vorteilhaft für Ihre Anwendung ist . So können Sie immer beobachten, wie viel RAM verwendet wird und wie viele andere Daten, die für Sie während der Entwicklung sehr hilfreich sind. Wenn Sie über Affect-Hook wissen möchten , der von React kommt, gehen Sie einfach zur React js.org-Dokumentation und dann zählen Sie Hoax-Effekt. Sie werden es mehr verstehen, wenn Sie nichts über React wissen. Aber in diesem Fall können Sie nur bedenken, dass der Effekt ihren Status und ihre Funktionen verwaltet und die Daten zwischen dem DOM und auch der React Native Anwendung abruft . 23. Dienstleistungen Fehlerbehandlung: Okay, was ist, wenn wir ein Problem mit unserer API haben und der Server nicht reagiert. Also wollen wir eine Nachricht an den Benutzer irgendwo hier anzeigen, um zu sagen, dass okay, es gibt Fehler im Server. Um das zu tun, ist es sehr einfach. können wir sehr schnell umsetzen. Also zuerst müssen wir sehen, ob wir Fehler haben oder nicht. Also nach dann, die dann Methode, wie Sie hier sehen, können wir so etwas wie Fangen und Fangen haben. Sie können die Fehler abfangen, die in Ihrer API auftreten können. Also werde ich hier Fehler sagen, und es wird genau eine Callback-Methode sein. Also diese Callback-Methode, kann ich etwas tun, wie den Fehler zu konsolen oder die Fehlermeldung ersetzen. Bisher werde ich eine andere Zustandskonstante verwenden, die als Fehler bezeichnet wird. Also wird dieser hier sein, Irrtum. Und dann kann ich sagen, set-error. Und auch, wir werden den Staat benutzen. Also dafür werde ich sagen, dass set-Fehler hier sein wird, der Fehler selbst. Danach werden wir dem Benutzer eine Fehlermeldung anzeigen , wenn ein Fehler abgefangen wird. So weit, dass wir zum Beispiel Text-Tag verwenden können , genau wie wir es zuvor getan haben. Ich mache die Dinge einfach. Du kannst es verstehen. Also hier werden wir einen Text haben und dann können wir wie Fehler im Server anzeigen. Und Sie können auch etwas Styling darauf machen. Du machst nur einen Stil. Und dieser Stil, den Sie sein können, kann es ein Objekt sein, wie Sie hier sehen. Es ist genau das gleiche wie die Standardeinstellung. So kann dieser Stil auch Farbe sein. Wir können Farbe geben, und diese Farbe wird zum Beispiel rot sein. Und lassen Sie uns speichern, um zu sehen, dass alles in Ordnung ist, okay, wir haben Fehler im Server. Also möchte ich diese Nachricht zeigen, wenn ein Fehler vorliegt. Also, wie können wir das tun? Also zuerst, machen Sie Objekt. Also hier müssen Sie zwei Klammern öffnen. Und diese Klammern enthalten wir die Zustandskonstante, die wir zuvor erstellt haben. Und dann können Sie sagen und fügen Sie in dieses Objekt, Sie setzen diesen Text, also schneiden Sie ihn und legen Sie ihn hier. Also, wenn es einen Fehler gibt, dann zeigen Sie diesen Text. Das ist, als ob es Fehler und Text gibt, dann zeige es. So so. Also, wenn wir speichern und wie Sie sehen, habe ich einen Fehler bekommen. Es besagt, dass Textzeichenfolge innerhalb einer Textkomponente gerendert werden muss , da dieser Fehler als Zeichenfolge initialisiert wird, also müssen wir ihm einen Anfangswert geben. Der Fehler ist also standardmäßig false. Als ob wir standardmäßig keinen Fehler sehen. Aber wenn diese Skizze wird den Fehler aktualisieren und setzen Fehler Fehler zu sein. Und dann wird es einen Wert haben und es wird etwas sein, das hier gerendert werden kann. Dafür können wir dies einfach auf false initialisieren. Und dann, okay, alles funktioniert gut. Wir haben keinen Fehler. Lassen Sie uns Fehler in unserer API machen, zum Beispiel, ich werde diesen Brief hier entfernen, die b. Also, wenn ich Speichern, Ich werde sehen, dass ich auf oder auf dem Server. Wenn ich es entferne, wird der Fehler bleiben, weil wir nicht drei geladen haben, die vollständig die Anwendung. Wir müssen ihren Zustand leeren. Hier verwenden wir nur ein heißes Reload. Hot Reload macht nur die Dinge, die im DOM aktualisiert werden. Aber wir müssen auch die Anwendung neu laden, um das ganze Datum hier neu zu laden. Also, wie können wir das tun? Sie müssen also nur noch einmal zu den DevTools gehen. Und dann wollen wir die Anwendung komplett neu laden. So können Sie auf Control D klicken und dann haben Sie etwas hier, neu laden. Auf diese Weise laden Sie die gesamte Anwendung erneut. Und Sie werden sicherstellen, dass Sie nicht aktualisieren oder diesen Fehler erneut haben, da wir die richtige API haben. Dieses Reload bedeutet also, dass ich die Anwendung öffne. Der Benutzer kommt zu meinem Telefon und öffnet die Anwendung zum ersten Mal. Das ist also die Bedeutung dieses Reload. Es ist sehr wichtig zu wissen, dass Sie Ihre Anwendung neu laden können oder Sie auch drücken können. Kontrollieren Sie unsere Steuerung werden Ihnen helfen, die Anwendung völlig neu zu laden, ohne das Dev Tools-Menü zu öffnen. Also, wenn wir hier einen Fehler machen und speichern, okay, werden wir den Fehler haben. Lassen Sie uns die Anwendung neu laden. Okay, wir haben Filmnamen Sprachbäume, sie sind leer, also haben wir hier keine Daten, weil unsere API falsch ist und es uns einen Fehler auf dem Server gibt. All dies werden wir in den nächsten Vorlesungen während unseres Kurses schön machen. 24. Erstes Überarbeitung: Okay, in dieser Vorlesung, lassen Sie uns etwas Refactoring machen. Zum Beispiel kommen immer die Dienste, die Daten vom Server erfassen, so etwas, in separater Datei. Also werde ich hier einen neuen Ordner erstellen. Wir können es im Stammverzeichnis des Ordners machen. So können wir einen Ordner erstellen, können wir IT-Services anrufen. Und diese Dienste werden meine Dienste enthalten, die ich hier erstellen möchte. Also habe ich einen Ordner erstellt und dann haben wir eine Datei. Wir können es Dienste dot js nennen. Innerhalb der Dienste werde ich den Aufruf dieser API haben, zum Beispiel werde ich diese nehmen und zu den Diensten gehen und es hier setzen. Also, was ich brauche, um Achse zu importieren. Also müssen wir auch diesen Import kopieren und wieder zu unseren Diensten gehen und ihn dann hier ablegen. Also jetzt haben wir populäre Filme bekommen, aber Get-go populäre Filme ist jetzt undefiniert hier. Also müssen wir es importieren. Also zuerst muss ich diese Methode exportieren. Seien Sie also vorsichtig, dass Sie immer die Dinge exportieren müssen, um sie in anderen Dateien zu verwenden. Also hier werde ich auch importieren und ich werde diese Methode importieren. Also hier ist das die Methode. Und dann sage ich von, und dann wird das Punkt sein, als ob ich im aktuellen Pfad von app.js bin und dann werde ich Dienste sagen, und dann würde ich die Service-Datei auswählen. Auf diese Weise habe ich die Methode auf die richtige Weise importiert. Danach, Lasst uns alles retten. Also speichere ich die Dienste hier und speichere auch ihre Dienste in der app.js. Jetzt stellen wir sicher, dass alles gut funktioniert. Wir haben unsere Dienste getrennt. Also ein weiterer Schritt, den wir hier tun können, dass wir einige Kommentare machen können, fügen wir Seite wie ein Kommentar hinzu. Wir können sagen, diese Methode zu erklären. So zum Beispiel kann ich sagen, populäre Filme zu bekommen. Auf diese Weise können Sie anderen Entwicklern erklären , dass dies Service ist, um populäre Filme zu bekommen. Außerdem können wir etwas Großartiges machen, wie wir nicht all diese Nyquist hinzufügen müssen, wir werden in Zukunft weitere Dienste erstellen, so dass wir diese URL nicht mehrmals wiederholen müssen. Dafür ziehe ich es vor, etwas wie eine Variable zu verwenden. Und wir können diese Variable überall verwenden. Also kann ich hier Const sagen, und dann kann ich dem wertvollen einen Namen geben. Wir können API URL sagen. Bei dieser API-URL werden wir dieses Ding hier haben. Danach können wir diese API-URL verwenden, wie wir hier sehen. Und dann können wir es mit diesem Film-Array kombinieren. Also, wie wir das tun können, müssen wir nur etwas wie ein Backticks öffnen, dieses Zeichen und diese Zeile, die Sie als Dollar verwenden können. Und dann mit diesem, da der Anwalt Variablen setzen kann, die in derselben Datei sind. So können Sie hier API-URL haben und innerhalb dieser API-URL oder danach können Sie Schrägstrich sagen. So würde es hier als eine Zeichenfolge betrachtet werden. Also all das, was hier geschrieben wird, kann es eine Zeichenfolge sein, also kann ich all diesen Teil kopieren und diese Zeichenfolge auch entfernen und hier einfügen. Auch der Schlüssel ist sehr schön, es getrennt zu haben, auch wertvoll. So können wir auch hier einen Schlüssel erstellen. Wir können es eine Konstante nennen. Und dann API-Schlüssel unserer API, und wir geben es innerhalb dieser Zeichenfolge. Also hier haben wir API-Schlüssel, oder ich muss diese nur wieder als Dollarzeichen aufrufen. Und danach werde ich den API-Schlüssel auf diese Weise setzen. Also werde ich sicherstellen, dass die URL. Also die URL, die bereits wie mit diesem Präfix erstellt wurde, wie wir in unserer API sehen. Und dann können wir Schrägstrich haben und dann mehr v populär. Was wollen wir bekommen? Weil wir populär werden. Wir würden Familienfilme bekommen, wir würden kommende Filme bekommen. Es ist die Kurve. Und dann werde ich ein Fragezeichen geben, um den Parameter des API-Schlüssels zu übergeben , den ich hier im API-Schlüssel gespeichert habe. Also lassen Sie uns alles speichern und überprüfen, ob alles gut funktioniert. Lassen Sie uns Hot Reload oder Full Reload machen. Okay, Nett. Wir haben hier kein Problem. Also, jetzt haben wir die Dienste in separater Datei und Sie können eine andere Methode erstellen. Zum Beispiel, hier können wir die beliebten Filme machen, wir können Pop kommende Filme machen. Zum Beispiel wird die kommende Filme-API mit kommenden folgen. Und das ist bereits, ich weiß aus der API-Dokumentation dieses Films. Also können wir hier sagen, kommen Filme, weil wir es auch in unserer Anwendung verwenden werden. Lassen Sie uns auch andere APIs überprüfen. Speichern Sie zum Beispiel hier. Und nehmen wir eine andere APIs, die wir aus der Dokumentation haben können. Also gehe ich wieder zur API-Dokumentation der Filmdatenbank. Also lassen Sie uns auch ein wenig hineinzoomen, damit Sie es gut sehen können. Also hier gehe ich zum Beispiel ins Kino. Wo ist es hier, Filme. Lassen Sie uns also einige APIs bekommen, die in unserer Anwendung verwendet werden. Zum Beispiel werden wir populär und kommende haben, wie ich Ihnen sagte, vielleicht können Sie auch Top-bewertet bekommen. Nehmen wir eine Fernsehserie. So haben wir zum Beispiel ein Team und bekommen auch das beliebte. Also lasst uns populär werden. Und hier ist es genau das Gleiche. Es ist also genau wie in den Filmen, aber wir müssen nur hier hinzufügen. Also kopieren wir die beliebten Filme ein und dann haben wir hier eingefügt. Und wir können sagen, populäre TV ist d dt von Filmen. Und hier werden wir auch TV haben, wie wir es machen können, diese Methode bekommen populäre TV. Und wir ändern dies nur zu TV ist Td von Filmen, wie wir die Dokumentation gesehen haben. So sparen wir, jetzt haben wir den beliebten Fernseher. Auf diese Weise haben wir alle APIs, die wir brauchen. Vielleicht brauchen wir mehr, wie wir in der Anwendung sehen werden. Also werden wir sie zu den Diensten hinzufügen und wie wir Factoring hier bearbeitet haben. Also im nächsten Abschnitt, oder vorerst für diesen Abschnitt, haben wir gelernt, wie man die API verwendet. So haben wir gelernt, wie man Daten vom Server erfasst und auf unserem Telefon anzeigt. Und dann werden wir später sehen, wie man die Dinge stylt. Wir werden mit der Homepage beginnen und wir werden die erste Seite unserer Anwendung im nächsten Abschnitt erstellen . 25. Erstellen von Home: Okay, jetzt in diesem Abschnitt werden wir sehen, wie wir die Homepage-Komponente erstellen können. Wie Sie hier sehen, bin ich in der Lage, über die Filme durch einen Schieberegler zu navigieren , wo ich auf der Homepage erstellen werde. Und auch, ich habe mehrere Schieberegler für jede Art von Filmen. Zum Beispiel, wie Sie hier sehen, haben wir beliebte TV-Show, wir haben Familie, wir haben Dokumentationen, alle von ihnen, wir nennen sie in den Diensten. Also habe ich diese laufende Version auf meinem Gerät. Ich benutze Visier, aber natürlich werden wir das umsetzen und unsere Codierung fortsetzen , um dieses Niveau zu erreichen, wie Sie hier sehen. Zunächst einmal werden wir eine Homepage-Komponente erstellen. Und diese Homepage-Komponente, werden wir es in App-Komponente oder zum Einstiegspunkt unserer Anwendung nennen. Also, wenn ich die Anwendung öffne, werde ich das sehen. Beginnen wir jetzt mit der Erstellung der Homepage-Komponente. Okay, am Anfang möchte ich all diesen Code, den wir zuvor erstellt haben, in eine neue Komponente verschieben. Wir nennen es eine Homepage-Komponente. zunächst Lassen Sie unszunächsteine Datei oder einen Ordner erstellen. Wir nennen es Bildschirme. Also klicke ich hier auf dieses Symbol und ich sage, dass ich Bildschirme will. Und wenn Sie sehen, wie es manchmal in einem anderen Ordner erstellt wird, klicken Sie einfach wieder weg und klicken Sie dann einfach auf app.js, um auf der Stammebene zu sein. Dann können Sie den Ordner auf der Root-Ebene erstellen. Also werde ich diesen Namen dieses Ordners geben Bildschirme sein. Und in diesen Grüns werde ich eine neue Datei erstellen. Und diese Datei wird home dot js genannt. So können wir sagen, das ist die Homepage meiner Bewerbung. Also, wenn Sie sich erinnern, bevor, Ich sagte Ihnen, eine Erweiterung zu installieren ist sehr wichtig für die Beschleunigung unseres Codes. So möchte ich zum Beispiel schnell eine Komponente erstellen. Mit React Native Snippets Tools können Sie also auch eine Komponente erstellen. Also möchte ich Ihnen das zeigen. Wenn Sie also zu den Erweiterungen gehen, die wir zuvor installiert haben, werden Sie viele Kommentare sehen. Einer von ihnen, wie wir zustandslose Komponente Return erstellen können. Also werden wir dieses Format verwenden, denn wie Sie hier mit React sehen, haben wir eine Komponente und dann haben wir eine Rückkehr. Hier können wir also unsere Variablen definieren, weil ich Ihnen die beiden Fälle zeigen möchte. Also, wenn Sie hier gehen, werden wir sagen, zum Beispiel, lassen Sie uns diese eine zustandslose Komponente erstellen. Also werde ich als L sagen und es wird automatisch für mich abgeschlossen. Also würde ich eine Komponente erstellen, aber in diesem Fall habe ich keine Rückkehr, also kann ich meine Variablen nicht definieren. Einfach. So können wir jetzt eine andere Komponente erstellen, die mit S L Rückkehr, zustandslose Komponente Rückkehr ist. Damit würde es für mich eine Komponente schaffen und auch ob Rückkehr und alle Dinge in jeder Komponente auch. Es ist sehr wichtig, React zu importieren. Also gibt es auch einen Kommentar dafür. Also in dieser Erweiterung, wenn Sie dorthin gehen, siehe IMR-Import React. Also, wie wir das schnell machen können. Also setzen Sie hier einfach ich, Mr. und dann wird es für Sie schnell reagieren. Also jetzt lassen Sie uns den Code von der App und dann auf die Homepage verschieben. Also, wenn Sie sich erinnern, haben wir in der app.js, definieren wir einige wertvolle. Lassen Sie uns alle bewegen. Machen wir einen Darm, als ob wir sie vor der Rückkehr komplett schneiden können. Also all diese Variablen vor der Rückkehr, werden wir sie nehmen und sie hier vor der Rückkehr unserer Home-Anwendung oder Homepage oder Hong Komponente platzieren . Jetzt werden wir alles nehmen, was in dieser Ansicht ist. So können wir auch all das nehmen, alles, was wir die ganze Sicht nehmen können. Also alles, was in dem Er hat app.js ausgeschaltet. Also gehen wir hier und wir fügen es in eine Rückkehr der Home-Komponente ein. Also fügen wir alles hier ein. Und wir vergessen nicht, dass wir die Importe kopieren. Lassen Sie uns sie jetzt kopieren, nicht bekommen, weil wir später einige von ihnen brauchen. Also, jetzt werde ich alle von ihnen kopieren und sie hier einfügen. Wenn ich also auf Speichern OK klicke, wird es automatisch formatiert, weil ich hübscher, schöner. Jetzt gehe ich zu AS und dann speichere ich, dann würden wir keinen Fehler unerwarteten Token bekommen weil wir etwas in diese App legen müssen. Wir müssen eine Ansicht setzen, damit wir auch diese Ansicht, die hier mit der Hello World Anwendung war, setzen können. Wenn Sie sich erinnern, kam es mit etwas Styling. Also lassen Sie uns das gleiche kopieren und es hier hineinlegen, die Ansicht, und die Ansicht wird geschlossen, wie Sie hier sehen. Danach sparen wir, okay, alles ist in Ordnung. Aber jetzt haben wir leere app.js. Also müssen wir hier die Home-Komponente nennen, das Haus, das wir hier geschaffen haben. Also, dafür können wir einfach als Tag nach Hause tippen. Und wie Sie sehen, ist es mir vorgeschlagen, es von Bildschirmen zu Hause zu importieren. Auf diese Weise kann ich diese auch importieren. Und wie Sie hier sehen, haben wir Import Startseite von Bildschirmen zu Hause. Wenn ich speichere, erhalten wir einen Fehler. Dieser Fehler kommt von der Home-Komponente, wie Sie sehen, da sich die Home-Komponente, falls Sie sich erinnern, im Ordner Bildschirme befindet. Also, wenn wir die Waren populären Film-Service importieren, müssen wir nicht auf der gleichen Ebene des Ordners sein, weil wir hier in diesem grünen Ordner auf JS ist innerhalb von Bildschirmen. Also müssen wir einen Schritt nach oben gehen und dann rufen wir den Service an. Also muss ich nach oben ziehen. Und dann gebe ich zu Dienstkomponente oder Dienstordner ein, und dann rufe ich die Dienste JS auf. Um sicher zu sein, dass Sie all dies löschen können und Sie Punkt und dann Schrägstrich setzen. Und es würde für Sie den Ordner vorschlagen. So werden Sie sehen, dass es keinen Ordner gibt. Also müssen Sie eine Ebene nach oben gehen. Wenn Sie also eine Ebene nach oben gehen, haben Sie Zugriff auf die Ordner, die wir auf Ebene oben dieser Home-Komponente erstellt haben. Also gehe ich zu Services und dann Schrägstrich und dann rufe ich die Dienste an, die Dienste dot js. Also, jetzt ist alles in Ordnung für die Home-Komponente. Und wie Sie sehen, hat die app.js die Home-Komponente in dieser Ansicht aufgerufen. Und dann wird es genau so gemacht, wie wir es hier erstellt haben. Dies ist also eine Möglichkeit, wie Sie Ihre Anwendung teilen können. Sie können sagen, zum Beispiel, Ich werde Home-Bildschirm haben, Ich habe Bildschirm gesucht, Ich werde auch ein Detail des Filmbildschirms haben. Auf diese Weise werden wir in der Lage sein, unsere Anwendung zu teilen. Und auch, Sie müssen sich daran erinnern, dass, wenn Sie nicht alles bekommen, was Sie nicht Stil hier setzen, vielleicht werden Sie nichts sehen, wenn Sie nur Ansicht setzen. Denn jetzt können Sie nicht sehen, weil alle Elemente hier sind. Also werden wir später über Styling sprechen. Lassen Sie uns die Dinge wie diese jetzt geben. Und wir sparen einfach so, wie es ist. Und am Ende entfernen wir die Importe, die wir nicht brauchen. Zum Beispiel brauchen wir diesen nicht. Wir brauchen nicht an, gut die Effekte und wir brauchen nicht diesen, der Text genannt wird. Also lasst uns alles retten. Jetzt sind wir grün und wir können gut arbeiten. In der nächsten Vorlesung werden wir sehen, wie wir den Schieberegler, die erste Seite oder den Schieberegler, der oben ist,erstellen können oder den Schieberegler, der oben ist, , der Bilder meiner Filme enthält. 26. Neueste Bilder: In diesem Vortrag werden wir sehen, wie wir diesen Schieberegler erstellen können. Wir würden die neuesten Bilder von ihren Filmen, von den neuesten Filmen. Und wir werden nur einen Schieberegler machen, so dass es automatisch wischen kann, so dass die Leute, wenn sie meine Anwendung geöffnet, können sie Bilder von neuesten Filmen sehen. Also für diesen Schieberegler gibt es eine Komponente, die React Native Schieberegler genannt wird. Wir werden es benutzen. Verwendung von Komponenten erfordert daher immer die Installation einiger externer Bibliotheken. Dafür installieren wir eine Bibliothek, die diesen Schieberegler enthält und wir werden ihn in unseren Homepage-Komponenten verwenden. Also lasst uns zu unserem Code übergehen. Es gibt eine Bibliothek, die React Native Bild Schieberegler genannt wird. Also lasst es uns auf Google setzen. Wir können sagen React Native Bild, Schieberegler Bücher. Also all dieser Name, Sie suchen nach ihm und Sie werden es in der NPM-Bibliothek haben. Also jetzt gehen wir zu dieser Bibliothek und wir können Dokumentation darüber sehen und wie wir sie verwenden können. Wie Sie sehen, haben wir hier die Bibliothek. Also zuerst müssen wir es installieren. Also gehen wir zu npm, installieren React Native Image Schieberegler Box. Also lassen Sie uns dorthin gehen und wir werden das Terminal öffnen und dann fügen wir unseren Kommentar ein. So npm installieren, React Native Image Schieberegler Box. Also, bis die Installation fertig ist, werfen wir einen Blick hier. So können wir vor allem einige Komponenten haben. Und diese Komponenten können wir es in unserer Vorlage verwenden. Es gibt auch ein Beispiel. So können Sie hier sagen, importieren Schieberegler Box. Wir müssen diesen Schieberegler in unseren Code importieren. Und dann schaffen wir eine Ansicht. Und diese Ansicht, die ein Schieberegler sein wird, enthält Array von Bildern. Also gehen wir auch, um dieses Array von Bildern zu bauen. Also hier wurde unsere Bibliothek installiert. Gehen wir dorthin und zur Dokumentation. Und wir werden zuerst sehen, wie wir brauchen, um Schieberegler aus dem nativen Bild Schieberegler Box zu importieren. Also gehen wir hier und in der Homepage-Komponente, wir werden diese Schieberegler Box importieren. Und danach schließen wir das Terminal oder verstecken es irgendwie, damit wir hier mehr Platz haben können. Und dann werden wir sehen, wie er diese Komponente benutzt. Also in Folie dort, eine Box in React Native, er hat Schieberegler evoziert Bilder. Es ist also erforderlich, dass wir ein paar Bilder haben. Also lassen Sie uns den Teil entfernen, der zuvor diesen einen Filmnamen erstellt hat und all das Zeug. Also lasst uns sie entfernen, damit wir nur die Ansicht behalten können, weil ich dir die Ansicht gesagt habe, es wird wie ein div für mich, ein div oder ein Container sein, der alles darin enthalten wird. Also gehen wir dann zu ihrer Dokumentation und wir nennen diese Zeile. Also sagen wir, Folie dort geht Bilder. Wir gehen wieder. Und wir nennen diese Folie dort Box, wie wir hier importiert haben. Also lasst uns das retten. Wir werden in den Simulator und Fehler bekommen. Aber keine Sorge, denn wir haben hier nicht die richtigen Bilder. Also müssen wir alle die Bilder erstellen lassen. zunächst Dazu müssen wirzunächsteine Zustandsvariable erstellen. Und diese Zustandsvariable, wird es mit den Bildern der kommenden Filme gefüllt werden. Also nennen wir diese Konstante nicht Film. Wir können es zum Beispiel Filmbilder nennen. Also müssen wir auch dies einstellen, um Filme oder Filme Bilder oder mehr dieser Bilder zu sein. Auf diese Weise haben wir die richtige Benennung. Und jetzt werden wir das benutzen, damit wir beliebte Filme bekommen können. Aber in unserem Fall wollen wir uns die kommenden Filme schnappen. Also haben wir einen Service vor, wie Sie sich erinnern, wir haben gerade angerufen bekommen amorph. Also lasst uns sie holen. Und ich werde diese behalten, diese Methode behalten. So werden wir einen weiteren Aufruf für halten kommende Filme erstellen. Und diese halten kommende Filme, wir werden es wieder von diesem Airless nennen. Auf diese Weise müssen wir es auch importieren. Und es wird genau das Gleiche sein. So werden wir auch dann brauchen und fangen. So können wir auch die gleiche Syntax verwenden, die wir hier für populäre Filme erstellt haben, aber wir haben keinen Film mehr gesetzt. So können wir diesen Teil entfernen wird kein AdWords haben. Also werden wir später zu diesem Dienst zurückkommen, wenn wir die anderen Schieberegler verwenden oder erstellen. Also für jetzt werden wir Filme Bilder hier gesetzt haben, aber wo wir es benutzen werden. Also brauchen wir hier irgendwie Bilder. Wir können die Filme nicht haben, den ganzen Film. Also, wenn Sie sich erinnern, werde ich die Filme mit ihrem Rückruf hier zurückgeben. So können wir diesen Callback verwenden, um eine Konstante zu erstellen. So werde ich Konstante erstellen, Ich kann ihm einen Namen geben, der Filme Bilder genannt wird. Aber dieses Films Bilder nicht einen Konflikt mit diesem Namen haben. Wir würden ihm auch ein Suffix geben. Wir können es nicht als Array bezeichnen. Auf diese Weise wird es mit einem leeren Array initialisiert. Also, wenn ich die kommenden Filme bekomme, habe ich nichts in diesem Array. Also werden wir dieses Array füllen. Also werden wir Filme sagen. Bilder, Array-Punkt-Push. Also werden wir Film für Film schieben. Auf diese Weise werden wir hier mehrere Filme haben. Also davor werde ich hier zu einer anderen Zeile gehen und ich werde sagen, Filme Punkt für jeden. Aber das können wir schreiben, kein Problem. So können Sie Filme für jeden haben. Denn wenn Sie sich erinnern, sind wir von diesem bevorstehenden Dienst zurückgekehrt. Wir haben immer Daten Punkt-Ergebnisse zurückgegeben. Und wenn wir zu Postman gehen, wie Sie sich erinnern, haben wir hier in den Array-Ergebnissen. Also alle von ihnen mit Komm her. Also gehen wir zurück zu unserem Code und dann werden wir genau die gleiche Syntax hinzufügen. Also für jeden Film im Film-Array, das von der API zurückgegeben wird, bekomme ich einen Film. Von diesem, für jeden, bekomme ich einen Film und diesen Film oder eine Callback-Funktion, wo es, ich kann es verwenden, um diesen Film von dieser Callback-Funktion zu verwenden. Also kann ich dann dieses Film-Array bewegen, um den Film zu schieben , den ich hier bekam. Aber wir wollen den Film nicht an die Stelle schieben, wo man nur das Bild des Films schieben muss. Also, wenn wir wieder zu Postman gehen, um zu sehen, was der Inhalt dieser API ist, Lassen Sie uns ersten Film nehmen, zum Beispiel, wie ich Ihnen sagte, Ergebnisse enthalten mehrere Filme. Also lasst uns das erste Ergebnis bekommen. Eines dieser Felder haben wir den Weg gestärkt. Und in diesem Plakatpfad bekomme ich das Bild des Films. Also lasst uns das hier holen. Ich werde hierher gehen und mehr sagen. Wir haben keinen Plakatpfad. Also schieben Sie für mich Filmplakat-Pfad. Und danach werden Filme Bilder Array gesetzt Filme Bilder werden. Also müssen wir diese Variable oder diese Datumsvariable, die wir erstellt haben, setzen. Also hier werde ich sagen, Filme Bilder Array wird in Filmen Bilder sein. Also lasst uns alles retten. Jetzt haben wir unseren Code formatiert, und auf diese Weise werden wir in der Lage sein, Filme Bilder zu verwenden, wo im Schieberegler. So werden wir hier Slider Box Bilder haben. Es werden die Filme Bilder sein. Also filmt das Feld Bilder. Speichern wir das und gehen Sie zu unserem Simulator. Und wir werden sehen, dass wir nichts sehen können, weil wir die Partner brauchen. Wir brauchen auch den vollen Weg. Wenn wir zum Postboten gehen, werden wir nur einen Teil des Bildes sehen, wie nur der Bildname. Dies muss also etwas vorangestellt werden. Wenn wir auf die Dokumentation des Films gehen, der API gehorcht, gibt es etwas hier nach der Einführung, die Bilder genannt wird. Im Inneren dieser Bilder wird es uns zeigen, wie wir diese Bilder bekommen können, denn wie ich Ihnen sagte , dass Boston Bad nur den Bildnamen zurückgibt. Um also den vollständigen Pfad des Bildes zu erhalten, müssen Sie ihm den Link voranstellen, wo Sie dieses Bild erhalten. Lassen Sie uns also unserem Bildpfad diesen Namen vorstellen. Also, wenn ich die Elemente auf diese Weise in das Array schiebe , muss ich nur den Pfad auch drücken. Also können wir hier sagen, drücken Sie einfach diesen Link, den wir zuvor kopiert haben, und dann sagen wir Plus. Sie können dies also als Präfix sagen. Und dann der Plakatpfad, der mit dem Film kommt, wie Sie hier sehen. Und es kommt immer mit einem Schrägstrich. Sie müssen also keinen Schrägstrich in den Code einfügen. So können wir diesen Schrägstrich entfernen, denn auf diese Weise erhalten Sie zwei Schrägstriche. Danach können wir alles speichern, zu unserem Simulator gehen. Und wie Sie sehen, haben wir hier die Bilder. Jetzt bekommen wir die neuesten Bilder von den neuesten Filmen oder kommenden Filmen. 27. Styling von Filmen Bilder: Okay, jetzt in diesem Vortrag werden wir sehen, wie man diesen Schieberegler stylt. Zunächst einmal, wenn Sie hier sehen, dass wir einige beschweren sich von ES lint, was für mich die Fehler in meinem Code wie live zu beheben ist, habe ich über ES zuvor verlinkt gesprochen. Also ES benannt beschwert sich, dass wir die Stile irgendwo außerhalb der Komponente setzen müssen. Dies ist wie Codierungsstil, wie noch Inline-Stile. Dies wird als Inline-Stil bezeichnet. Also, wenn Sie Inline-Stil ES Flusen haben, beschweren wir uns darüber. Es ist also besser, sie irgendwo außerhalb dieser Komponente zu platzieren. Also, wie können wir das tun? Wir können nicht außerhalb der Home-Komponente definieren, wie Sie hier sehen. Draußen können wir eine Konstante definieren. Wir nennen es Stile im Allgemeinen, wie normale Stile. Und diese Stile werden von Stylesheet und Stylesheet-Komponente kommen. Wir müssen es von React Native importieren. Also werde ich hierher gehen und ich werde das React Native Stylesheet von React Native aufrufen. Also, wenn wir jetzt hierher zurückgehen, werde ich eine Methode in diesem haben, die create genannt wird. Also werde ich eine Stylingdatei oder mehrere Stile erstellen, die ich in meiner Komponente verwenden kann. Es ist wie für uns im Falle von HTML, wie eine CSS-Datei. Und diese CSS-Datei enthält Klassen, so dass ich sie in meinen Komponenten oder in meinen HTML-Tags verwenden kann. So, wie wir eine Klassen erstellen können, nennen wir es jetzt eine Klasse. So wie wir ein Objekt haben und dann definieren Sie Ihre Klassen. Zum Beispiel, für diese Ansicht, werde ich es einen Stil Container oder Schieberegler Container nennen. So können wir hier Slider Container haben. Und dieser Schieberegler Container wird einige Eigenschaften haben. Unsere hier genau erwähnt. Also kann ich das alles abschneiden und es dann hier aufbauen. So habe ich meine Brille definiert. Also alles Zentrum, Zentrum. Wenn du das ganze Zeug entfernst, zeige ich es dir später. Also müssen wir diesen Klassenschiebercontainer irgendwo hier verwenden. Also, wie wir das tun können, sagen wir einfach, dass Stile die Stile zeigen. Welcher? Es ist diese, die Konstante, die wir definieren. So Stile. Und dann habe ich den Schieberbehälter, wie Sie hier sehen. So Stile Punkt Schieberegler Container, wird es jene Stile nennen, die hier erstellt werden. Wenn wir also sparen, werden wir sehen, dass alles gleich bleibt. Lassen Sie uns zum Beispiel etwas Platz von oben geben . Zum Beispiel, dies nur für ein Beispiel, um Ihnen zu zeigen, dass die Stile funktionieren. Also, wie wir etwas Platz geben können, können wir die Watte oben Polsterung oben verwenden, macht einen Raum im Inneren des Behälters von oben, wie nicht draußen, nicht schieben alle Behälter. Wenn Sie alle Container schieben möchten, können Sie Marge verwenden. So können wir sagen, Rand oben, und dann geben Sie einen Wert in Pixel, so können wir 20 sagen. Und jetzt, wie Sie sehen, ist es ein wenig von oben geschoben. Auf diese Weise sind wir sicher, dass unser Container diese Klasse oder dieses Stylesheet verwendet. Wir können sagen, wenn Sie sich daran erinnern, dass wir eine gewisse Höhe dieses Schiebereglers haben, nahm es fast die Hälfte des Bildschirms oder drei Viertel des Bildschirms. Also müssen wir eine Höhe für die Schieberegler Bücher geben. Wenn wir also zur Dokumentation des Schiebereglers zurückkehren, werden wir mehrere Eigenschaften sehen. Zum Beispiel können wir sagen, die Bilder, die wir zuvor verwendet Eigenschaften. Ich meine, sie sind Requisiten, die ich an diese Komponente übergeben kann, zum Beispiel kann ich Bilder übergeben, ich kann andere Optionen übergeben, die mir helfen, es zu stylen oder etwas damit zu tun. Deaktivieren Sie zum Beispiel beim Drücken. Es ist wie wenn vorhanden, dann wird die unbewachte Bildbrust deaktiviert. Zum Beispiel, Slider Box verstecken diese eine, die wir brauchen. Es wird nach Pixel sein. Es wird eine Höhe für den Schieberegler geben und auch in es Punktfarbe gekauft , weil es einige Punkt Autoplay. Das ist schön. Lasst es uns benutzen. Wir können sagen, Auto-Play, wie es automatisch gleitet, wenn Sie die Anwendung öffnen. So können wir diese Eigenschaft auch setzen. Nach den Bildern habe ich Platz gemacht. Und dann sage ich Auto-Play. Und dann öffne ich ein Objekt und setze es auf true. Also ist es Boolean, es nimmt Werte Ball. So wahr oder falsch, Standard ist false. Es gibt auch Zyklus, Schleife, Zyklusschleife. Es bedeutet, als könnten wir eine Endlosschleife sagen. Also der Benutzer, wenn er gleitet und wenn wir die neuesten Bilder bekommen, würde er wieder zum ersten Bild kommen, wenn er noch gleitet oder wischen. So können wir auch dieses zu wahr passen. So können wir auf die gleiche Weise zum Code gehen. Wir setzen Raum und dann öffnen wir ein Objekt und in ihm, sagten wir in der Regel, lasst uns das speichern. Mal sehen, ob unsere Anwendung immer noch in Ordnung ist. Schön. Also, wenn ich jetzt zu den Heimbildern gehe, wie irgendwie. Ich gleite weiter. Ich komme wieder zum ersten Bild zurück. Also, wenn ich jetzt weiter gleite, werde ich dir das erste Bild wieder sehen. Also gleiten wir in einer Schleife. So wie ich Ihnen gesagt habe, werden wir Slider Box Höhe verwenden. So können wir auch diese Eigenschaft verwenden und wir setzen sie auf Integer auf eine Zahl. Und diese Zahl wird für mich die Höhe dieses Schiebereglers in Pixeln implementieren. So können wir einstellen, so sagen wir hier Raum. Und dann haben wir das Eigentum, das wir setzen wollten. So werden wir Schieberegler Höhe haben und dann geben wir einen Wert. Also werde ich hier gleich setzen, und dann können wir einen Wert setzen, zum Beispiel, 600. Wir können vergessen, sagen, wie hier, 600, es wird in Pixel sein. Und wie Sie sehen, habe ich hier, also leichter, größer. Aber wir haben hier ein Problem. Was ist mit den kleinen Formen? Denn wenn ich hier auf die Höhe statisch setze, dann vielleicht auf kleinen Formen, wird dieser Schieberegler größer als die Schriftgröße sein. Und dann werde ich wie die Hälfte des Bildes ansprechend haben, was nicht schön ist. Also ist es besser, die Höhe dieses Telefons oder irgendeiner Form zu erhalten , wo meine Anwendung läuft? Und dann berechnen Sie das. Also können wir 1, 0.5 sagen. Also, was wir sagen können, verwenden Sie zum Beispiel drei Viertel des Bildschirms für den Schieberegler. Also, wie wir das in React Native tun können bietet mir die Abmessungen des Telefons, das ich benutze. Also, wie können wir das tun? Wir können etwas aus React Native importieren, die Dimensionen genannt wird. Und diese Dimensionen, es enthält zwei Eigenschaften, Breite und Höhe und Breite und Höhe wird mir die Höhe des Telefons und die Breite davon geben. Um das zu beweisen, möchte ich Ihnen zeigen, dass wir eine Konstante definieren können. Wir können es Dimension oder Wochenende nennen, definieren Sie diese Konstante irgendwo draußen. Also sage ich hier const. Und dann Dimensionen, können wir Diamant-Russen sagen. Und diese Dimension wird auch eine Eigenschaft enthalten, die get genannt wird. Und diese Get, es hat eine Eigenschaft, die Bildschirm genannt wird. Und dann sagen wir Git-Screen. Und auf diese Weise werde ich die Dimension dieses Bildschirms bekommen. Also lassen Sie uns das speichern und wir können diese Eigenschaft protokollieren. Wir können die Dimension protokollieren, um in der Konsole zu sehen , was ist die Dimension, die ich habe? So können wir zum Beispiel zu Beginn meiner Bewerbung gehen und wir können es hier machen. So können wir zu Hause sagen, machen Sie am Anfang console.log, console.log. Und dann werde ich hier Dimensionen setzen, die ich hier definiert habe. Wenn wir also speichern, öffnen wir das Terminal wieder, um zu sehen, was wir im Protokoll haben. Wie Sie sehen, haben wir hier Font Scale. Ich muss es größer machen, nur um es zu zeigen. So haben wir hier jetzt Schriftart, Skalierung, Höhe und auch Skalierung und auch Breiten. Also brauche ich die Höhe, damit wir die Höhe der Eigenschaft erhalten und sie verwenden können, um unseren Schieberegler zu messen. Also, wie sollen wir das so leicht machen? Wir können hier sagen Dimensionen Punkthöhe. In diesem Fall kann ich diese Dimensionsvariable verwenden. Also, wenn wir auf den Schieberegler Bücher verstecken gehen, Ich werde sagen Dimension Punkthöhe, wie Sie hier in der Auto-Vervollständigung sehen und dann durch 1,5 geteilt, ist es wie ein Dreiviertel dieses Bildschirms. Also, wenn ich es zum Beispiel sagen, würde es den Vollbildmodus nehmen, wie Sie hier sehen. Aber wir brauchen nur die 1,5. Also lasst uns das hier holen. Und wie Sie sehen, was ich es voll legte, gibt es am Ende, unten einige Punkte. Also müssen wir alle so diese Punkte entfernen, weil wir gehen um weitere Behälter unter unseren Schieberegler zu setzen. Schieberegler. Also, um das auch zu entfernen, können wir zu den Eigenschaften unseres Bild-Schiebereglers gehen, und wir werden eine Eigenschaft sehen, die Punkt-Stil genannt wird. Dot ist Dy. So können wir einen Stil für jene Punkte wie Höhe oder Radius usw. geben. Ich werde diese Höhe dieser Punkte Nullen machen, so dass es 0 sein kann, es kann nicht mehr gesehen werden. Also müssen wir hier sagen, Punkt-Stil wird Hide und dann 0 sein. Wie Sie hier sehen, ist es Eastland beschwert sich wieder, dass kein Inline-Stil. Also können wir keinen Stil für diese leichtere Box geben. Zum Beispiel kann ich Stile Punkt sagen. Wir können es Schieberegler Stil geben. Wir können es überhaupt sagen. Und dieser Schieberegler Stil, wir werden es innerhalb definieren, hier, in unseren Stilen und Stil, wird Ihr Stil Objekt haben und dieses Objekt wird eine Höhe haben, und diese Höhe wird 0 sein. Auf diese Weise werden wir diese Punkte nicht sehen können. Aber wir haben hier einen Fehler, weil ich hier zusätzliche Klammern habe. Lassen Sie uns sie komplett entfernen. Es genügt also so. Jetzt haben wir volle Höhe und diese Punkte sind verschwunden. Auf diese Weise haben wir die Punkte entfernt. Lassen Sie uns also die Höhe auf 1,5 zurücksetzen. Und dann werden wir leiser des Bildschirms haben. Und Sie sehen jetzt haben wir das Styling des Schiebereglers. 28. Arbeiten mit Movies: Okay, in diesem Vortrag werden wir sehen, wie wir mit unserer Homepage fortfahren und mit den Karussells beginnen. Das Karussell, ich meine, mit den Komponenten, die wir hier sehen werden, dass wir zwischen unseren verschiedenen Filmen gleiten können. Wie haben wir Kategorien von Filmen wie beliebte, beliebte TV-Show und Familie und Dokumentationen. So können wir auch einen Schieberegler hier haben, damit wir die neuesten populären Filme sehen können. Auf diese Weise beendeten wir den Schieberegler , der hier oben war. Und wir werden mit diesem einen arbeiten, der populäre Filme ist. Also werden wir einfach anfangen und wir werden es stylen und die richtige Art und Weise haben, Komponenten zu erstellen und wie wir mit diesen Listen arbeiten können. Lassen Sie uns zunächst mit einer sehr einfachen Liste oder einem Karussell arbeiten. So, wie wir es hier in unserer Anwendung setzen können, wie Sie unter dem Schieberegler sehen. So können wir daran arbeiten, mit einer Komponente zu arbeiten, die als flache Liste bezeichnet wird. Wenn Sie sich erinnern, habe ich Ihnen in React Native gesagt, es hat auch in der Dokumentation einige Komponenten. So können wir hier zum Komponenten-Knopf gehen. Und wir werden sehen, dass es viele Komponenten gibt, die hilfreich und nützlich für Ihre Anwendungen in React Native sein können . Eine dieser Komponenten ist eine flache Liste. Und mit einer flachen Liste können Sie eine Liste von Komponenten oder eine Liste von Decks erstellen, oder eine Liste aller Elemente in React Native. Und du kannst Cardozo damit machen. Also die Verwendung hier, also lassen Sie mich ein wenig hinauszoomen. So sehen Sie hier, dass wir eine Liste haben und diese Liste, zum Beispiel, jetzt ist es vertikal. Wir werden sehen, wie wir es horizontal machen können. Es hat viele Eigenschaften. Diese Komponente müssen Sie alle lesen. Wir werden es benutzen. Was brauchen wir, um unser Karussell für die Amorphen zu schaffen? Das einfachste Beispiel, das wir verwenden können, ist dieses, der Anfang. Wir können also keine Ansicht sagen oder erstellen. Und diese Ansicht wird für mich den Namen oder die Liste enthalten , die wir hier eine flache Liste nennen werden. Die letzte Liste wird also in einigen von euch sein. Lassen Sie uns also eine andere Ansicht in unserem Code erstellen. So können wir hier zu Visual Studio Code gehen und dann werden wir eine andere Ansicht erstellen. Sagen wir also, das wäre dasselbe. Wir können es so geben. Und wir können hier sagen, nicht Schieberegler Container, wir können Cutoff-Zelle sagen. Und diese Zelle wird die gleichen Eigenschaften wie diese leichteren Behälter haben. Also können wir auch hier gehen, Karussell und Karussell definieren, wir werden die gleichen Eigenschaften haben. Also lassen Sie uns sie kopieren und alles speichern. Wie Sie hier sehen, erhalten wir einen Fehler. Also dieser Fehler, ich wollte erwähnen, dass wir nicht zwei Komponenten auf der gleichen Ebene in ihrer Rückkehr setzen können , da dies nicht als React Native funktioniert, Sie müssen sie in eine Containerkomponente setzen. Sie können sie zum Beispiel in eine andere Ansicht einfügen. Und diese Ansichten werden innerhalb des schlechten Interviews sein. Aber dafür wird es wie ein bisschen knifflig sein. So React Native mit etwas namens React Punktfragment zur Verfügung gestellt. Und dieses React-Punktfragment, Es ist wie ein div-Container, aber es wird nicht in der Anwendung gerendert. Sie können also nicht sehen, wenn Sie in der Anwendung überprüfen, werden Sie nichts sehen, was mit diesem Fragment zu tun hat. Aus diesem Grund, wie Sie sehen, wurde unser Schieberegler kleiner. Also müssen Sie es ein wenig größer machen, wie wir später sehen werden und wie wir es stylen und einige Refactoring machen werden. Also zuallererst, jetzt bin ich in der Lage, zwei Ansichten in einer Komponente oder in einem Fragment zu haben. Auf diese Weise kann ich auch meine flache Liste hier haben. Also rufen wir unsere flache Liste aus dem Import an. Also werde ich zu React Native Importe gehen und ich werde nach einer flachen Liste fragen. Es ist von React Native, wie Sie hier sehen. Also gehen wir hier runter und sagen, dass wir hier eine flache Liste haben wollen. Und wir werden die Eigenschaften übergeben, die wir in der Dokumentation sehen werden. So, wie Sie hier in diesem Beispiel sehen, haben wir eine Daten und rendern Element und Extraktor. Also zuerst mal sehen, was Daten sind. Daten werden zum Beispiel unsere Filme sein. So können wir die Liste der populären Filme sagen. Lassen Sie uns zuerst die Liste der populären Filme bekommen. Also gehen wir hier und wieder, wir haben zuvor populäre Filme definiert. Wir können auch einen konstanten Zustand nennen. Wir können es als populäre Filme definieren. Also können wir hier sagen, nicht Filme, Bilder, aber wir können beliebte Filme sagen. Und in diesen beliebten Filmen müssen wir es auch einstellen. Also auf diese Weise werden wir unsere beliebten Filme haben, aber beliebte Filme werden von bekommen beliebten Filmen Service kommen, wie wir zuvor gesehen haben. Also würde ich sagen, Jahr setzen beliebte Filme mit Filmen. Also, desto mehr Visa-Rückruf von diesem Service wird bei Set unsere beliebten Filme hier zurückgegeben werden. Also die Daten dieser flachen Liste. Wie Sie hier sehen, dass wir Daten definieren müssen, werden unsere beliebten Filme sein. Also lassen Sie uns eine andere Eigenschaft sehen. Die Eigenschaft wird Renderelement genannt. Also müssen wir ein Renderelement haben. Wir müssen teilen Anzeige des Artikels, der Film selbst, wie Sie hier sehen, haben wir hier mehrere Filme und wir zeigen Artikel, Artikel, Artikel. Jeder Gegenstand ist ein Film für mich. Jetzt fangen wir nur mit dem Filmnamen an. Wie es einen Text haben wird, um es nicht sehr kompliziert zu machen, werden wir Schritt für Schritt in der Anwendung aufwachsen. So werden wir Renderelement als Renderelement verwenden. Und was ist Renderelement hier? Es ist eine Funktion Zurück Element, und das Element wird als Komponente verwendet werden, oder er definiert seine eigene Komponente hier, die Element genannt wird. Und es wird irgendwo in der Anwendung definiert werden, zum Beispiel hier. Und es hat eine Ansicht und es ist am Text einseitig. Ich zeige Ihnen ein SEMP. Ich werde Ihnen den einfacheren Weg zeigen. Also müssen wir zuerst gehen, um Element zu rendern. Also rendern Element wird einen Rückruf wie folgt haben. Also gehen wir wieder zu unserem Code und wir werden sehen, wie wir ein Renderelement erstellen können. Also rendern Element, es wird, wie ich Ihnen sagte, ein Callback sein, der Element genannt wird. Aber dieser Artikel wird in einem Objekt sein, wie Sie hier sehen. Also haben wir hier Artikel als Objekt, dieser Artikel wird für mich jeden Film präsentieren, der aus diesen Daten zurückgegeben wird. Auf diese Weise kann ich dies in ein Objekt setzen und dann wird der Rückruf dieser Funktion für mich eine Komponente von React Native Komponenten zurückgeben, die ich selbst erstellen oder eine ihrer fertigen Komponenten verwenden kann , die wir in Reagieren Sie Native. Jetzt werde ich den Text verwenden. So können wir sagen, dass Textkomponente, die wir zuvor gesehen hatten. Und ich werde sagen, dass in dieser Textkomponente für mich Element setzen. Und dieser Gegenstand wird so sein. Wir haben Objekt, Punkt Punkt Titel. Warum Titel? Weil mir die Filme hier mit einem Titel zurückgegeben werden. Wenn Sie sich in Postman erinnern, haben wir alle Filme, wie die beliebten Filme. So ist der beliebte Film, jeder Film gibt es alle 310 mit einem Titel oder anderen Eigenschaften. Also nehmen wir jetzt zum Beispiel, diesen Titel. Also werde ich sagen, hier rendern Element Punkt Titel sein. Also lassen Sie uns hier sparen, wie wir sehen werden, was passieren wird. Also werde ich das speichern und ich werde den Filmnamen oder den Filmtitel zurückgeben. Also schauen wir uns unseren Simulator an. Was gibt es da? Ok, Nett. Ich habe die wenigsten Namen von Filmen. Und eine der Eigenschaften, die in dieser Komponente definiert sind, die als horizontal bezeichnet wird. Also, wenn Sie scrollen oder die Dokumentation lesen, werde ich nicht alle Eigenschaften tun. Sie sehen nur, was Sie brauchen, und dann können Sie es verwenden. Was ich jetzt brauche, ist etwas namens Horizontal. Horizontal muss auf true gesetzt sein. Dann in diesem Fall kann ich diese Elemente als Listen verwenden, flache Liste als horizontal, wie wir in unserer Anwendung sehen, so etwas. Horizontal brauchen wir es nicht vertikal. Also auf diese Weise werde ich sagen horizontal gleich wahr. Und dann sparen wir, gehen Sie wieder zu unserem Simulator. Und wir werden sehen, dass wir die Liste hier haben. Aber es ist sehr klein und klein, weil es nur die Namen von ihnen Filme enthält. Jetzt sind wir in der Lage, den Film zu bekommen, also ist es sehr großartig. Also, was wir hier brauchen, um eine Komponente zu erstellen, die wie eine Komponente ist, wird für mich als Karte machen. Also diese Wache, wir können sagen, die Filmkarte, wir können hier sagen. Also dieser hier, es ist Wache. So werden sie für mich als Komponente implementieren. Also zeige ich Ihnen in der nächsten Vorlesung, wie Sie Ihre eigene Komponente in React native erstellen , um sie hier zu rendern und nicht die fertigen Komponenten zu verwenden. 29. Liste erstellen: Okay, in diesem Vortrag gehen wir zu einem größeren Schritt. Also werde ich Ihnen zeigen, wie Sie dynamisch mit React arbeiten. Also jetzt in React Native, wenn Sie vorhaben, eine Komponente zu erstellen, die mehrere wiederholbare Dinge enthält, wie wir eine Komponente haben und wir werden es mehrmals verwenden. So kann ich zum Beispiel sagen, dass diese flache Liste einen Titel enthält und auch einige, eine andere Komponente, die genau wie eine flache Liste sein wird. Und dann werden wir es zeigen, wie ich Ihnen in der Demo gezeigt habe, wir haben einen Titel und dann eine Liste von Dokumentarfilmen. Ein weiterer Titel, der beliebte Filme und am wenigsten populäre Filme unter ihm halten wird. Also brauchen wir Eigenschaften für diese Komponente, Titel und den Inhalt dieser Komponente. Bisher werde ich einen Ordner erstellen, der als Komponenten bezeichnet werden kann. Wir werden nur die Komponenten halten, mit denen wir arbeiten werden. Also Komponente. Und in dieser Komponente werden wir eine Datei setzen, die am wenigsten NodeJS genannt wird, weil ich eine Liste von Filmen haben möchte und diese Liste des Films einen Titel hat. Also, und dann in diesem Fall, auf meiner Homepage, kann ich sagen, dass ich diese Listenkomponente mehrfach möchte. Also hier statt dieser, werden wir mindestens vier populäre Film haben, zumindest für Dokumentarfilm, mindestens vier, zum Beispiel, die Familienfilme, etc. Also, um Komponente zu erstellen, wie Sie hier sehen, habe ich eine Komponente und ich habe Ihnen zuvor die Verknüpfungen, Snippets für React Native gezeigt. Wir benutzen die Erweiterung, die ich dir schon gesagt habe. Für diese Erweiterung, wenn wir wieder zu React Native Schlafbetten gehen, die wir hier heruntergeladen haben. Und Sie werden wie mehrere Verknüpfungen sehen, die wir zuvor über React reine Komponenten oder zum Beispiel zustandslose Komponenten und mit Rückkehr gesprochen über React reine Komponenten oder zum Beispiel haben. Also haben wir dieses verwendet, aber jetzt hier in diesem Fall werden wir einen anderen Typ verwenden, der eine reine Komponente genannt wird. Und diese Komponente werden wir es als Komponente verwenden , um es in unsere Anwendung zu importieren. Es ist das gleiche wie dieses, aber auf andere Weise. In diesem Kurs zeige ich Ihnen mehrere Dinge, die Sie verallgemeinern oder gerne alle Themen über React Native abdecken können. Also lassen Sie uns hier gehen und sagen, ich möchte zum Beispiel die Verknüpfung, die für mich eine reine Komponentenklasse hält. Also gehe ich hierher und sage B, C, deine Komponentenklasse. Und dann werde ich diese Komponente haben. Und wie ich schon sagte, wir wollen die Komponente, die Eingänge oder Requisiten hat. Und diese Requisiten können wir sie auf eine Weise wie folgt erstellen. Also brauchst du diese Stufe 4 jetzt nicht, wir werden es nicht benutzen, aber innerhalb der Kapitulation und Rick, vor der Rückkehr, können wir eine Konstante definieren. Und in dieser Konstante können wir Requisiten definieren. Und diese Requisiten, wie wir sie definieren können, zum Beispiel brauche ich einen Titel. Ich werde einen Titel in dieser Komponente rendern. Und auch möchte ich einen Inhalt haben, und der Inhalt wird die Liste der Filme sein. Und diese Konstante müssen Sie wie diese Punkt-Requisiten setzen und diese Aufforderungen mit kommen von React Native. Aber in diesem Fall sehen Sie hier keine automatische Vervollständigung , weil Sie eine reine Komponente importieren müssen , die erweitert wird, so dass reine Komponente eine Klasse ist, die im React Native verwendet wird. Sie können es aus React importieren. Dafür müssen wir auch React importieren. Also genau, wie wir es hier in den Snippets haben, können Sie sagen, ich bin Import React. Also haben wir hier bin ich. Und dann werden Sie reagieren und diese Komponente, wird es von der reinen Komponente erweitern, die von reagieren kommt. Auf diese Weise haben Sie hier den richtigen Import. Danach, diese Punkt-Requisiten, werden wir definiert. Natürlich, weil diese Punkt-Requisiten mit der reinen Komponente kommen, so ist es, was wir von den reinen Komponenten ausdehnen. So erweitern wir auch seine Eigenschaften. Und eine dieser Eigenschaften oder Variablen ist Requisiten. Also lasst uns jetzt unsere Komponente versuchen. Zum Beispiel möchte ich eine Ansicht, normale Ansicht rendern. Also können wir sagen, hier haben Sie. Also müssen wir es auch hier importieren. Also werde ich hier sagen Import Ansicht von React Native. Und sagen wir, wir werden nur die Komponente oder zum Beispiel den Titel setzen . So können wir hier sagen, wir können auch die Textkomponente importieren. Diese Textkomponente wird also auch von React Native kommen. Also habe ich hier kühn gemacht. Und dann wird dieser Text nur den, wie, einige zufällige Text enthalten. Es wird diesen Titel zu halten , der Titel, der Gummi als Eigenschaft für diese Komponente ist. Also lasst uns das retten. Und dann werden wir diese Komponente verwenden, wie wir sie verwenden können oder wie wir sie nennen können. Also werde ich hier eine andere Ansicht unter dieser einen unter der flachen Liste erstellen. Also sollte der Dipol hier unten erscheinen. Also haben wir einen anderen Blick. Und diese Ansicht darin werde ich meine Komponente nennen, welche Komponente ich nannte es Liste. Und diese Liste mit kommen von woher? Von dieser Komponente. In diesem Fall muss ich diese Komponente importieren. Auch hier. Also muss ich hier sagen Import und dann Liste von. Und dann muss ich sagen, wie Doppelkomponenten und dann auflisten. Also hier habe ich die richtige Komponente aus dem Komponentenordner importiert. Also gehen wir wieder hierher. Und wie ich Ihnen gesagt habe, gibt es Requisiten. Wie wir Requisiten genau nach dem Namen der Komponente verwenden können. Sie können die Requisiten sagen, die Sie wollen. Also, was ich hier will, ich habe zwei Eingabeaufforderungen. Einer ist diagonal, einer ist zufrieden. Wir würden nur Titel als Beispiel. Also werde ich hier gehen und ich sage Titel, und dann werde ich wie jeder hartcodierte Text übergeben, Sagen wir zum Beispiel, meine kleinste Komponente, Python. Also einfach so, denn wir werden es hier sehen. Also, wenn ich rette, bekam ich einen Erwachsenen. Warum mit diesem Elementtyp ungültig ist, erwartet eine Zeichenfolge für Gebäudekomponenten. Immer habe ich diesen Fehler mit Absicht gemacht, nur um Ihnen zu zeigen, dass wie der Unterschied zwischen den akuten Komponenten und diesen Funktionskomponenten ist . So Funktionskomponente, so etwas, wie Sie hier sehen. Aber eine reine Komponente, Sie müssen sie ohne all diese Klammern genau so aufrufen, wie wir nennen reagieren. Wenn Sie also eine reine Komponente aufrufen möchten, müssen Sie sie wie diese oder in die Klassenkomponente importieren. Und dann ohne all diese Klammern würde es gut funktionieren. Also jetzt lasst uns wieder sparen. Und wir werden bemerken, dass wir nichts gesehen haben, weil wir ein Styling für diese Ansicht stellen müssen. Und lassen Sie uns zum Beispiel dieses Mal für eine schnelle Show kopieren und erneut speichern. Und wie Sie hier sehen, habe ich in meinem Titel, meine Liste Komponententitel. Auf diese Weise bin ich in der Lage, Z-Komponente zu verwenden. Also, wenn ich hier gehe und sage, zum Beispiel, füge für mich eine Zeichenfolge hinzu. Wir können Titel und einige Zahl sagen, 2 zu 2 zum Beispiel. Und wie Sie das sehen, kommt es, dass die Komponente mit dieser Eingabe, die ich im Haus angegeben habe. Also sagte ich Titel hat eine Eingabe, meine Listen-Komponente, Titel und in der Listenkomponente habe ich es zu dieser Sache hinzugefügt. Also in diesem Fall sehe ich es auch. So können Sie auf diese Weise eine dynamische Komponenten erstellen. Dafür werde ich diese Liste, die wir hier auf der Homepage haben, auf diese Komponente verschieben . Also lasst uns das schnell machen. Zuallererst, lasst uns diesen ganzen Teil haben. So haben wir hier wie nicht mehr die Ansicht, wir werden nur die Liste haben. Also habe ich diese flache Liste bekommen. Wenn wir also wieder hier zur Liste gehen, werde ich diesen Text entfernen. Ich werde hier sagen, dass ich die flache Liste habe, aber zumindest müssen wir sie noch einmal als Komponente nennen. Von hier aus müssen wir immer alle wichtigen Komponenten in diesen Zielkomponenten kopieren . So können wir hier auch Dimensionen Dive Cheat haben, weil wir sie später brauchen. Also lassen Sie uns diese wichtige entfernen, um die Anwendung zu haben. Alle von ihnen werden aus React Native importiert. Und hier, wie Sie hier sehen, brauchen wir Daten. Und diese Daten, sie werden nicht aus dem Titel kommen. Sie werden mit dem Inhalt, diese Inhalte entsprechend zu gehen. Also diese Content-Eigenschaft auf diese Weise muss ich sie auch in der Listenkomponente hier angeben. Also werde ich, zusätzlich zu dem Titel, Ich muss sagen, Inhalt. Und auch wie eine Eigenschaft, die zum Beispiel meine beliebten Filme sein wird. Also werde ich es auch hier setzen. In diesem Fall werden Sie sicher sein, dass Sie die richtigen Eigenschaften an diese Listenkomponente übergeben werden. Also wieder, lasst uns diese flache Liste entfernen, weil wir sie nicht mehr brauchen. Und jetzt haben wir hier die Aussicht, wir brauchen sie auch nicht. Also haben wir hier, um Stil Führer oder Zelle. Also speichern wir hier, und auch wir speichern hier, okay, wir bekommen immer noch einige Fehler, weil variabler populärer Film hier nicht gefunden wird. Also statt populärer Filme, weil ich dir das gesagt habe, beliebte Filme, sind wir durch diese Eigenschaft gekommen. Also sagte ich, Inhalte werden beliebte Filme sein, die ich vom Backend bekam und ich gebe es an die Liste. Also in der Listenkomponente müssen wir diesen Inhalt in steilen verwenden. Also lasst uns sparen. Okay, wir haben jetzt diese Liste. So als Zusammenfassung, schnell, haben wir eine neue Komponente definiert, die Liste genannt wird. Und diese Listenkomponente wird für mich einen Titel und einen Inhalt enthalten. Und innerhalb dieser Audit-Vorlage wird es ein flachster und ebenso einige Titel sein. Vielleicht haben Sie eine andere Ansicht wie darüber. So können wir einen Blick auf den Titel haben. Also werde ich hier auch einen Blick haben. Und wie ich Ihnen sagte, können Sie keine andere Ansicht wie Container haben, da Sie nicht zwei Komponenten die gleiche Ebene direkt in die Rückkehr einfügen können, Sie müssen sie alle in einem Container enthalten. Zum Beispiel, hier habe ich verwendet. Reagiert Fragment, wie Sie sich erinnern, aber hier sagen wir, wir können die Ansicht auch verwenden. So Ansicht enthalten wir mehrere Ansichten. Und ich brauche auch eine andere Ansicht für diesen Artikel. Also in diesem Fall haben wir Sie und Ansichten innen, wie Sie hier sehen. Und in dieser Ansicht werde ich einen Text angeben, und dieser Text wird für mich den Titel halten. Also hier habe ich auch den Kampf. Also der Titel, der von der Homepage-Komponente kommen würde und den ich hier in der Requisite spezifiziere. Lasst uns das retten. Und wie Sie sehen, wird der Titel angezeigt, aber er ist unter dem Cardozo, weil wir all das Zeug hier stylen müssen. Also lassen Sie uns erstellen, wie wir hören, ein Stylesheet. Also werde ich das Gleiche haben. Wir können hier eine Konstante haben. Erinnern Sie sich an Stein. Und das ist Gezeiten halten Stylesheet und dann Erstellen. Und dann können wir unsere Klassen hier aufmachen. Also erste Klasse, die ich hier haben muss, wie Styling für den Text, sagen, er ist gestorben. Und dann wird es zum Beispiel aus Steins Punkttext kommen, wir werden diese Klasse definieren. Also werde ich hier wieder zu meinen Klassen gehen. Ich werde sagen, der Fund für mich, das Textglas. Und innerhalb dieses Textobjekts wird Schriftgröße haben. Zum Beispiel setzen wir 20 und 20. Es wäre wie ein Pixel. Und wir können auch Schriftgewicht setzen. Es ist genau wie CSS, aber wie Sie sehen, haben wir normalerweise kein Schriftgewicht in CSS, Sie schreiben es so. Aber hier, nein, weil wir Objekte, Javascript-Objekte verwenden , so wird es wie CamelCase sein. So können wir hier Schriftgewicht und diese Schriftgewicht haben, werden wir eine Zeichenfolge sein, und diese Zeichenfolge wird fett sein. Auf diese Weise ist es so etwas wie CSS, aber Sie ändern es irgendwie in JavaScript-Syntax. Und die Farbe, vielleicht können wir etwas Farbe setzen, die schwarz oder so sein wird. Auf diese Weise können Sie Farbe setzen. Und Sie können hier Padding unten sagen, wie Sie den Text darunter oder die Liste darunter schieben. Einige Pixel. Also können wir hier um 20 sagen. So, wie Sie sehen, wie es hier oben gezeigt wird. So muss der Blick selbst von oben geschoben werden. Also für diese Ansicht können wir als Will Stein und dieses Stil-Glas definieren, das wir enthalten haben. Wir können Styles sagen und dann können wir es am wenigsten nennen, um zum Beispiel, ja, nur Liste zu sehen. Wir können so sagen. Also können wir Liste sagen. Und die Liste wird eine andere Klasse haben. Also können wir keine Liste sagen. Und wir können es wie Watte oben oder Rand oben zum Beispiel geben, würde ich sagen. Und dieser Rand oben mag es, die Liste von oben etwa 25 Pixel auf diese Weise zu schieben. Und hier haben wir, ich habe das Komma vergessen. Und dann, wie Sie sehen, haben wir den Titel in der richtigen Weise für diese Liste. In der nächsten Vorlesung werden wir mehr Styling machen und ebenso werden wir die Bilder der Filme zeigen, wie wir in der Demo gesehen haben. 30. Create: Okay, in diesem Vortrag werden wir sehen, wie wir diese Liste stylen und schöner machen können. Also erinnern Sie sich, dass wir nur den Titel angezeigt haben. Was ist mit der Anzeige einiger Bilder? Also lassen Sie uns das auf eine Weise tun, die wir sehen, wie die Bilder von ihnen immer. Zunächst einmal, wenn Sie sich erinnern, wussten wir, wie wir Komponenten erstellen können. Also haben wir eine Listenkomponente erstellt. Und diese Listenkomponente, enthält es flache Liste, und diese Liste rendert einen Text nur. Also was ist mit, statt dass wir eine Kartenkomponente rendern, einen Gott, den ich jetzt erstellen werde und es klickbar machen werde. Wenn Sie also auf einen der Filme klicken, wird es uns nehmen, wie wir später in der Navigation sehen, dass es für uns zu den Details dieses Films navigieren würde . Statt dessen werde ich das Element an eine Komponente übergeben, die Karte genannt würde. Also lassen Sie uns eine neue Komponente erstellen und wir werden es Karte dot js nennen. Und dieser Wachhund JS, würde ich auch verwenden, das reine Komponenten-Styling. Und so kann ich auch genau die Art und Weise verwenden, wie wir es mit den Listenkomponenten gemacht haben. Ich würde hier die drei Akte und auch die React Dot View-Komponenten importieren. Was sind die Eigenschaften dieser Komponente? Wir können eine Konstante definieren und wir geben ihm einen Namen wie Element. Und der Gegenstand wird wie der Film sein , den wir in diesem Garten zeigen werden. Also werden wir sagen, diese Punkt-Requisiten. Auf diese Weise habe ich eine Konstante definiert, die Element genannt wird. Und dieses Element wäre eine Eigenschaft für diese Komponente. Und natürlich sollte dies innerhalb des Renders und vor der Rückkehr sein. Und wir müssen diese Wache als klickbar machen. Also, wie können wir das tun? Wenn Sie sich erinnern, gibt es in React Native mehrere Komponenten, die wir verwenden können. Eine dieser Komponenten, die als berührbare Deckkraft bezeichnet wird. Und berührbare Deckkraft gibt Ihnen die Möglichkeit, wenn Sie auf eine Schaltfläche oder eine Komponente oder einen Gegenstand klicken, wenn wir wie eine Deckkraft wie schattiert machen. Und es wird für die Klicks des Benutzers antworten und wird wie ein deemed angezeigt werden, wie Sie hier sehen. Auf diese Weise werden wir diese Komponente auch verwenden. Daher müssen wir eine berührbare Opazitätskomponente importieren. Also müssen wir sagen, importieren berührbare Deckkraft von React Native. Und so habe ich die berührbare Deckkraft und kann es als Komponente nennen, die Rückkehr hier. So wird eine berührbare Deckkraft auch andere Eigenschaften haben, wie wir später sehen werden, und wir würden ihnen einige Stile geben. Also bereiten wir unsere Styling-Datei vor. Wir können Stil sagen. Und diese Zifferblätter wären wie von dieser Gezeiten. Also brauchen wir auch Konstante, die Stile genannt. Und es wird hier ein Stylesheet erstellen. Außerdem müssen wir diese Arbeitszeittabelle importieren. Und dieses Stylesheet hätte kein Create. Und wir werden hier unsere Klassen erstellen. Also nennen wir diesen berührbaren Opazitätsstil wie zum Beispiel, wir geben ihm den Namen und wir nennen ihn Container, zum Beispiel. Und hier werde ich zum Stil gehen und ich werde sagen, dass ich einen Container habe und dieser Container das Objekt und die folgenden Eigenschaften haben wird. Wir können einige Watte im Allgemeinen geben, so etwas wie wir fünf Pixel sagen können. Und auch können wir sagen, wie wir eine Position Verwandte brauchen. Ich werde dir später sagen, warum. Weise bereiten wir diese Komponente so vor, dass sie einige Stile haben. So haben wir hier der Stil wird hier Stile und berührbare Deckkraft sein. Also lassen Sie uns diese Komponente im Allgemeinen speichern, und ich werde sie in meine Liste importieren. Also anstelle von Text würde ich Wache verwenden. Und dieser Wächter hat eine Eigenschaft, die Gegenstand genannt wird. Und ich werde übergeben, was der Gegenstand, der von der Film-Liste zurückkehrt, wie Sie sich erinnern. Also haben wir hier den Gegenstand, der Boss auf ihre Karte ist. Und diese Karte, wir werden sie schließen. Und so müssen Sie nicht all dies verwenden, also können wir diese einseitig schließenden Tags verwenden. Also müssen wir diesen Einkaufswagen Artikel importieren. Also werden wir hier gehen und ich muss Glasschutz aus Komponenten importieren, die in der gleichen Ebene des Ordners der Liste sein werden. Es wäre also so. Also haben wir GOTT, aus der Kartendatei, weil sie auf der gleichen Ebene der Datei sind. Also speichern wir und wir haben hier unsere Komponente, Artikel oder Titel, aber wir haben nichts hier, weil es leer ist. Also gehen wir zu dieser Karte, wir müssen in diese berührbare Deckkraft stecken, etwas. Es funktioniert jetzt als berührbare Deckkraft, aber es ist leer. Lassen Sie uns auch eine andere Komponente setzen, die Bild genannt wird. Ich werde dieses Bild des Films in diese Komponente einfügen. So wie Sie hier sehen, hat es auch Stil. Sie müssen es auch importieren. Von React Native, und dann können Sie es verwenden. Und es hat zwei Eigenschaften. Einer von ihnen ist gestorben und dann die Quelle. Die Quelle wäre die Quelle des Bildes, das Sie innerhalb dieser Komponente verwenden möchten. Also werde ich gehen, um das Bild auch von React native zu importieren. Ich werde hier Bild setzen. Also werde ich hier diese Bildkomponente setzen. Und das Bild der Komponente hat eine Eigenschaft. Und es wird auch eine Seite Komponenten sein, so dass wir nichts drin haben, also müssen Sie es so verwenden. Also zuerst brauchen wir, dass dies für diese Komponente oder für dieses Bild gestorben ist. Also würden wir auch die Stile verwenden. Also würde ich Stile sagen. Bild zum Beispiel, oder Filmbild ist bis zu Ihnen. Und danach können wir definieren, dass hier gestorben ist. Also werde ich hier gehen und ich würde Stil sagen, und wir brauchen die Quelle, wie wir in der Dokumentation gesehen haben. Also, was wird die Quelle sein? Die Quelle, wenn Sie sich daran erinnern, dass wir das Element zu dieser Komponente bekommen , so dass der Inhalt dieser beliebten Filme wurden für mich Reihe von Filmen geschrieben. Und diese Arrays von Filmen werden in der flachen Liste verwendet. Und die flache Liste würde sie Artikel für Artikel machen, Film für Film. Und ich gebe jeden Film auf diese Karte. Jedes Filmjahr wird also an diese Karte übergeben. So kann ich die Eigenschaften von Filmen verwenden. Also erinnere ich mich daran, dass Eigenschaft, die wir für das Erhalten des Bildes verwenden werden, dass rühmen oder Bild. So kann ich hier Artikel setzen, die Stützpfad. Also, wie Sie sich erinnern, haben wir hier Repartee Post ihren Chef des Films, den wir zuvor benutzt haben. Aber lassen Sie uns die Dokumentation genauer lesen. Ich werde hier speichern, wir haben hier Feld und es heißt, als ob es uns einen Fehler gibt, diese ungültige Eigenschaft. Warum? Da Jahr, wenn Sie diese Eigenschaft verwenden möchten und Sie die Anzeige des Quellbildes von URL möchten, müssen Sie dieses Objekt verwenden, das URI genannt wird, kann diese Quelle des Bildes nicht oder zum Beispiel die Pfad des Bildes direkt. In diesem Kurs müssen Sie eine Eigenschaft verwenden, die URI genannt wird. Also dafür bin ich nicht genug, um nur den Artikel zu verwenden. Wir müssen ein anderes Objekt hineinlegen. Und in diesem Objekt haben wir eine Eigenschaft, die URI genannt wird, wie diese. Und dann, okay, das Bild würde mir keinen Fehler geben. Aber wir sehen kein Bild. Deal jetzt. Warum? Denn wenn Sie sich erinnern, müssen wir dem Bild ein Bad vorfixieren, wie wir es mit diesem Finder getan haben. Und wir haben die Bilder Array erstellt. Und diese Bilder Array wird so vorangestellt. Also müssen wir auch jedes Bild verwenden, um URL-Präfix wie folgt zu haben. Also lassen Sie uns diesen Teil auch kopieren. Und geh zu unserer Wache. Und ich werde sagen, u ist der URI, dieser String plus das Item Punktposter. Wenn wir also speichern, werden wir sehen, dass wir immer noch nichts sehen, weil wir keine Klasse für das Bild so weit gegeben haben, dass wir zu den Styles gehen und einen Stil geben müssen, einen neuen Stilnamen , der Bild genannt wird, wie wir hier definiert. Und ich werde eine Höhe für dieses Bild geben, sagen wir 200. Und auch können wir geben, zum Beispiel, Weizen, die 20 oder 120 Wochenende sagen. Und wir können so schön sehen, wie Sie sehen, wir haben diese Liste bereits der Bilder, aber wir müssen es auch wie einen Grenzradius geben. Ich zeige hier nur wie einige CSS-Fähigkeiten. Sie können sie alle nach Ihren Wünschen machen, basierend auf dem, was Sie für Ihr Design benötigen. Also werde ich hier sein, um Grenzradius 20 zu geben. Und wir haben hier unsere Liste, und wir haben unsere Komponenten oder Filme. Und wenn Sie darauf klicken, wie Sie sehen, ist es genau wie von unserer Anwendung erwartet. Manchmal, wenn das Bild des Films sehr klein ist, würde es vielleicht so geschnitten werden. Aber weil wir die gleiche API verwenden, haben wir zuverlässige Bilder. Auf diese Weise ist es besser, eine Eigenschaft zu verwenden, die Re-Size-Modus-Abdeckung genannt wird und diese Größenänderung Formbedeckung. Wir decken den Behälter dieses Bildes genau in der gleichen Höhe und Breite ab, die wir gerade hier angegeben haben. Die Größe des Originalbildes spielt also keine Rolle. Es passt genau in diese Breite und Höhe. Wenn Sie also speichern, haben Sie die gleiche Breite und Höhe, genau wie Sie hier angegeben haben, sogar das Bild ist kleiner. Wenn wir also mehrere Listen verwenden möchten, können wir einfach nach Hause gehen und alle diese Ansichten duplizieren. Also möchte ich hier noch einen Blick haben. Dann werde ich noch ein anderes Kino bekommen, und auch ich werde ein anderes Kino bekommen usw. So werden Sie in der Lage sein, Ihre beliebte Film-Liste herauszufinden. Natürlich braucht es mehr Styling, wie wir später sehen werden. Aber auf diese Weise verwenden wir diese Komponente wieder, aber mit unterschiedlichen Daten. Auf diese Weise haben wir unsere Komponente erstellt und wir sehen die Liste der Bilder. Also gehen wir hier auf die Homepage und geben für diese Komponente einen Namen wie oder diese Liste können wir beliebte Filme sagen. Also können wir hier keine populären Filme machen. Und es wird für mich die beliebten Filme anzeigen. Und später werden wir sehen, wie wir mehr und mehr Listen für unsere Filme auflisten können. Aber wir werden mehr Schritte tun, wie Styling und Refactoring und Anzeige von Platzhalterbildern, um diese Kartenkomponente besser und dynamischer zu machen. 31. Bildplatzierung in der Kartenkomponente: Okay, eine der wichtigen Fragen, die wir uns in Zukunft stellen können , wenn hier kein Bild angezeigt wird. Wenn wir also kein Bild von der API erhalten können. Also, wie können wir das lösen? Dafür würde ich ein Platzhalterbild und ein Bild verwenden , das in der Anwendung gespeichert ist. Und wenn es einen Fehler gibt, dieses Bild zu laden, dann würde ich hier einen Platzhalter zeigen. Dafür möchte ich ein Bild in meiner Ordnerstruktur speichern. So kann dieser Ordner beispielsweise als Assets benannt werden. Also in diesem Assets können Sie alles, was Sie für Ihre Anwendung benötigen, setzen. Einer von ihnen kann wie Bilder sein. Im Inneren des Ordners Bilder. Ich kann meine eigenen Bilder erstellen und sie hier platzieren. So habe ich zum Beispiel ein Platzhalter Bild für mich erstellt. Ich habe es richtig mit Photoshop gemacht. Mit Photoshop kann ich dieses Bild anstelle des Filmbildes platzieren , wenn kein Bild verfügbar ist. Dafür können wir das auch verwenden. So, wie wir dieses Bild anzeigen können, wenn kein Bild verfügbar ist. Also, wenn ich hierher gehe, Lasst uns eine Konstante definieren. Wir können dieses konstante Platzhalterbild nennen. Also lassen Sie uns sagen, ein Jahr konstanten Platz Halter Bild. Dieses Platzhalter Bild würde aus dem Bad benötigt werden, das ich angegeben habe, das im Asset-Ordner sein wird. Dafür würde ich den Ordner „Assets“ verwenden. Ich werde einen Schritt nach oben Assets Bilder gehen, und dann werde ich das Bild angeben, das ich will. Und der Name des Bildes wird Platzhalter sein, dass B und G. Also in diesem Fall werde ich mein Bild in Platzhalterbild haben. In der Bildkomponente können Sie also URI oder direkt eine Datei angeben. Also, wenn Sie eine Geldstrafe verwenden möchten, verwenden Sie erforderlich. Deswegen habe ich das gebraucht. Die Quelle des Bildes kann also entweder URL sein oder es kann eine Datei sein. Dafür muss ich etwas in der Quelle angeben. Ich werde Artikel Punkt Posterpfad sagen. Es ist, als würde ich es hier tun. Und wenn, und dann stelle ich Fragezeichen, dieses Gold inline. Wenn. So können Sie zum Beispiel ein wenn in einer Zeile setzen, so dass Sie nach dem Fragezeichen den Wertepunkt Es ist durch setzen. Und dann setzen Sie Doppelpunkt, und dann wird der Wert sein, wenn er falsch ist. In diesem Fall wird es hier sein, wenn der Bolster-Pfad einen Wert hat, oder er definiert ist, oder er hat einen Inhalt, und wenn er nicht definiert ist, wird er diesen Wert erhalten. Also für das, würde ich verwenden, wenn es einen Wert hat, geben Sie mir dieses Objekt, das Sie sind ich und alle das Plakatbild. Aber wenn es keinen Wert hat, werde ich hier einen Doppelpunkt setzen. Und nach dieser Spalte werde ich Platzhalterbild setzen. In diesem Fall ist es nach dem Speichern formatiert. Wenn Element, der Posterpfad nicht definiert ist oder es nicht verfügbar ist, all das ist Fehler, oder es ist leer, dann wird es nicht zeigen, dass Sie sollte ich das Platzhalter Bild aufnehmen. Aber wenn es einen Wert gibt, wird es den ersten Wert nehmen, nach dem Fragezeichen liegt, was dies sein wird, wenn. Okay, wie können wir das testen? Wir konnten also diesen Platzhalter Bild in einer Weise, die wir umgedreht haben. Aber diese Bedingung, also lasst uns hier nicht setzen. Also in diesem Fall, wenn es ein Poster Bild für mich, dass Platzhalter Bild und speichern, werden wir sehen, dass wir die Platzhalterbilder haben. Aber auf diese Weise wissen wir nicht, wie der Film heißt. Es ist also auch besser, den Namen des Films anzuzeigen. So zeigen wir den Namen des Films nur für den Fall, dass es nur Bild Platzhalter. Also können wir hier auch einen Zustand sagen. Also werde ich auch hinzufügen, wie nach dem Bild, Ich werde einen Komponententext haben und dieser Text wird angezeigt, wenn es keinen Posterpfad gibt. Also werde ich hier sagen und Objekt nach dem Bild. Also haben wir hier, wie wenn es Artikel, dieser Platzhalter, oder wenn es keinen Artikel und Platzhalter gibt, dann und tun Zeiten, wie Sie sich erinnern, wir haben das getan, als wir den Fehler behandelt haben. Also, dann werde ich eine Textkomponente platzieren. Also nennen wir hier eine Textkomponente. Und wir geben dieser Textkomponente einen Wert, der Element Punktname sein wird. So können wir den Filmnamen haben, oder in diesem Fall haben wir in unserer API, Es wird Element dot-dot-dot genannt. Also, wenn ich rette, dann okay. Ich sehe nichts, weil ich gesagt habe, wenn es kein Posterbild gibt, aber in unserem Fall ist das ein Posterbild. Also nur zum Test, wie ich Ihnen gesagt habe, drehen wir die Bedingungen hier um, um zu sehen, was wir mit dem Platzhalterbild tun werden. Wie Sie sehen, müssen wir auch hier die Textkomponente importieren, also werde ich es kopieren und okay, nett. Wir haben jetzt den Namen des Films, aber es ist hässlich, denn wenn der Filmname lang ist, drängt er die anderen Filme in die Nähe. Um das zu tun, oder wir können damit umgehen, indem zum Beispiel den Filmnamen hier in der Mitte des Bildes des Platzhalters platzieren. Also lassen Sie uns diesem Text etwas Stil geben, den wir hier sehen werden. Stil und diesen Stil können wir auch einige Glas hinzufügen, die Stile sein können. Und dann drinnen stirbt, können wir zum Beispiel keinen Filmnamen sagen. Und in diesem Filmnamen werden wir unseren Namen des Films im Platzhalter stylen. Also gehen wir jetzt zu den Stilen, die ich hier hinzufügen werde, und Ihrem Glas, das wird der Filmname sein , den wir haben, wie wir hier genannt. Also werde ich hier sagen, dass der Filmname ein Objekt sein wird. Also die erste Eigenschaft für diese Klasse, werden wir ihm eine Position geben, absolut. Ich werde dir sagen, warum. Und so gut können wir zum Beispiel, nur um zu sehen, was passiert. Die absolute Position ist, dass die Komponente in der Mitte oder am Anfang der übergeordneten Komponente lokalisiert wird. Also in unserem Fall, wir, unsere übergeordnete Komponente ist dieser Container, wie Sie hier sehen, berührbare Opazität. Es hat unsere übergeordnete Komponente des Textes. Also in diesem Fall müssen wir die übergeordnete Komponente relativ setzen. Also, wenn ich eine relative oder absolute Position habe, dann werden sie miteinander durch Verwandten verwandt sein. Denn wenn ich diesen Verwandten entferne, dann die Position dieses Artikels, manchmal oder ein Android, würde es oben auf dem Bildschirm befinden, weil ich keine Wahlposition für dieses Kind mit seinem Patent. Also lasst es uns zurücklegen. Wir haben jetzt Position absolut. Sie müssen sicher sein, dass Sie Position relativ haben. Und jetzt werde ich wie einige Eigenschaften geben. Zum Beispiel, um ihm eine gewisse Breite zu geben , können wir die gleiche Breite über die Breite des Bildes, aber weniger wie 20. Außerdem können wir diesen Text mit der Mitte ausrichten. Damit wir diesen Text in der Mitte haben können. Es ist also genau so, wie wir es normalerweise mit dem CSS machen. Und auch, wir können diesen Artikel in der Mitte befindet oder in der Mitte legen, haben Sie zwei Möglichkeiten. Hier. Sie können den Container als Einzelposten machen. Sie können es in einer Weise wie in der Mitte setzen, wie Sie hier sehen. Oder Sie können machen, in diesem Fall sind das Element selbst. Sie können sagen, richten Sie sich selbst und dies selbst würde lassen, die Komponente wird eine Mittelposition haben. Also eine dieser beiden Optionen, ich ziehe es vor, unsere Einzelposten zu verwenden, wie ich alle Elemente in diesem Container in der Mitte ausrichten möchte. Also, jetzt müssen wir den Text oben ein wenig wie von oben drücken , um nicht genau am Rand des Bildes zu sein. So können Sie es auch hier in die Mitte stellen. Ich möchte Ihnen erwähnen, dass es sehr wichtig ist, eine Höhe für den Behälter zu setzen , weil unser Container in diesem Fall diese Karte ist. Auf diese Weise, wenn Sie sehen, wenn Sie ihre Komponenten so ausrichten, wie Sie können , versuchen wir, es hier in die Mitte zu setzen. Die Anweisung, für die Sie sagen können, rechtfertigen Inhalt wird zentriert sein. Also, wenn ich das speichere, wenn ich Justify Content Center setze, wie Sie sehen, alle Inhalte dies nach unten gedrückt, weil die Höhe dieses Containers den Rest der Ansicht hat. Also haben wir hier diesen Schieberegler, und dann haben wir den Rest der Ansicht wird automatisch zugewiesen, weil der Hauptcontainer ein Flex ist. Auf diese Weise müssen wir damit vorsichtig sein. Es ist besser, Höhe für diesen Behälter zu geben. Also werde ich es auch zu einem 100 Pixel geben. In diesem Fall werden wir sehen, dass sich unser Artikel genau in der Mitte befindet und der Name des Films in der Mitte befindet und Höhe des Behälters ist ebenfalls 100. In diesem Fall müssen Sie sicherstellen, dass alle Größen in der Zukunft keine Probleme haben. In meinem Fall werde ich das Rechtfertigungs-Inhalt-Zentrum nicht setzen, aber ich werde die Höhe behalten. Aber ich werde einen kleinen Text hier von oben schieben. So können wir hier DHAP des Filmnamens sagen, es wird wie 10 Pixel haben, können wir sagen. Also werde ich hier dann Pixel setzen. Nachdem wir also gespeichert haben, werden wir sehen, dass der Text schöner ist, wenn der Film kein Bild hat. Also, wenn wir wollen, dass es normal funktioniert, müssen wir ihre Bedingungen wieder umkehren. Also, wenn es ein Posterbild oder verstärkte Pfadanzeige für mich das Bild als normales Bild. Also brauchen wir diesen Knoten nicht. Und es gibt kein Post-Doc Bad Display für mich, ein Text, wo es den Namen des Films halten wird, also brauchen wir es nicht so. Also sagen wir, wenn es kein Posterbild gibt, dann mag diese Klinge nicht, diesen Text. Also speichern wir das einfach. Und dann werden wir das normale Verhalten haben. Wie Sie hier sehen, funktioniert alles gut. Wir haben keine Probleme. 32. Type in React Native: Da Ihre Anwendung wächst, müssen Sie immer viele Fehler und Fehler bei der Überprüfung abfangen. Für einige Anwendungen können Sie auch JavaScript-Erweiterungen wie Gesetz oder TypeScript zur Typprüfung verwenden . Aber es gibt einen einfacheren Weg mit dem TypeScript oder JavaScript, das wir hier verwenden. So können Sie auch den Oberschenkel Ihrer Variablen überprüfen, alle Ihre Requisiten. Also, wenn Sie eine Requisitentypen machen wollen, können wir das auch hier tun. So können wir eine Konstante definieren, wir können es Drops Typen nennen. Also können wir diese Konst nicht sagen. Und dann Requisitentypen. Und diese Requisitentypen wären ein Objekt. Und dieser Gegenstand wird auch diese Stütze enthalten, die wir hier definiert haben. Also haben wir hier Element definiert, dieser Punkt Requisiten. Und dieses Element hier werden wir nicht nur wie ein Wert oder etwas zuweisen. Wir würden eine Windel zuweisen und ich bin, wo ich Typ bringen kann. Ich kann Windel nicht auf eine Bibliothek bringen, die Prop-Typ genannt wird, und es ist bereits installiert, wenn Sie React Native installieren oder starten Sie ein Projekt? Also, jetzt haben wir eine Requisitentypen von Requisitentypen. Und diese Prototypen enthalten wir alle Typen, die Sie für Ihre Eingabeaufforderungen benötigen. In unserem Fall hier haben wir das Element wird ein Objekt sein. So können wir sagen, Requisitentyp dieses Artikels wird Objekt sein. Oder Sie können eine Zeichenfolge definieren. Sie können auch definieren, zum Beispiel, Zahl. So können Sie jeden Typ definieren, den Sie wollen. Also hier werde ich sagen, dass Requisitentypen dieses Artikels oder dieser Eingabeaufforderungen wie Objekt sein werden. Und dann ist das nicht genug, um diese Prototypen an die Komponente anzubringen. Also, wie machen wir das? Wir gehen nach unten, wenn wir die Klasse oder die Komponente oder die reine Komponente exportieren, sagen wir, dass der Klassenname selbst bewachen und dann Typen gelöscht werden. Wie du hier siehst. Sie können dann sagen, dass Requisitentypen, die auf der Oberseite definiert sind. Die Requisitentypen dieser Wache werden also die Prototypen sein, die wir oben definiert haben. Also, nachdem Sie das gespeichert haben und wenn Sie Ihre Anwendung debuggen oder wenn Sie zum Beispiel eine Zuweisung für diese Eingabeaufforderungen tun, wird es Ihnen einen Fehler geben, wenn Sie sagen, dass dieses Element S3 ist, wissen Sie, dass es ein Objekt sein muss. Also lassen Sie uns das gleiche tun wie für das Listenelement, wir brauchen auch die Listenkomponente, die wir zuvor erstellt haben. Also müssen wir auch eine Konstante definieren, meistert Typen. Wir haben hier Titel. Also, dieser Titel wäre Requisitentypen, aber starb an String, weil wir die Zeichenfolge des Titels oder für den Film erhalten. Und auch dieser Inhalt wird Objekt haben, weil er alle Informationen über den Film enthalten würde. Also werden wir hier auch Inhalte setzen und wir vergessen nicht, Requisitentypen aus Gesteinsarten zu importieren. Also hier werden wir auch das Buch Typen setzen. Und am Ende muss man es exportieren, damit man das nicht vergessen muss. Also sagen wir Liste Punkt Requisiten Typ ist gleich Requisitentypen, wie wir hier sehen. Wenn wir also sparen, garantieren wir, dass alles einwandfrei funktioniert. Wir haben keine Fehler in der Konsole oder so etwas. So halten wir jetzt unsere Komponenten mit Requisitentypen. In diesem Fall werden Sie keinen Fehler bekommen, wenn Sie diese Komponenten aufrufen. Also werde ich es Ihnen für die Prüfung zeigen. Ich würde hier eine Nummer für diesen Titel nennen. Ich werde zum Beispiel keinen Text nennen. So würden wir speichern, Sie werden ungültige Requisite, Titel des Typs sehen. Also haben wir hier einen Fehler in der Zeit. Also, wenn Sie diese als Zeichenfolge setzen, dann werden Sie keinen Fehler sehen. Sie müssen also sicher sein, dass der Typ hier richtig ist. Andernfalls erhalten Sie Fehler. Also, wenn Sie in der nächsten Vorlesung sehen, ist es, wenn ich eine Komponente definiere, ich mache diese Prototypen nur zum Debuggen und Fangen vieler Fehler, vielleicht kommt mit einem Tippen. Wie Sie hier sehen, sollte, wenn ich einen Fehler erhalte, ein ungültiger Requisitentitel des Typs String, der der Liste zur Verfügung gestellt wird, als Objekt erwartet werden. Dies liegt daran, wie Sie sehen, ich habe diesen Titel als Objekt definiert, aber es muss eine Zeichenfolge sein. Also haben wir Jahr, um uns zu rühren, und wir speichern das. Und wir gehen wieder zur Konsole. Wir bekommen keinen neuen Fehler. Wir haben nur den Fehler, wo wir haben, der Typ war Objekt. So können Sie in diesem Fall auch Ihre Fehler hier sehen. 33. Scroll zum Scroll: Okay, in diesem Vortrag werden wir sehen, wie wir eine Schriftrolle für diese Rezension oder für die Homepage machen können . Warum ich hier einen Scrollen machen werde. Denn wenn Sie sehen, dass, wenn ich zum Beispiel eine andere Ansicht erstelle, wir Dokumente, Filme haben werden und auch Familienfilme haben werden. In diesem Fall werden Sie sehen, dass Sie nicht in der Lage sein werden, zu scrollen. Und eine Ansicht wird immer kleiner. Und unser Schieberegler, Unsere Ansicht ist durch alle diese Ansichten geteilt. In diesem Fall ist es besser, eine Schriftrolle von Ihnen zu erstellen. Erstellen einer Bildlaufansicht erfolgt also durch die Verwendung einer Komponente von React Native, die als ScrollView bezeichnet wird. So können wir diese Scroll-Ansicht einfach verwenden. Sie können es aus React Native importieren, wie Sie hier sehen, und dann können Sie es verwenden. Und für Raul bist du zufrieden mit diesem ScrollView. Also werde ich alle Ansichten umgeben, die wir hier mit diesem ScrollView haben. Also in ihrem Reaktionsfragment hier müssen wir die Scrollansicht lokalisieren und dann schließen wir sie vor dem schließenden Tag aus Reaktionsfragment. Also werde ich nicht wieder hierher gehen, und ich werde es schließen. Und wie Sie hier sehen, haben wir jetzt Scrollen Möglichkeit in der Anwendung. Auf diese Weise, wenn ich mehrere Ansichten für andere Filme erstelle, wie zum Beispiel, können wir hier mehrere Ansichten sagen. So können wir unsere Anwendung dann sicher und friedlich ohne Probleme scrollen. Und wie Sie sehen, haben wir, wir haben den Rücken bedeckt, die Zeichen des Schiebereglers, die wir zuvor gemacht hatten. Also lasst uns alles zurücklegen. In der nächsten Vorlesung werden wir sehen, wie wir die Daten von populären Filmen, Familien, Dokumentationen usw. erfassen können . 34. Beliebte Fernseh-Shows: Okay, Wenn Sie sich erinnern, haben wir mehrere Dienste erstellt, um populäre TV, kommende Filme und beliebte Filme zu bekommen . Lassen Sie uns also auch einen Schieberegler für diese Dienste erstellen. Und auch werden wir weitere Dienstleistungen wie die Familienfilme und Dokumentarfilme hinzufügen. Lassen Sie uns also anfangen, einen Schieberegler für den beliebten Fernseher zu erstellen. Wir haben beliebte Filme, wir haben kommende Filme hier neu erstellt. Jetzt lass uns den beliebten Fernseher benutzen. Also gehe ich auf die Homepage und dann werde ich auch sagen, besorge mir den beliebten Fernseher, damit wir den Service wieder auf die gleiche Weise anrufen können , wie wir es genau mit den bisherigen Diensten gemacht haben. Also hier werden wir sagen, populär zu werden, dv ist genau der Name des Dienstes, wie wir es hier haben. Und wir werden von den Diensten importiert. Sie müssen also daran denken, dass Sie diese Dienste immer importieren. Und dann bewegen wir uns wieder an die Oberfläche und wir müssen so etwas wie das Set populären TV einstellen. So können wir eine Variable sagen, wo wir beliebte Fernseher bekommen würden. Auf diese Weise können wir auch eine andere Zustandsvariable erstellen, die genau wie populäre Filme sein wird, aber es würde populäre TV genannt werden. Also tun wir mit ihrem gleichen, kopieren wir die gleiche Zeile und wir sagen populäre TV. Und hier sagen wir, Set populären TV. Und auf die gleiche Weise werden wir die Variable verwenden, die populäre TV genannt wird, um es auf die Liste zu pfaden. Also lassen Sie uns diese Ansicht duplizieren. Und dann werden wir hier hinzufügen, nicht populäre Filme, aber wir können zum Beispiel beliebte TV-Shows sagen. Und dann wird der Inhalt populär TV wertvoll sein, die wir oben erstellt haben. Und jetzt werden wir diesen beliebten Fernseher haben. Hier. Siehst du das? Ja, Lead beschwert sich, dass leere Komponenten sich selbst schließen. Also ist es besser, nicht so schließen zu lassen. Das wollte ich schon mal erwähnen, aber ich hatte diese Chance nicht. Also müssten Sie nur hier setzen, wie dieses schließende Tag Tat der gesamten DAG-Komponente ist , die wie eine Tür ist, machen Sie es eine Seite schließenden Tag. Also, auf diese Weise, dass er Länge hat, würde glücklich sein. Also lasst uns sparen. Und dann gehen wir hierher. Wir haben die beliebten TV-Shows. Also, was wir jetzt haben, beliebte Filme, beliebte TV-Shows, lassen Sie uns Dokumentarfilme und Familie haben. Also die gleiche Art und Weise gehen wir zu ihren Diensten und dann werde ich einen neuen Dienst, der aufgerufen werden wird , Familie zu bekommen oder Familienfilme oder Dokumentarfilme zu bekommen. Beginnen wir zuerst mit guten Familienfilmen. Also hier statt kommende Filme zu bekommen, können wir sagen, Get Familienfilme. Und für viele Filme müssen wir die API darauf überprüfen. Also müssen Sie auf die Website der Film-Datenbank-API gehen und dann müssen Sie überprüfen, wie Sie die Filme oder Familie bekommen. Also würden wir Filme setzen und wir werden sehen, dass wir eine Menge Ressourcen haben. Und lass es uns ein bisschen größer machen. Und Sie werden sehen, dass wir nicht so etwas wie ein spezielles Familienfilme haben , wie wir nicht die Kategorien haben. Auf diese Weise. Ich ziehe es vor, dass Sie die Dokumentation mehr lesen, um zu bekommen, was Sie wollen. Nachdem ich die Dokumentation gelesen hatte, fand ich heraus, dass es etwas namens Discover gibt. Und in dieser Abdeckung gibt es mehr, die wir entdecken und TV entdecken und deren Film entdecken. Sie können diese API wie diesen Cover-Slash-Film verwenden , um mehr davon basierend auf einem Filter zu erhalten. Es ist wie Filtern der Filme basierend auf etwas, zum Beispiel, nach Region, gesucht von, und auch Portal-Zertifizierungen umfassen Erwachsene, Video, alle diese Informationen. Sie können sie bekommen, wenn Sie den Film beeinflussen möchten. Also möchte ich filtern nach, zum Beispiel, Jenna, Jenna, zum Beispiel, es ist Art von ihnen wird org Kategorie des Films sein. Und dann müssen wir den Ausweis des Genfer übergeben, wo wir die Familienfilme sehen wollen. Und dann werden wir den Familienfilm so weit bekommen, dass wir auch die großzügigen auflisten müssen , bevor Sie diese API verwenden. Aber lassen Sie uns zuerst einen Bär auf welche API dafür setzen. Also, jetzt werde ich dieses Bad der API in meinem Dienst verwenden ist Paul. Also hier werden wir die API URL haben, die ursprüngliche, und dann werde ich hier die Sache übergeben, die Discover und dann Film genannt wird. In diesem Fall haben wir danach auch die API übergeben. Und hier werden wir diesen Jenner Filter haben. So Geschlecht, Jenner Filter wird wie nach dem API-Schlüssel, den wir beenden. Und dann gehen wir in die Dokumentation und kopieren den Teil, in dem es sagt , welche Jeanette oder welchen Parameter Sie mit dieser API verwenden möchten , um die gefilterten Informationen zu erhalten. So zum Beispiel, würde ich mit Jenna bekommen. Also in dieser Breite Jenna, kann ich es hier verzerren. Und danach werde ich die ID setzen, die es eine Nummer sein wird, wo es die Familienkategorien Film sein wird. Also, wie gehen wir und bekommen diesen Ausweis? Also gehen wir wieder zur API und wir werden eine dieser APIs sehen, die Generika genannt wird. Also hier können wir das verwenden und wir würden wie generische Filmliste bekommen. Und wir können diese API auf die gleiche Weise verwenden, wie wir es mit einem Postboten gemacht haben, um auch, desto mehr Vs oder die ID der Familienkategorie zu bekommen . Also lasst uns Postman öffnen und es genauso, wie wir diesen Dienst nennen werden. Also hier haben wir populäre Filme genannt und wir werden wieder die ID oder die Ingenieure oder die Kategorien der Filme anrufen . Also lasst uns diesen Teil kopieren. Wir können sagen, generische Filmliste. Wir wollen die ID des mehr Visums wissen, so können wir, nach diesem beliebten, wir haben, dies ist eine grundlegende API, wie wir hier gesehen haben, ersetzen wir und hier ist unser API-Schlüssel. Auf diese Weise legen wir es hier und vergessen nicht, diesen Schrägstrich zu entfernen. Und dann drücken wir Eis senden. Wir haben jetzt alle Genome, und eins von ihnen ist Familie, und die ID davon wird 10.751 sein. Also werden wir diese ID kopieren. Es ist sehr wichtig, die ID zu kopieren, nicht den Namen. Auf diese Weise würden Sie mit Jenna hierher gehen und dann werden Sie diesen Ausweis hier platzieren. Und wir sparen. Und dann würden wir auch ihre Familienfilme auf der Homepage bekommen. Also genau, wie wir es mit populären dv gemacht haben. Also kopieren wir den gleichen Teil hier und wir nennen den Service, heißt Get Family Movies, wütend. Wieder, nach oben, haben wir es aus den Diensten importiert. Und dann sagen wir hier eine neue Zustandsvariable, die konstant sein wird. Beliebte TV, nein, wir brauchen auch beliebte oder Familienfilme eingestellt. Also hier werden wir Geschwindigkeit von populären Filmen bekommen. Wir werden Familienfilme hinzufügen. Und hier wird es Familienfilme gesetzt werden. So wird es Familie gesetzt werden. In diesem Fall können wir also auch diese beiden Zustandsvariablen verwenden. Also zuerst, lassen Sie uns die Familienfilme, die wir von der API bekommen haben, die wir hier Filme haben. Und dann sagen wir, Set Familienfilme. Und dann verwenden wir die Variable, die wir hier erstellt haben. Wir nennen es nur Familienfilme. Wir verwenden es in unserer Liste. Lassen Sie uns also eine andere Liste oder eine andere Ansicht einschließlich der Liste erstellen. Und hier drin, auf diese Weise, werden wir genau wie ein paar Familienfilme haben. Und hier anstelle von populären Fernseh- oder populären Filmen würden wir Familienfilme wertvoll nennen. Also hier werden wir eine Mini-Film-Variable haben und dann werden wir den Simulator laufen. Wieder. Wir retten alles. Wir werden sehen, dass wir auch die Familienfilme bekommen, die hier aufgelistet sind. Wie Sie sehen, ist es immer noch wie der Dokumentarfilm oder ein beliebter Fernseher. Dies liegt daran, dass wir den Dienst wichtig haben, aber wir haben ihn nicht benutzt, also müssen wir ihn auch verwenden. Wir haben immer noch hier beliebte TV. Auf diese Weise würden wir Familienfilme bekommen und es wird Mäuse auffrischen. Wir haben jetzt, dass Familienfilme Jenna, oder Kategorie, die aus dem APR kommt. Also gibt es letzte Sache, die Dokumentarfilme genannt wird. Ich werde es dir als Hausaufgaben folgen lassen. Du kannst es schnell machen. Ich bin sicher, dass du es schaffst. Es wird genau das Gleiche sein. Suchen Sie einfach in der API und Sie würden genau das aus dem Dokumentationsaudio bekommen und es von der allgemeinen wie wir es vorher gemacht haben. So wie Sie hier sehen werden, dass wir heiße Aromen haben, Thriller Weisheit. Und es gibt auch etwas, das Dokumentarfilm genannt wird, wie Sie hier sehen. Also möchte ich, dass Sie einen Dienst erstellen und dann müssen Sie auch den ältesten Dienst erstellen, Statusvariable erstellen und die Liste oder die Scrollliste zu unserer Anwendung hinzufügen. 35. Zweite Abschnitt: Okay, lassen Sie uns jetzt einige Refactoring auf unserer Homepage-Komponente machen. Also das erste Refactoring, das ich tun möchte, ist über diejenigen, die die Daten von Filmen in mehreren Methoden sammeln, wie wir mehrere Versprechungen haben, wie dann und fangen mehrmals. So können wir all dies auch in einem Ziel machen, indem wir eine Kombination von Versprechen verwenden. Du weißt also, dass dieser hier für mich ein Versprechen zurückgibt, wie ich es dir gezeigt habe. Also jetzt werden wir es wie alle von ihnen in einer Methode machen und dann werden wir einen dann und einen Fang haben. Also in diesem Fall werden wir nicht geschmolzen mehrere Fehler oder mehrere Thens, und wir werden lange Akkord haben. Also, um das zu tun, zuerst, Ich gehe am Ende dieses Effekts, wie Sie hier sehen, haben wir Wirkung verwendet. Nach ihm. Wir definieren eine Komponente, eine Konstante oder eine Funktion, oder Sie können diese auch vorher definieren. Man kann also nicht sagen, konstant, wir können sagen, gehen Daten holen. Mit diesen guten Daten wird es eine Funktion sein, in der wir alle Versprechen zusammen sammeln werden. So erstellen Sie eine Funktion genau so, wie wir es hier in der Komponente gemacht haben. Wir definieren eine Funktion wie diese. Und dann haben wir eine Pfeilfunktion, und dann haben wir das Detail der Funktion. Also werde ich hierher gehen und sagen, als hätte ich diese Klammern und dann eine Reihe. Und innerhalb dieser Methode werde ich meine Daten definieren. Also vorher, vergessen Sie nicht, gleich zu setzen, um die Konstante in der richtigen Weise zu haben. Jetzt, da Get Data eine Funktion ist, werde ich ein Versprechen machen, wo es für mich ein Versprechen aller Funktionen zurückgibt , die ich bereits innerhalb des Effekts definiert habe. Also, um das zu tun, setzen wir zurück, einfach zurückkehren. Wir werden so ein Versprechen haben, wie dieses Gedicht ist Glas kommt von JavaScript. Und wir sagen alles. Also, wenn wir alle setzen, wird dies eine Reihe von mehreren Versprechungen sein, dass sie zusammen kombiniert werden und mir das auch im Array geben werden. Also lassen Sie uns den Verwendungseffekt wieder öffnen, wir haben mehrere Methoden. Also werde ich hier in all das Array setzen, wo ich alle Funktionen aufrufen werde, die ich für die Filme brauche. Also lasst uns zuerst kommende Filme bekommen. Und dann werden wir die beliebten Filme bekommen. Und wir würden auch das beliebte Fernsehen bekommen. Und dann bekommen wir Dokumentar- und Familienfilme, weil ich dir gesagt habe, dass ich die Dokumentarfilme als Hausaufgaben für dich erstellt habe und du es getan hast. Ich bin mir sicher. Also, jetzt haben wir Dokumentarfilme am Ende bekommen. Auf diese Weise werden wir all diese Versprechen haben, die für mich in einem Ziel zurückgegeben wurden , das Array von Versprechungen genannt wird. Also rufen wir jetzt get data Methode. Um diese Datenmethode zu verwenden, verwenden wir es auch als Versprechen, weil seine Rückkehr für uns ein Versprechen. Und dieses Versprechen, wir können es Inside Use-Effekt nennen. Also würden wir das alles loswerden. Also lassen Sie es uns jetzt so behalten. Und wir nennen das bekommen Datenfunktion hier. Wir können nur ein Konsolenprotokoll durchführen, um sicherzustellen , dass wir die Daten wirklich richtig bekommen. Also werde ich hier sagen, Daten holen. Und dann gibt es Daten, es wird für mich dann zurückkehren, weil es ein Versprechen ist. Auf diese Weise werde ich dann sagen, und dann werde ich Werte bekommen. Und diese Werte auf diese Weise werden sie auch ein Array sein , weil wir das Versprechen als Array von alten haben. Auf diese Weise werden wir das Array der Versprechen genau in die gleiche Reihenfolge setzen , wie wir es hier platziert haben. So wird die Antwort haben alle Callback wird ein Array enthalten kommende Filme, zum Beispiel, und ebenso die beliebten Filme und beliebte TV- und Familienfilme. Also habe ich diese Array-Antworten auf diese Weise platziert. Ich bin kommende Filme, beliebte Filme und beliebte TV, Familienfilme dokumentieren alle Filme. Sie müssen vorsichtig sein, dass Sie die gleiche Reihenfolge haben, die Sie hier aufruft, Sie müssen das Array auch hier auf die gleiche Weise haben. Seien Sie also vorsichtig, um Ihre Daten nicht zu verlieren. So werden die beliebten Filme nicht von etwas anderem stattfinden, wenn Sie das vermischen. Und wie Sie wissen, ist dies eine Callback-Funktion. Auf diese Weise muss ich auch so etwas zurückgeben. Wir können das mit Pfeilfunktion wie folgt tun. Und diese Pfeilfunktion, Ich kann angeben, was es mit diesen Variablen zu tun, wie setzen Sie das Dokument, dass er Filme Familienfilme und beliebte TV eingestellt. Auf diese Weise kann ich alle diese Elemente verschieben, die hier genannt werden, damit wir sie dann innerhalb dieses Get Data verschieben können. Also lassen Sie uns jetzt speichern, um zu sehen, ob wir jetzt formatieren sind alles in Ordnung. Und jetzt werde ich meine Daten einlegen und die Daten einstellen. Also zuerst müssen wir die kommenden Filme haben und wir haben die Filme als Bilder, wie Sie sich erinnern. Aber anstatt Filme hier zu haben, werden wir es wie ein beliebtes Kino haben. Auf diese Weise können wir diesen Teil schneiden und ihn hier platzieren. Und dann sagen wir kommende Filme für jeden Film. Und dann bauen wir die Filme Bilder Array, wie wir zuvor gesehen. Auch hier brauchen wir, um die beliebten Filme zu bekommen. So können wir es auch hier nach populären Filmen setzen, aber die Variable wird keine Filme sein, wird populäre Filme sein. Und wir müssen auch den beliebten Fernseher genau so bekommen , wie wir es mit all diesen Sachen gemacht haben. Also werde ich es schnell machen. Auf diese Weise setzen wir alle diese Variablen oder Zustandsvariablen mit ihren Byte-Arrays oder Antworten aus, die Daten von den Diensten erhalten, die wir zuvor erstellt haben. Also brauchen wir nicht mehr all die genannten Dienste. Wir können sie jetzt entfernen. Also, weil wir nicht wieder trocken haben und dann Fang für jeden Service hinzufügen müssen. Jetzt haben wir alles in einem kombiniert und wir werden weniger Platz für Code haben. Wir haben also nicht viele Anrufe hier, aber wir müssen auch den Fehler abfangen. Also danach dann sehen Sie hier haben wir hier, dann, und dann danach werde ich hier fangen. Und mit diesem Haken werde ich einen Fehler fangen. Und es ist genau so, wie wir es vorher getan haben, um den Fehler zu fangen , der kommt, falls es ein Problem im Back-End gibt. Auf diese Weise werde ich Fehler sagen und dann Fehler setzen, was dieser ist. Wir haben auch wertvoll für set-Fehler erstellt geblieben. Es wird ein Fehler sein. So können wir, auf diese Weise, zeigen wir eine Fehlermeldung, wie wir zuvor gesehen haben. Aber in irgendeiner Weise werden wir eine spezielle Komponente für den Fehler tun, wie wir später sehen werden. Also jetzt lassen Sie uns alles speichern und sehen, ob unsere Anwendung immer noch gut funktioniert. Wie Sie sehen, bekommen wir immer noch die Daten in Ordnung. Das einzige kleine Problem oder Warnung, die wir nennen können, dass wir duplizierte Namen von Variablen haben. Also, weil wir hier die Zustandsvariable haben, die populäre Filme genannt wird. Wir haben wieder hier beliebten Film. Also möchte ich diese Variablen vielleicht mit Daten versehen, die wir so setzen können. So kommende Filme Daten und auch für den ganzen Rest. Und so können wir zwischen diesen wertvollen und den Zustandsvariablen unterscheiden. Auf diese Weise werden wir alle von ihnen Suffix zu seinen Daten haben. Und hier werden wir auch kommende Film-Daten und dann beliebte Filme haben, die, und hier werden wir beliebte TV-Daten und viele Film-Daten haben. Und das gleiche für den Dokumentarfilm. Also, auf diese Weise werden wir haben, halten die, wie. Wir haben keine Duplizierung der Benennung von Konstanten weil wir keine populären Filme als Zustandsvariable haben. Und dann definiere ich es hier wie eine Datenvariable, also ist es besser, sie auf diese Weise zu haben. Eine andere Sache, die ich Ihnen zeigen wollte, wie wir können auch nicht zeigen, dass Ansicht oder die Liste vollständig, zum Beispiel, dieser Schieberegler, bis die Daten fertig sind. Zum Beispiel kann ich für den Schieberegler alles in einem Objekt umgeben, wie Sie hier sehen. So können wir hier ein Objekt setzen. Und dieses Objekt wird für mich Daten enthalten, die ich anrufe. Zum Beispiel, in diesem Fall hier, die Filme Bilder. Und dann habe ich und 2 mal, wie wenn es Filme Bilder gibt, dann setze diese Ansicht. Auf diese Weise kann ich den Blick auch in die Quere stellen. Als ob wir kein Problem haben, wenn wir keine Filme und Bilder haben. Diese sind Schieberegler, wird nicht angezeigt, wenn es keine Filme Bilder oder Filme Bilder sind nicht definiert. Also werden wir das Gleiche für die anderen tun. So in der Art und Weise, wie wir es tun können, wie wir es gerne tun, um Probleme zu vermeiden. Sie können einfach ein Objekt erstellen. Und in diesem Objekt legen Sie die Datenvariable. Und dann setzen Sie und, und dann setzen Sie noch eine Klammer. Und in diesen Klammern können Sie hier die Ansicht selbst setzen. Und wenn Sie schöner speichern, speichern wir für Sie alle oder formatieren Sie diesen Code für Sie neu. Also werde ich das gleiche für die anderen Filmtypen tun. Also können wir hier den Filmnamen und auch die Klammern haben, damit wir es auf alles setzen können. Also werden wir diesen haben und auch diesen und auch diesen hier werden wir beliebten TV stellen. Wenn es kein beliebtes TV gibt, dann gebucht. Zeigen Sie nichts und stellen Sie die Ansicht, wenn es populäre TV. Das Gleiche werden wir auch für Familienfilme, Ansichten und auch hier tun. Also, warum mache ich das? Ich mache dies, weil ich vermeiden möchte, dass jedes Problem mit meiner Anwendung passieren kann , wie hängen oder das nicht angezeigt wird oder irgendetwas. Sie müssen also Ihre Anwendung immer mit den richtigen Daten umgeben, da sonst Probleme auftreten. Immer, wenn wir für den Benutzer erscheinen. So sollte dem Benutzer, dem Benutzer C, nichts angezeigt werden, immer ist die Anwendung stabil ohne unerwartete Fehler. Sie müssen also immer die umgeben, alle erwarteten Probleme können in Ihrer Anwendung auftreten. Und vielleicht werden Sie sich fragen, wie ich Kommentare in React Native hinzufügen kann. Also, wenn Sie hier sehen, können Sie einen Kommentar hinzufügen, indem Sie Control Slash drücken. Zum Beispiel können Sie hier Familienfilme wie diese setzen. Und dann setzen Sie Control Slash oder Kommentar Schrägstrich auf die Tastatur. Und dann wird es so sein. So wird es Objekt und in ihm ein Kommentar sein. Sie können einen Kommentar wie diesen nicht allein in React Native einfügen, da dies nicht erkannter Befehl ist. Um also einen Kommentar zu setzen, müssen Sie ihn auf diese Weise zwischen Objekten setzen. So können Sie auch sagen, dass wir die Kommentare haben, wie für viele Filme oder einen Kommentar, um Ihre Funktionen in der richtigen Weise zu beschreiben, werde ich auch die beliebten TV-Shows und andere Kommentare, die wir hier tun. Auf diese Weise werden wir auch Dokumentation für die Entwickler erstellen. Sie können also auch Kommentare für den Entwickler setzen, die beschreiben, was diese Methode ist oder was diese Ansicht tut. Auf diese Weise werden Sie kein Problem haben, Ihren Code nicht zu verstehen. Wir gehören zu den Entwicklern. Aber bevor wir mit dem nächsten Schritt übergehen, werden Sie vielleicht einen Fehler in Ihrer Anwendung sehen , wenn wir alle diese Bedingungen festlegen, wie hier, wie Sie sehen, haben wir hier Filme, Bilder und all diese Bedingungen. Und dieser Fehler, der besagt, dass Textzeichenfolge innerhalb einer Textkomponente gerendert werden muss. Dies geschieht, weil wir unsere Zustandsvariablen mit einem String-Wert initialisiert haben. Auf diese Weise, wenn Sie das sagen, okay, ich habe eine Zeichenfolge, einen leeren String-Wert. Wir brauchten das vorher, weil wir unseren Staat initialisieren wollten. Auf diese Weise scrollen wir oder sehen, wir haben hier einen String, einen leeren String-Wert , der nicht rendern kann, weil Sie eine Zeichenfolge in einem Text oder einer Textkomponente haben müssen . Auf diese Weise ist es besser, alle diese Anfangszustände immer als nichts zu setzen, wie undefiniert oder nicht. Auf diese Weise wird Ihre Anwendung ohne Initialisierung von Strings problemlos geladen. So werden Sie diesen Fehler vermeiden, wenn Sie ihn sehen. Auf diese Weise können Sie wie ein Objekt oder einen undefinierten Wert zunächst in der ScrollView rendern, und dann wird es mit Daten gefüllt und dann werden unsere Ansichten korrekt gerendert. Also nur wichtig, stellen Sie sicher, dass Sie Heilungszustände mit leeren Werten initialisieren. Nichts Besonderes. So haben wir hier wie zum Beispiel, der Fehler initialisiert war falsch. Okay, das ist in Ordnung, weil wir am Anfang brauchen, dass wir keinen Fehler haben. Und dann setzen wir den Fehler auf true, wenn wir einen Fehler haben. Aber hier haben wir, wir gehen davon aus, dass alle diese Zustandsvariablen am Anfang null oder undefiniert sind. Auf diese Weise haben wir jetzt Kommentare und eine klare Dokumentation meines Codes. Und auch ich habe alles umgeben, um hier keine Fehler zu haben. Dies ist also das wichtigste Refactoring, das wir für die Homepage-Anwendung tun können. In den nächsten Vorlesungen werden wir sehen, wie man Laden hinzufügt und wie wir auch die Fehlerkomponente hinzufügen können , falls es ein Problem in unserer API der Anwendung gibt. 36. Spinner hinzufügen: Alles klar, hier sind wir in einem neuen Abschnitt. Wir werden sehen, wie wir eine Navigation implementieren können. Warum brauchen wir die Navigation, diese Navigation ist in dem Fall erforderlich, wenn ich einen Film besuchen möchte, wenn ich zum Detail des Films gehen möchte. Wenn ich also auf diesen Film klicke, werde ich zu einem anderen Bildschirm oder einer anderen Seite navigieren. So dass die Navigation in React Native mit einer bestimmten Art und Weise arbeitet , wo wir eine externe Bibliothek benötigen, die native Navigation React genannt wird. Und wir müssen diese Bibliothek installieren, um mehrere Bildschirme in unserer Anwendung navigieren zu können. Aber vor allem, wie Sie hier sehen, haben wir einen Fehler, der ist, ich habe vergessen, im vorherigen Abschnitt zu beheben, sagen wir nur fehlgeschlagene Prop-Typ ungültige Requisite Inhalt. Der Inhalt von Europa Mitglied der Inhaltsliste kommt als Array. Und wir sagten, hier ist ein Objekt. Also, wenn die API oder die Homepage an ihre Liste ein Array sendet und hier ein Objekt ist, dann werden wir diesen Fehler erhalten. Und Sie können auch das Detail dieses Fehlers im Terminal sehen. Wie Sie hier sehen. Zum Beispiel habe ich hier wie gefüllte Prop-Typ ungültigen Prop-Typ Inhalt vom Typ Array, weil ich hier und Array zur Verfügung gestellt habe. Also ist es besser, es auch zu ändern. Sie können kein Optionsarray oder eine Liste haben, also können Sie mehrere Optionen dieses Fremden für mich haben. Ich werde es als Array setzen. Und wie Sie sehen werden, ist der Fehler verschwunden und wir werden ihn nicht mehr haben. Also das ist y ein Vorteil der Eingabe. Wenn die Daten einen anderen Typ haben als den, den Sie hier angeben, werden Sie diesen Fehler bemerken. Und das ist eine tolle Sache am Prototyping. Okay, gehen wir zu unserer React-Navigation. Wenn Sie gehen und diese Navigation installieren möchten, müssen Sie eine Website besuchen, die React navigation.org genannt wird. Und wenn Sie auf diese Website gehen und auf die Homepage gehen, wie Sie hier sehen, werden Sie etwas sehen, das Redox genannt wird. Und wir müssen hier diese Bibliothek installieren. Also rate ich Ihnen, die Dokumentation immer wirklich sorgfältig zu lesen , weil es wirklich manchmal kompliziert ist, die Navigationsbibliothek zu installieren, besonders mit React Native. Und wir werden hier React Native CLI verwenden, nicht exportieren. Sie müssen also berücksichtigen, dass Sie React Native CLI verwenden. Also, jetzt lasst uns anfangen. Zunächst einmal müssen Sie einige gemauerte Mystiker sehen, wie zum Beispiel, wie hier brauchen Sie einen React Native Express zu haben. Sie benötigen etwas Wissen in React, dessen Tadeln React Context. Okay, kein Problem damit. Beginnen wir mit der Installation der Bibliothek. Zuallererst müssen Sie npm install React Native ausführen oder die Navigation nativ reagieren. Dann werden Sie in der Lage sein, diese Bibliothek zu installieren. Gehen wir zu unserem Visual Studio-Code und installieren Sie diese Bibliothek. Ich werde das Terminal wie immer öffnen, wie wir zuvor gelernt haben, und fügen Sie diesen Befehl hier ein. Okay, hier wurde die Bibliothek installiert und ich habe meine Installation bereit. Lassen Sie uns in der Dokumentation fortfahren. Sie müssen die Dokumentation sehr sorgfältig lesen. Hier steht also, dass diese Bibliothek jetzt unseren React Native Gesten-Handler, React Native, 3D animierte React Native Bildschirme installieren wird React Native sichere Bereiche Kontexte reagieren. Sie wirken native Maske zu sehen. Also alle, die wir brauchen, um sie zu installieren. Hier heißt es, dass Sie für verschiedene CLIs installieren müssen. Einer von ihnen ist Expo und der andere ist React Native. Und da wir React Native CLI verwenden, werden wir diesen Kommentar kopieren. Sie haben immer, manchmal etwas namens Yarn. Garn ist genau wie MPM. Sie können auf die Dokumentation des Garns gehen und Sie können es auch installieren und R1 oder Garn anstelle von MPM verwenden. Auf diese Weise werde ich diesen Kommentar kopieren. Sie haben hier einen Kopier-Button, damit Sie ihn kopieren können. Und dann werden alle diese Bibliotheken, die hier erwähnt werden, installiert. Nun, lassen Sie uns wieder gehen und versuchen, diese Bibliothek mit unserer gemeinsamen Zeile zu installieren. Und dann werde ich es einfügen und wir werden auf die Installation warten. Okay, jetzt ist die Installation fertig. Also habe ich hier eine Warnung, dass es sagt, wie MPM verfügbar ist, Update auf NPM, sein Update von NodeJS. Also immer, wenn Sie installieren müssen, können Sie nur sehen, wie Sie es aktualisieren. Es läuft nur npm installieren Sie ein globales MPM. Wenn Sie diese Notiz sehen, bedeutet dies, dass Sie auf eine höhere Version von NodeJS und auch auf das Paketverwaltungssystem aktualisieren können, damit Sie sie auch aktualisieren können. Also hier wurden unsere Bibliotheken installiert, weil wir React Native verwenden, müssen wir einen Kommentar ausführen. Hier. Es besagt, dass Sie nicht brauchen oder von React Native 0.6 und höher. Als ob das Verknüpfen automatisch erfolgt. Was er meint, indem React nativ mit iOS-Komponenten oder Android-Komponenten verknüpft, die in den Projekten sind, die wir haben. Wie wir hier sehen können. Sie werden automatisch wie iOS und Android verlinkt. Weil die Installation. Von diesen Bibliotheken gehen Sie zu den Knotenmodulen und Sie müssen die Komponenten und die nativen Komponenten verknüpfen , die in iOS oder Android oder einem Knotenmodul installiert sind, müssen Sie sie von React Native 0.6 und höher miteinander verknüpfen. Sie müssen das nicht wie React Native Link tun. Aber wenn Sie niedrig oder niedriger React Native haben, dann müssen Sie diesen Kommentar ausführen. Aber in meinem Fall brauche ich es vorerst nicht. Also dann sagt er, wenn Sie auf Mac sind und sich für iOS entwickeln, wie mein Fall hier, wie Sie sehen, ich benutze iOS, ich benutze Mac. Sie müssen diesen Befehl ausführen, der MAX pod install iOS heißt. Auf diese Weise müssen Sie andere Bibliotheken installieren, aber sie werden wohin in die Bibliotheken des iOS-Projekts gehen. Auf diese Weise werde ich diesen Kommentar hier einfügen und ausführen. Und dann nach der Installation dieser Bibliotheken müssen Sie wissen, dass jede Installation von wie zum Beispiel diese Pod-Installation, wie wir zuvor gesehen haben, Sie den Projekt-URI neu starten müssen, um den iOS-Simulator neu zu starten. In diesem Fall wird unser Projekt nicht nur funktionieren, wenn wir das Projekt neu starten. Wie wir hier sehen, haben wir das Terminal, zum Beispiel hier, dieses, müssen Sie es komplett schließen. Und dann in Ihrem Terminal, müssen Sie den Kommentar ausführen, der React Native Run iOS heißt. Das Gleiche gilt für Android. Sie müssen also auch Ihr Projekt nach der Installation einiger Bibliotheken neu starten , um keinen Fehler zu erhalten, wie wir hier sehen. Und in React Native sagt, die Installation von React Native abzuschließen. Wie Gesten-Handler, der eine Bibliothek ist die mit den Bibliotheken angehängt ist, die er installiert hat. Fügen Sie Folgendes hinzu. An der Spitze. Der Anfang der Eintragsdatei, die ab.js oder index.js ist. Auf diese Weise muss ich diesen Import verwenden und zu meiner app.js hinzugefügt werden. Also müssen wir hier gehen, und dann gehen wir zu app.js. Und hier muss ich diese Bibliothek importieren. Und er sagte, es sei besser, oben zu sein. Das müssen wir also ganz oben auf der Liste der Einfuhren setzen. Danach stellen wir sicher, dass die Bibliothek der Navigation einwandfrei funktioniert. Also hier sehen wir, wie wir diese Bibliothek installieren. Immer wenn es einige Updates gibt, müssen Sie immer die Dokumentation befolgen, da einige Updates auftreten können, einige Updates vielleicht ändern wir oder ein Installationsweg wird sich ändern. Also ist es besser, immer der Dokumentation in der Zeit der Aufnahme dieses Videos zu folgen. So ist es, wie ich dir gezeigt habe. Also jetzt werden wir ein Beispiel für die Navigation machen, wie wir in der nächsten Vorlesung sehen werden. Aber denken Sie daran, dass Sie Ihre Anwendung neu starten, bevor Sie mit der nächsten Vorlesung beginnen. 37. Error hinzufügen: Okay, in dieser Vorlesung werden wir eine Fehlerkomponente erstellen, die wie ein Fehler hier angezeigt wird, falls die Daten nicht richtig geladen werden. So können wir eine Komponente erstellen, wie wir es zuvor getan haben. Also werde ich zum Komponentenordner gehen und dann werde ich hier sagen Fehler Node.js und diesen Pfeilpunkt Punkt JS Ich werde die Snippets verwenden. Um also eine reine Komponente zu erzeugen und reine Komponente zu einem, B, B, C, S und Wochenende reine Komponentenklasse zu erzeugen, so dass wir diesen Zustandsteil entfernen können. Und wie ich Ihnen bereits gesagt habe, müssen wir das importieren oder es von React erweitern. Also müssen wir auch in dieser Komponente zu importieren reagieren. So können wir das mit EMR tun. Auf diese Weise haben wir React aus React importiert. Also jetzt ist unsere Komponente fertig. Also würde ich für mich als Komponente zum Beispiel zwei Fehler erstellen. Und diese Fehler, sie können wie etwas sein. Die erste Zeile kann etwas schief gelaufen sein. Und die andere, wir können wie stellen Sie sicher, dass Sie online sind und starten Sie die App neu. Aber wir machen auch diese Komponenten irgendwie dynamisch, so dass wir Standardwerte für unsere Requisiten geben können. Lassen Sie uns zunächst zwei Eingabeaufforderungen haben. Und diese beiden Sonden können wir ihnen Namen geben. Sie können zum Beispiel, wir können etwas wie Fehler text1 und Fehlertext zwei sagen. Und diese beiden Eingabeaufforderungen erhalten dann wieder einen Namen wie Fehlertext1 und Fehlertext. Also werde ich hier Konstante setzen, wie eine Eingabeaufforderung wird Fehler Text1 oder Fehlertext sein. Wir können einen und Fehler-Texte zu Zeile zwei sagen. Und dann wird es diese Punkt-Requisiten haben. Und wir können divs für diese Aufforderungen machen. So können wir auch die Typen in einer Weise oder rechts importieren, die Typen, die wir hier geben können, Requisitentypen und Fehlertext wird man Requisitentyp eine Zeichenfolge haben , weil sie nur eine Zeichenfolge sein werden. Und Fehler dauert zwei wird ebenso wie String haben. Auf diese Weise habe ich die Requisitentypen, ich habe auch die Eingabeaufforderungen für ihre Komponente. Als nächstes können wir in der Vorlage wie eine Ansicht erstellen, und diese Ansicht wird in der Mitte der Anwendung sein. Also müssen wir auch die Ansichtskomponente importieren. Also haben wir hier eine Ansicht, wir müssen importieren, eine Ansicht von React nativen Boden. Wir haben hier Ansicht und es wird von React Native kommen. Auf diese Weise werden wir den Blick in die richtige Weise haben. Und dann in der Ansicht werde ich zwei Textkomponenten haben. Also müssen wir auch diese Textkomponenten importieren. Also werde ich hier Text haben, und dann werde ich hier nennen, dass die x-Komponente. Also haben wir hier Text1 oder wie feste Komponente erste. Und es wird darin die, die, die Komponente oder den Fehler Text1 enthalten . Auf diese Weise werden wir Fehlertext eins in der ersten Zeile und Fehlertext auch in der zweiten Zeile hier haben. Also lasst uns auch etwas Styling machen. Also werde ich eine Konstante definieren, wir können es Stile nennen. Und diese Stile werden aus dem Stylesheet importiert, das wir importieren werden. Und das wird Create-Methode haben. Und wir können Methode erstellen, definieren Sie die Möglichkeit, mehrere Klassen für unser Styling zu haben. Also lassen Sie uns das Stylesheet als auch von React Native Komponente importieren. Also haben wir hier, die Komponente ist wichtig. Wir haben erstellen und wir werden auch eine Klassen definieren. Also lassen Sie uns wie für den Container wie immer tun, können wir ihm einen Stil geben und dieser Stil kann aus Stilen importiert werden. Und wir können es geben, wie wir es Container nennen, wie jede Klasse immer, die wir in der Anwendung tun. Dann wird dieser Container genau die gleichen Dinge haben, die wir immer definieren. So Container wird Beine eins haben, Inhalt zentrieren, Elemente ausrichten, zentrieren. Wir können uns auch für diese wie Fehlertexte sterben lassen. So können wir Ihren Stil geben und diese Stile werden wie der Name des Textes haben. Wir können es so geben. Und das gleiche wird für die zweite Zeile der erwachsenen Komponente passieren. Also hier werden wir eine andere Klasse haben, die Text genannt wird. Und dieser Text würde wie die Eigenschaften enthalten, die wir die Farbe geben können. Wir können Farbe sagen. Hier können wir es wie schwarz geben oder wir können keine Farbe geben. Es würde standardmäßig die Farbe schwarz nehmen. Und wir können hier Schriftgewicht geben, um wie fett zu sein, so etwas wie ein großes zu sein, ein wenig, damit der Benutzer es lesen kann. Und wir vergessen am Ende nicht, weil wir prompte Typen haben, können wir das auch sagen. Fehlerkomponente, diese, die wir vorher erstellt haben, ist Requisitentypen davon sind die Requisitentypen, die ich auf dieser Spitze definiert habe. Auf diese Weise garantiere ich, dass diese Komponente diese Eingabeaufforderungstypen liest. Auf diese Weise ist unsere Komponente bereit, wir können sie verwenden. Jetzt muss ich dieses Semikolon entfernen. Und auch. Hier habe ich einen Fehler, der Requisitentypen genannt wird. Ich muss die Requisitentypen importieren, was wir auch vorher gemacht haben. Also müssen wir den Requisitentyp von Requisitentypen importieren. Auf diese Weise werden wir alle Elemente definiert und unsere Komponente ist bereit für die Verwendung. Also kamen wir wieder auf die Homepage und wir können auf dem Home-Bildschirm, Sie war dieser Fehler wie Zustandskörperin Sie war dieser Fehler wie Zustandskörper Lage, einen Fehler genau anzuzeigen, wie wir mit geladen gemacht haben. So können wir auch hier definieren, ob es einen Fehler gibt oder es gibt, als ob wir keinen Fehler haben. Also, wenn es einen Fehlerzustand gibt, und dann können Sie die Komponente anzeigen, die als Fehler bezeichnet wird. Auf diese Weise müssen wir unsere Komponente importieren. Also haben wir hier Fehler. Und dieser Fehler wird wie sofort geschlossen sein, weil es ein einzelner Typ oder eine einzelne Zeile ist. Es hat keinen Inhalt. Also müssen wir den Fehler importieren. Also gehen wir auf die Spitze und dann gehen wir zu unseren Importen. Wir können es hier tun, nachdem wir die Liste importiert haben. Also werde ich hier sagen Importfehler von, und dann werde ich meine Komponenten setzen, und diese Komponenten werden einer von ihnen Fehler sein. Auf diese Weise habe ich nach Fehlerkomponente importiert. Nun, schön, wir haben alles in Ordnung, aber wir haben nicht die Möglichkeit, die Fehlermeldung hier zu sehen , weil wir derzeit keinen Fehler haben, weil nach diesem Fehler anfänglich falsch ist. Also, wenn es einen Fehler in unserer API gibt, dann können wir es auf 0 setzen, überhaupt nicht, was zu tun ist. Auf diese Weise können wir diesen Fehler auch entfernen. Wir können einfach so einen Anruf zurückschicken, um sich nicht zu beschweren. Und dann haben wir auch den Setfehler. Also müssen wir sagen, dass, wenn es gibt, es geladen ist und es keinen Fehler gibt. So können wir auch ein weiteres Ende hinzufügen, um zu sagen, dass, wenn es keinen Fehler gibt, dann okay, Anzeige für mich, die Anwendung oder die Scroll-Ansicht, alles. Wenn jedoch ein Fehler vorliegt, zeigen Sie diese Fehlerkomponente an. Schön. Also haben wir jetzt hier, wenn es keinen Fehler gibt, also lasst uns die Bedingung umkehren, wie wir es immer nur zum Testen tun. Also bekomme ich hier einen Fehler, weil ich denke, es gibt einen Tippfehler. Also ich weiß, es ist ein Prototyp, also müssen wir eine Requisitentypen haben, Erntearten. Sie müssen also immer mit Tippfehlern vorsichtig sein, um so einige Pfeile zu vermeiden. Also lasst uns sparen. Okay, wir haben jetzt eine leere Seite. Also diese leere Seite, weil wir keinen Wert haben, haben wir keine Eingabe oder Parameter für diesen Fehler, weil wir hier Requisiten haben und diese keinen Wert haben. So können wir auf diese Weise einen Standardwert für diese Fehler festlegen. die gleiche Weise, wie wir es mit Requisitentypen gemacht haben, können wir auch auf Standardwerte setzen. Also diese Standardwerte, können wir sie auf die gleiche Weise definieren, wie wir abrupte Typen haben. So können wir eine Konstante definieren, wir nennen es eine Standard-Requisiten und Fehler. Text1 wird wie Kugeln haben, etwas ist schief gelaufen. Fehler bei x2 wird auch diesen Satz haben. Und dann können wir die gleiche Art und Weise verwenden, wie wir mit den Fehlerprop-Typen gemacht haben. Wir können Fehlerpunkt-Standardwerte sagen. Also in Standard-Requisiten. Auf diese Weise werden die Standard-Ports genau auf die gleiche Weise zugewiesen, wie sie benannt werden. So wird der Name Fehler text1 diesen Wert haben und Fehler dauert zwei wird diesen Wert haben. Wenn wir sparen, werden wir sehen, dass wir Ops haben. Alles ist gelaufen, etwas ist schief gelaufen. Also lasst uns diese Bedingungen zurückkehren. Also, wenn es einen Fehler gibt, zeigen Sie mir diese Fehlermeldung. Wenn es keinen Fehler gibt, dann zeigen Sie mir die Filme laden und die Film-Anwendung oder die Film-Liste, die wir hier haben. 38. Installieren der React Navigation: Alles klar, hier sind wir in einem neuen Abschnitt. Wir werden sehen, wie wir eine Navigation implementieren können. Warum brauchen wir die Navigation, diese Navigation ist in dem Fall erforderlich, wenn ich einen Film besuchen möchte, wenn ich zum Detail des Films gehen möchte. Wenn ich also auf diesen Film klicke, werde ich zu einem anderen Bildschirm oder einer anderen Seite navigieren. So dass die Navigation in React Native mit einer bestimmten Art und Weise arbeitet , wo wir eine externe Bibliothek benötigen, die native Navigation React genannt wird. Und wir müssen diese Bibliothek installieren, um mehrere Bildschirme in unserer Anwendung navigieren zu können. Aber vor allem, wie Sie hier sehen, haben wir einen Fehler, der ist, ich habe vergessen, im vorherigen Abschnitt zu beheben, sagen wir nur fehlgeschlagene Prop-Typ ungültige Requisite Inhalt. Der Inhalt von Europa Mitglied der Inhaltsliste kommt als Array. Und wir sagten, hier ist ein Objekt. Also, wenn die API oder die Homepage an ihre Liste ein Array sendet und hier ein Objekt ist, dann werden wir diesen Fehler erhalten. Und Sie können auch das Detail dieses Fehlers im Terminal sehen. Wie Sie hier sehen. Zum Beispiel habe ich hier wie gefüllte Prop-Typ ungültigen Prop-Typ Inhalt vom Typ Array, weil ich hier und Array zur Verfügung gestellt habe. Also ist es besser, es auch zu ändern. Sie können kein Optionsarray oder eine Liste haben, also können Sie mehrere Optionen dieses Fremden für mich haben. Ich werde es als Array setzen. Und wie Sie sehen werden, ist der Fehler verschwunden und wir werden ihn nicht mehr haben. Also das ist y ein Vorteil der Eingabe. Wenn die Daten einen anderen Typ haben als den, den Sie hier angeben, werden Sie diesen Fehler bemerken. Und das ist eine tolle Sache am Prototyping. Okay, gehen wir zu unserer React-Navigation. Wenn Sie gehen und diese Navigation installieren möchten, müssen Sie eine Website besuchen, die React navigation.org genannt wird. Und wenn Sie auf diese Website gehen und auf die Homepage gehen, wie Sie hier sehen, werden Sie etwas sehen, das Redox genannt wird. Und wir müssen hier diese Bibliothek installieren. Also rate ich Ihnen, die Dokumentation immer wirklich sorgfältig zu lesen , weil es wirklich manchmal kompliziert ist, die Navigationsbibliothek zu installieren, besonders mit React Native. Und wir werden hier React Native CLI verwenden, nicht exportieren. Sie müssen also berücksichtigen, dass Sie React Native CLI verwenden. Also, jetzt lasst uns anfangen. Zunächst einmal müssen Sie einige gemauerte Mystiker sehen, wie zum Beispiel, wie hier brauchen Sie einen React Native Express zu haben. Sie benötigen etwas Wissen in React, dessen Tadeln React Context. Okay, kein Problem damit. Beginnen wir mit der Installation der Bibliothek. Zuallererst müssen Sie npm install React Native ausführen oder die Navigation nativ reagieren. Dann werden Sie in der Lage sein, diese Bibliothek zu installieren. Gehen wir zu unserem Visual Studio-Code und installieren Sie diese Bibliothek. Ich werde das Terminal wie immer öffnen, wie wir zuvor gelernt haben, und fügen Sie diesen Befehl hier ein. Okay, hier wurde die Bibliothek installiert und ich habe meine Installation bereit. Lassen Sie uns in der Dokumentation fortfahren. Sie müssen die Dokumentation sehr sorgfältig lesen. Hier steht also, dass diese Bibliothek jetzt unseren React Native Gesten-Handler, React Native, 3D animierte React Native Bildschirme installieren wird React Native sichere Bereiche Kontexte reagieren. Sie wirken native Maske zu sehen. Also alle, die wir brauchen, um sie zu installieren. Hier heißt es, dass Sie für verschiedene CLIs installieren müssen. Einer von ihnen ist Expo und der andere ist React Native. Und da wir React Native CLI verwenden, werden wir diesen Kommentar kopieren. Sie haben immer, manchmal etwas namens Yarn. Garn ist genau wie MPM. Sie können auf die Dokumentation des Garns gehen und Sie können es auch installieren und R1 oder Garn anstelle von MPM verwenden. Auf diese Weise werde ich diesen Kommentar kopieren. Sie haben hier einen Kopier-Button, damit Sie ihn kopieren können. Und dann werden alle diese Bibliotheken, die hier erwähnt werden, installiert. Nun, lassen Sie uns wieder gehen und versuchen, diese Bibliothek mit unserer gemeinsamen Zeile zu installieren. Und dann werde ich es einfügen und wir werden auf die Installation warten. Okay, jetzt ist die Installation fertig. Also habe ich hier eine Warnung, dass es sagt, wie MPM verfügbar ist, Update auf NPM, sein Update von NodeJS. Also immer, wenn Sie installieren müssen, können Sie nur sehen, wie Sie es aktualisieren. Es läuft nur npm installieren Sie ein globales MPM. Wenn Sie diese Notiz sehen, bedeutet dies, dass Sie auf eine höhere Version von NodeJS und auch auf das Paketverwaltungssystem aktualisieren können, damit Sie sie auch aktualisieren können. Also hier wurden unsere Bibliotheken installiert, weil wir React Native verwenden, müssen wir einen Kommentar ausführen. Hier. Es besagt, dass Sie nicht brauchen oder von React Native 0.6 und höher. Als ob das Verknüpfen automatisch erfolgt. Was er meint, indem React nativ mit iOS-Komponenten oder Android-Komponenten verknüpft, die in den Projekten sind, die wir haben. Wie wir hier sehen können. Sie werden automatisch wie iOS und Android verlinkt. Weil die Installation. Von diesen Bibliotheken gehen Sie zu den Knotenmodulen und Sie müssen die Komponenten und die nativen Komponenten verknüpfen , die in iOS oder Android oder einem Knotenmodul installiert sind, müssen Sie sie von React Native 0.6 und höher miteinander verknüpfen. Sie müssen das nicht wie React Native Link tun. Aber wenn Sie niedrig oder niedriger React Native haben, dann müssen Sie diesen Kommentar ausführen. Aber in meinem Fall brauche ich es vorerst nicht. Also dann sagt er, wenn Sie auf Mac sind und sich für iOS entwickeln, wie mein Fall hier, wie Sie sehen, ich benutze iOS, ich benutze Mac. Sie müssen diesen Befehl ausführen, der MAX pod install iOS heißt. Auf diese Weise müssen Sie andere Bibliotheken installieren, aber sie werden wohin in die Bibliotheken des iOS-Projekts gehen. Auf diese Weise werde ich diesen Kommentar hier einfügen und ausführen. Und dann nach der Installation dieser Bibliotheken müssen Sie wissen, dass jede Installation von wie zum Beispiel diese Pod-Installation, wie wir zuvor gesehen haben, Sie den Projekt-URI neu starten müssen, um den iOS-Simulator neu zu starten. In diesem Fall wird unser Projekt nicht nur funktionieren, wenn wir das Projekt neu starten. Wie wir hier sehen, haben wir das Terminal, zum Beispiel hier, dieses, müssen Sie es komplett schließen. Und dann in Ihrem Terminal, müssen Sie den Kommentar ausführen, der React Native Run iOS heißt. Das Gleiche gilt für Android. Sie müssen also auch Ihr Projekt nach der Installation einiger Bibliotheken neu starten , um keinen Fehler zu erhalten, wie wir hier sehen. Und in React Native sagt, die Installation von React Native abzuschließen. Wie Gesten-Handler, der eine Bibliothek ist die mit den Bibliotheken angehängt ist, die er installiert hat. Fügen Sie Folgendes hinzu. An der Spitze. Der Anfang der Eintragsdatei, die ab.js oder index.js ist. Auf diese Weise muss ich diesen Import verwenden und zu meiner app.js hinzugefügt werden. Also müssen wir hier gehen, und dann gehen wir zu app.js. Und hier muss ich diese Bibliothek importieren. Und er sagte, es sei besser, oben zu sein. Das müssen wir also ganz oben auf der Liste der Einfuhren setzen. Danach stellen wir sicher, dass die Bibliothek der Navigation einwandfrei funktioniert. Also hier sehen wir, wie wir diese Bibliothek installieren. Immer wenn es einige Updates gibt, müssen Sie immer die Dokumentation befolgen, da einige Updates auftreten können, einige Updates vielleicht ändern wir oder ein Installationsweg wird sich ändern. Also ist es besser, immer der Dokumentation in der Zeit der Aufnahme dieses Videos zu folgen. Das ist so, wie ich es dir gezeigt habe. Also jetzt werden wir ein Beispiel für die Navigation machen, wie wir in der nächsten Vorlesung sehen werden. Aber denken Sie daran, dass Sie Ihre Anwendung neu starten, bevor Sie mit der nächsten Vorlesung beginnen. 39. Erstellen eines Stack: Okay, bis jetzt sind wir nicht fertig mit der Navigation, um jetzt können wir nicht auf eine andere Seite oder das Detail des Films navigieren. Lassen Sie uns also in der Dokumentation von React, Native und Navigation fortfahren. Am Ende, wenn wir alle Informationen auf der ersten Seite gemacht haben, gibt es etwas weiter Hello React Navigation. Hier wird es uns ein Beispiel geben, wie wir auf eine andere Seite der React-Anwendung bewegen können. Auf diese Weise müssen Sie etwas namens Stack-Navigator-Bibliothek installieren. Und die Installation dieser Bibliothek ist nur mit einem Kommentar MPM, installieren, Reagieren Navigation, und dann stapeln. Also gehe ich schnell durch die Dokumentation. Natürlich werden Sie Zeit haben, es zu lesen und auch, Sie müssen mehr Informationen über diesen Doc-Navigator-Stack-Navigator wissen tatsächlich ist wie etwas wie hält meine alten Seiten, wo ich navigieren werde. Auf diese Weise werde ich die Homepage haben, ich werde das Detail haben. Ich werde ihre Suchseite haben. Ich werde alle anderen Seiten haben, die ich in meiner Bewerbung zeigen möchte. Auf diese Weise brauchen wir MPM installieren, React native Navigation Stack. Gehen wir also wieder zum Code und fügen Sie diesen Kommentar ein. Und es wird für mich diese Bibliothek installieren. Danach werden wir mit dieser Bibliothek ein Beispiel sehen, das von React Native Navigator zur Verfügung gestellt wird. So müssen wir einen Stapel-Navigator erstellen, einen Stack jetzt Vd Navigator in diesem Beispiel zur Verfügung gestellt wird. So müssen wir zum Beispiel eine Komponente erstellen. Diese Komponente werden wir es in etwas namens Navigationscontainer nennen. Und in diesem Navigationscontainer werde ich einen Stapel-Navigator haben. Und für jede Seite in der Anwendung werde ich einen Stack-Bildschirm haben. So werde ich auf diese Weise Home-Bildschirm haben. Ich werde ebenso detaillierten Bildschirm haben und ich werde den Suchbildschirm haben. Also machen wir es genau so, wie er es getan hat. Also zuerst müssen wir zwei Dinge importieren. Einer von ihnen ist erstellen Stack Navigator. Also werde ich diese Methode importieren, die Create Stack Navigator heißt. Und auch, er könnte eine Konstante definieren, die Stack genannt wird. Und diese DAG nannte er diese Funktion, die wir hier importiert haben. Also lassen Sie uns das gleiche in app.js machen. Also lassen Sie uns das Terminal schließen. Und dann werden wir hier sagen Import, Reagieren oder erstellen Sie Stack-Navigator. Und wir werden unsere Konstante definieren, die Stack genannt wird. Also gehen wir wieder zurück zum Code und dann definieren wir diese Konstante hier. Danach haben Sie in dieser Ansicht diese Ansicht nicht. Wir werden nicht zu Hause anrufen. Wir setzen diese Home-Komponente in den Stapel. Wie wir das tun können. Also zuerst müssen wir sagen oder Navigationscontainer. Da Navigationscontainer, wie Sie hier sehen, ist eine Komponente, die Ihre verwalten, unser Navigationsbaum und enthält den Navigationsstatus. Diese Komponente muss die gesamte Navigatorstruktur umschließen. Normalerweise würden wir diese Komponente im Stamm unserer Anwendung rendern, die normalerweise Komponente ist oder aus app.js exportiert wird. Also lasst uns dasselbe tun, um nicht aus der Dokumentation zu gehen. Also werde ich einen Navigationscontainer haben und dann den Stapel-Navigator stapeln, und dann werde ich diese Komponente aufrufen, damit wir all diesen Teil kopieren und dann zu unserer Anwendung gehen können . Wir entfernen all diese Ansicht oder lassen Sie uns es wie in die Nähe setzen, um zu sehen, was wir wieder kopieren können. Also habe ich Navigationscontainer, wir müssen ihn auch importieren. Also werde ich wieder wichtig. Also gehen wir hier und wir sagen, dass wir den Navigationscontainer importieren müssen. Und dann haben wir den Stapelpunkt-Navigator. Genau. Dieser Stapel hat eine Methode, die aufgerufen wird oder hat eine Komponente, die Navigator genannt wird. Und dieser Stapel Navigator hat auch eine Komponente, die Screen genannt wird. So können wir diese Komponente mit diesem Operator erreichen , der Punkt normal ist. Dann können wir einen Namen für diese Komponente sagen. Zum Beispiel, Armut, dass Navigation, und dann geben wir die Komponente, die wir gehen, um zu navigieren. Also heißt es in unserem Fall zu Hause. Wir haben bereits die Home-Komponente importiert, so kann ich hier nach Hause setzen. Und dann lassen Sie uns mehr sitzen diese Ansicht, die wir zuvor hier hatten. Und dann speichern wir unsere Anwendung und gehen zum Simulator und wir werden sehen, was los ist. So, jetzt haben wir, wie Sie sehen, dass wir kein Problem in unserer Anwendung haben. Und oben werden wir sehen, dass wir einen gespeicherten Bereich haben, wie bevor die Anwendung auf dem Bildschirm voll war. Also werde ich ein Steuerelement haben, dass schnell, nur um Ihnen zu zeigen, Sie sehen, dass unsere Anwendung voll fällt auf dem Bildschirm, so dass Sie nicht manchmal lesen alle diese Informationen sind mehrere Formulare. So verwendet der Navigator etwas namens Save Area Navigation oder Safe Area Bildschirm. Auf diese Weise können Sie garantieren, dass Ihr Navigator so arbeitet, dass sich das Speichern all dieses Bereichs nicht bewegt oder nach oben, in das Formular. Es wird wie ein bisschen Platz hier haben. Also werde ich den Code zurücksetzen. Und wie Sie sehen, haben wir hier diesen sicheren Bereich. So werden wir später sehen, wie wir alle diese Eigenschaften entfernen können. Wie zum Beispiel können wir wie diesen Namen entfernen, der zu Hause genannt wird. Wir können auch einige weitere Optionen treffen, wie wir später sehen werden. Also lassen Sie uns jetzt diesen Import dieser Ansicht entfernen, damit wir ihn nicht mehr brauchen. Und wir haben all das Zeug importiert. Und unser Navigator funktioniert auf diese Weise perfekt. Wenn Sie einige Fehler erhalten, stellen Sie sicher, dass Sie Ihre Anwendung gestartet haben, wie ich Ihnen zuvor gesagt habe. Sie müssen also das Terminal beenden und es dann vollständig klären und dann die Anwendung erneut ausführen, indem Sie den iOS-Befehl ausführen, wie wir zuvor gesehen haben. 40. Navigieren zu Filme: Okay, in dieser Vorlesung werden wir einen neuen Bildschirm hinzufügen, der der Schwanz des Films sein wird. Wenn ich hier klicke, muss ich zum Detail der Filme oder einer neuen Komponente navigieren, die Details genannt wird. Also, hier, wenn Sie sich im Stapel Navigator erinnern, haben wir mehrere Bildschirme erstellt und einer von ihnen ist zu Hause. Also auf diese Weise können wir auch die Detailseite hinzufügen, so dass wir hier gehen und sagen können, dass ich hier Details wollen. Wir können es wie eine IM geben, wie ein Detail. Und auch die Komponente wird als Detail bezeichnet. Lassen Sie uns also die Detailkomponente erstellen. Ich werde zum Ordner Bildschirme gehen und dann werde ich eine Datei erstellen. Ich werde dieses Aktendetail nennen. Und in diesem Detail werden wir eine Komponente erstellen. Wenn Sie sich erinnern, haben wir die Komponente der Homepage nicht mit den Snippets erstellt, und wir werden die gleiche Weise mit dem Detail tun. Also, wenn Sie sich erinnern, haben wir diesen Kommentar, der F genannt wird, sind zustandslose Komponenten zurück. Und auf diese Weise werden wir diese const haben und dann werden wir das Detail haben. Und natürlich werden wir die anderen Informationen haben, die wir brauchen. Und lassen Sie uns auch importieren, sie reagieren. Also werde ich sagen, hier sind Ihre drei Akte von React. Und dann werden wir hier das Fragment verwenden, wenn Sie sich erinnern. Also werde ich hier eine Komponente setzen. Ich werde sagen React Punktfragment. Und in diesem Fragment können wir Text platzieren, alle, nur um zu sagen, dass dies das Filmdetail ist, damit wir sehen können, wie wir zu ihm navigieren können. Also werde ich hier wie ein Text sagen. Und diese Textkomponente enthält zum Beispiel etwas wie sagen, Filmdetails, genau so. Auf diese Weise werden wir in der Lage sein, die detaillierte Seite des Films zu sehen, wenn wir zu ihm navigieren möchten. Und vergessen Sie auch nicht, die Textkomponente von React Native zu importieren. Also lassen Sie uns diese Komponente speichern und wir werden zu unserer app.js gehen und wir müssen die detaillierten Komponenten importieren. Also hier müssen wir einen Import machen und dann Details aus. Und dann setzen wir die Bildschirme genau so, wie wir es mit der Home-Komponente gemacht haben, damit wir auch das Detail bekommen können. Auf diese Weise nannten wir die Bälle Komponente. Okay, nett. Alles funktioniert gut. Wir haben bis jetzt keinen Fehler bekommen, so dass wir es und die Dokumentation der Bibliothek fortsetzen können. Und wenn Sie sich erinnern, haben wir wie einen Bildschirm hinzugefügt und wir werden einen anderen hinzufügen , den wir bereits hinzugefügt haben. Es gibt also einige Entzündungen, die vielleicht für Sie interessant sind, wie die Konfiguration des Navigators. Die Konfiguration des Navigators kommt immer wie mit einer zusätzlichen Konfiguration, die Sie dem Navigator hinzufügen möchten. Zum Beispiel sagt er, wie wir etwas namens Optionen hinzufügen können. Und dann können Sie in dieser Option einen Titel dieser Navigation angeben. So wird dieser Titel hier oben angezeigt. Auf diese Weise können Sie einige zusätzliche Optionen haben. Aber lassen Sie uns weiter. Als würden wir später zu diesem passierenden zusätzlichen Requisiten zurückkommen. Aber zuerst müssen wir sehen, wie wir zwischen den Bildschirmen navigieren können. Also möchte ich zu einem anderen Abschnitt wechseln, der zwischen Bildschirmen bewegt wird. Also hier haben wir auch so etwas wie HTML. Ich möchte einen Link haben und drücke darauf, und dann gehe ich zur Detailseite. Aber es ist genau so, wie es mit HTML gemacht wird. Wir werden es mit React Native tun. Also brauchen wir einen Knopf, wir brauchen eine Veranstaltung. Wir, wenn wir brauchen, dass der Benutzer auf etwas klicken, um zum Detail des Films zu gehen. In unserem Fall haben wir hier auf diese Buttons klicken oder wir können sagen, dass Sie auf diese Karten klicken. Wenn Sie sich erinnern, diese Komponente genannt Karte, und wir haben diese Karte als berührbare Deckkraft erstellt, wenn Sie sich erinnern. Also müssen wir auch die Komponente verwenden, die berührbare Opazität genannt wird. Wir müssen die Kompressenfunktion hinzufügen. Also haben wir hier auf der Presse und dann müssen Sie einige Parameter übergeben. Gehen wir auf unsere Karte und dann werden wir sehen, wie wir das tun können. Also bewachter Punkt js, wenn Sie sich erinnern, haben wir etwas benutzt, das als berührbare Deckkraft bezeichnet wird. Also lassen Sie uns zu dieser Komponente in der Komponentenbibliothek gehen und wir werden sehen, wie wir diese berührbare Deckkraft in der Dokumentation verwenden können. Wie Sie sehen, haben wir eine Methode, die auf Presse für berührbare Deckkraft aufgerufen wird. So können wir die gleiche Methode oder die gleiche Eigenschaft verwenden, um eine Methode genau anzugeben , wie er in der Dokumentation der Navigation gemacht hat, wenn eine Schaltfläche verwendet wird. Also lassen Sie uns diese Funktion zu unserer Wache hinzufügen. Ich werde wieder zum Code gehen und ich werde hier sehen, dass ich berührbare Deckkraft habe. Und dann haben wir Kompresse und wir haben auf Press-Methode und Kompresse-Methode. Es ist noch nicht definiert. Wir werden es genau definieren, wie in der Art und Weise in der Navigationsbibliothek definiert. Also würden Sie er auf der Brust hat und dann wird es eine Funktion Aufruf Pfeilfunktion sein. Und er sagte Navigation, Punktnavigation und Details. Auf diese Weise muss ich in ihrer Karte angeben, dass ich die Navigation navigieren muss. Um zur Detailseite zu navigieren. Okay. Und was diese Navigation kommt, von wo sie von hier her kommt, Home-Bildschirm, müssen Sie etwas Statusvariable verwenden, die Navigation genannt wird, und es ist in einem Objekt. Und dann müssen Sie eine Navigation definieren und Sie können sie innerhalb verwenden. Auf diese Weise weiß die Homeschooling-Komponente, dass sie eine Eigenschaft namens Navigation hat. Und diese Navigation hilft mir, zu einem anderen Bildschirm zu navigieren. Also ist es genau wie etwas, ein Link, ich sage, okay, in diesem Home-Bildschirm habe ich einen Link. Und in diesen Links möchte ich verlinken oder zu einer anderen Seite gehen, die Details genannt wird. Also lasst uns das Gleiche machen. Aber hier sind wir nicht auf dem Startbildschirm, wie Sie sehen, wir sind in einer Karte, in einer Komponente. Also zuerst gehen wir zu unserem Home-Bildschirm und fügen Sie dann dieses Objekt hinzu, das wie darin genannt wird, wir nennen es Navigation. Und diese Navigation, Ich werde es als Requisiten an Kartenkomponente übergeben. Es ist sehr wichtig, weil wir diese Funktion übergeben müssen , mit der Sie hier nicht wie direkt tun können. Andernfalls wird es verschoben, wenn es aus dieser DAG des Navigationsbaums ist. Daher muss der Navigationsbaum konsistent sein, er muss angegeben werden. Also muss ich vom Home-Bildschirm gehen. Ich verwende die gleiche Navigationsreferenz oder die gleiche Navigation drei. Also möchte ich diesen Navigationsbaum an meine Karte übergeben. Also werde ich hier wieder auf meine Karte gehen. Ich habe hier keine Karten, weil ich eine Liste und Liste mehrere Karten enthalten, wie Sie sich erinnern. Also hier muss ich genauso gut die Navigation als Requisite passieren. Also werde ich eine Requisite definieren, es Navigation in dieser Listenkomponente nennen. Also werde ich hier zur Listenkomponente gehen. Ich hätte mehrere Requisiten und eine dieser Aufforderungen wird auch Navigation genannt. Also hier Wie werden Sie sehen, dass wir den Navigationsbaum passieren? Übergeben Sie also den Navigationsbaum vom Startbildschirm an die untergeordneten Elemente und Komponenten, um die gleiche Referenz zu verwenden. Andernfalls werden wir von Navigation 3 ausgehen und es wird uns einige Probleme verursachen. Dann habe ich hier die Kartenkomponente, die ich vorher angerufen habe, wie Sie hier sehen. Und dann auch diese Schutzkomponente. Wir haben eine Eigenschaft, die Navigation genannt wird. Also müssen wir zu ihrer Kartenkomponente gehen. Und in den Requisiten werde ich die Navigationsstütze hinzufügen. Und auf diese Weise, wenn ich hier die Methode habe, die ich auf Druck auf berührbare Deckkraft tun möchte. Ich kann die Navigation genau so verwenden, wie es hier gemacht wird. Also denken Sie daran, die drei müssen konsistent sein. So ist es genau die Art, wie man die Dunkelheit der Navigation hält. Okay, lassen Sie uns diese Methode jetzt kopieren und zu unserer Kartenkomponente gehen. Anstelle dieser On-Premise können wir die Methode auf diese Weise definieren. Also haben wir hier diese Methodennavigation, die ich als Referenz verwendet habe, und navigieren Sie dann zum Schwanz. Hier haben wir keine Details. Wir haben eine Detailkomponente. Warum habe ich Details? Denn im Stapel habe ich eine Komponente definiert, die aufgerufen wird oder Bildschirmnavigation, die als Detail bezeichnet wird. Also haben wir hier Details, aber auch wir müssen es als Detail definieren. Der Name hier muss also der gleiche Name wie die Navigation sein, zu der Sie navigieren möchten. Also habe ich hier Detail, dann muss ich auch in ihrem Warenkorb ein Detail haben. Also lasst uns das retten. Speichern wir die Liste. Das ist sicheres Zuhause und alles retten. Und dann gehen wir zur Anwendung. Und in der Anwendung habe ich jetzt alle Filme. Ich habe keinen Fehler. Also, wenn ich auf einen von ihnen klicke, okay, Es sagt, dass undefiniert ist kein Objekt. Dies geschah, weil ich auf etwas geklickt habe, das noch nicht undefiniert ist. So können wir haben, hier haben wir so etwas wie auf dem Home-Bildschirm, wir haben mehrere Listen. Wenn Sie sich erinnern, habe ich die Navigation nur für ihre erste Liste übergeben. Also müssen wir es an jede Liste in der Bibliothek oder in den Homepage-Komponenten übergeben. Also haben wir Liste, Liste, mehrere Listen. Wir retten alles. Jetzt gehe ich auf diese Liste, okay, Wir sehen, dass wir zu einem Filmdetail gezogen sind. Auf diese Weise kann ich mit diesem Navigationswerkzeug zu einer anderen Seite navigieren. Und wir haben jetzt die Navigation dieses Details. Was wir jetzt brauchen, ist nur dieses Filmdetail zu stylen und ein echtes Filmdetail der Komponente des Films zu setzen. Und wir müssen sehen, wie wir die Daten der angeklickten Komponente übergeben oder auf Film klicken können. Also habe ich auf diesen Film geklickt, dann möchte ich auch das Detail dieses Films sehen. Auf diese Weise müssen wir auch einige zusätzliche Daten mit der Navigation senden, wie wir in der nächsten Vorlesung sehen werden. Als Zusammenfassung haben wir von diesem Deck angefangen. Also werde ich es wie jetzt schnell zusammenfassen. Wir müssen Bildschirme stapeln. Also haben wir eins ist zu Hause, eins ist Detail. Und mit den Details müssen wir etwas tun, also müssen wir irgendwie dahin navigieren. Also in unserer Anwendung haben wir einen Start-Home-Bildschirm wird dieser sein. Also in meinem Fall möchte ich auf eine dieser Karten klicken. Und diese Karte ist eine Komponente, die ich vorher erstellt habe. Also werde ich zu dieser Kartenkomponente gehen und ich werde sagen , dass Navigationspunkt zum Detail navigieren. Aber in diesem Fall haben wir ein Problem, von wo ich diese Navigation bekommen würde. Wir haben die Navigation als Requisite, weil wir die Navigation passieren müssen, nicht direkt, wie wir es hier auf dem Startbildschirm und in der Dokumentation haben? Nein, weil wir, wenn wir ihren Stapel behalten wollen. Also habe ich eine Requisite erstellt, die es Navigation nennt. Und dann das vom Startbildschirm mit der gleichen Methode, wie er genau gemacht hat. Also habe ich in der Komponente selbst die Navigation und dann die Navigation definiert. Diese Variable nennen wir es, wird an die Liste übergeben, weil ich keinen Zugriff auf ihr Auto direkt hier habe. Also schicke ich auf ihre Liste. Und innerhalb der Liste definiere ich eine Eigenschaft, die Navigation genannt wird. Und in ihrer Navigation sind in der Liste selbst. Ich habe eine Karte, und diese Karte hat auch Eigenschaft ist Navigation. Also verwende ich genau den gleichen Navigationsbaum. Du musst vorsichtig mit dem Ding sein. Auf diese Weise werden Sie die Referenzen nicht verlieren, weil manchmal werden wir wie zum Startbildschirm hinzufügen, nach oben gehen, oder entfernen Sie den Navigationsbaum. Das ist also sehr wichtig für Sie. In unserem Fall haben wir nur Filme Detail. Wir werden zu ihm navigieren und sehen das Filmdetail. 41. Filmdetails Übersicht: Okay, was wir in diesem Abschnitt tun werden, werden wir das Film-Detail sehen. Wenn Sie sich erinnern, habe ich eine Demo, die auf meiner Anwendung oder auf meinem Android-Simulator ausgeführt wird, und ich verwende den iOS-Simulator. Aber jetzt, wenn Sie sehen wollen, dass Sie es Filmdetail wie das, was wir in der Zukunft oder in diesem Abschnitt tun werden. Also, wenn ich hier renne oder wenn ich auf einen der Filme klicke, werde ich wie ein Bild des Films sehen. Ich werde hier eine URL sehen, die gerne zurückgeht. Und dann werde ich einen Play-Button haben. Und auch wie der Titel und was Jenner, dieser Film gehört oder zu welcher Kategorie. Und auch wir werden einige Bewertung haben und auch, wir werden einige Beschreibung und Veröffentlichungsdatum haben. All diese Informationen stammen aus der API unserer Filme. Auf diese Weise muss ich diese Daten von ihrem angeklickten Film an die Filmdetailkomponente weitergeben , wie wir zuvor gesprochen haben. Also fangen wir an, damit zu arbeiten, und ich hoffe, Sie werden diesen Abschnitt genießen. 42. Weitergeben von ausgewählten Filmdaten zur Detail: Okay, zurück zu unserem Projekt, wenn Sie sich erinnern, hielten wir am Ende an, als wir versuchten, zu unserem Filmdetail zu navigieren, aber wir haben die Daten noch nicht. Also möchte ich die Daten des angeklickten Films erhalten. Wenn ich auf diesen Film klicke, möchte ich das auch sehen. So können wir hier gehen und wir können auch die Dokumentation der React Navigation lesen. Nachdem wir also zwischen Bildschirmen bewegt haben, haben wir etwas, das als Parameter an die Routen übergeben wird. Also übergeben Parameter an die Route, wie ich den Film übergeben möchte, den ich auf der Homepage geklickt habe und dann an die Komponente des Films Details senden möchte. Auf diese Weise werde ich in der Lage sein, diese Daten zu lesen. Übergeben von Parametern ist sehr, sehr einfach mit React nativer Navigation. Also gehen Sie einfach hier und Sie können zum On-Prem gehen, wie wenn wir die On-Premise auf unserer Wache erstellt haben, übergebe ich auch einige Daten als einen zweiten Parameter dieser Methode, über die wir gesprochen haben, die navigieren heißt. Also tatsächlich, wenn ich zu meiner Anwendung gehe und zur Guard-Komponente gehe, gehen wir hier, Schutzkomponente und wir haben hier das Click-Ereignis oder komprimieren Ereignis definiert. Also, hier, nachdem ich die Komponente angegeben habe, wo ich auch zum Campus navigieren werde. Ich kann auch einige zusätzliche Daten übergeben. Diese Daten können das Element oder der Film sein, den ich schicke, um zu dieser Seite zu navigieren. Auf diese Weise kann ich uns einen Namen geben für unser Detail. Ich kann es zum Beispiel Filmdetail nennen. Also können wir hier Filmdetail sagen. Und der Wert des Filmdetails ist der Gegenstand selbst, der Gegenstand oder der Film, der an das Filmdetail oder an den Warenkorb selbst übergeben wird. Jetzt geht es uns gut. Wir haben unsere Kartenkomponente und wir haben durch die Navigation die Daten übergeben, also okay. Im Detail Komponente, wie wir diese Daten lesen können. Das Lesen der Daten in der Dokumentation wird auf diese Weise erwähnt. So gehen Sie zu den Details Bildschirm, die wir erstellt haben, und dann passieren Sie Route und die Navigation, weil wir hier, dass Detailkomponente als grün im Stapel. Auf diese Weise kann ich nicht sagen, dass ich eine Route benutzen kann. Und auch die Navigationsroute ist etwas in dir, wo wir die Parameter bekommen werden. Und wie Sie sehen, hat er eine Konstante definiert. Genau so hat er es hier definiert. Also hat er die Item-ID und auch andere Parameter übergeben. Und dann erhielt er sie genau mit den gleichen Namen in den Untergründen der Route. Auf diese Weise kann ich auch die Untergründe der Filmdetails lesen und sie dann einer Variablen oder einer Konstante zuweisen und diese Variablen oder diese Backups lesen. Gehen wir also zu unserer detaillierten Komponente. Und dann in der detaillierten Komponente, wie wir zuvor gesehen haben, müssen wir Route passieren. Und auch die Navigation, genau wie sie definiert ist oder wie sie dort dargestellt wird. Also, und dann können wir eine Konstante definieren, und wir nennen diese Konstante wie Filmdetail. Auf diese Weise können wir sagen, dass der Film b del Route dot params ist. Und der Name der Komponente oder des Objekts, das ich hier definiert habe, wo es das Filmdetail hält. Auf diese Weise war ich ein Filmdetail. Also hier werde ich RouteParams Punkt mehr Details haben. Auf diese Weise halte ich das Filmdetail in dieser Konstante, die ich hier definiert habe. Auf diese Weise kann ich auch die mehr Umbenennung sehen, die ich angeklickt habe. Wenn ich also auf diesen Film klicke, möchte ich den Namen des Films sehen. Auf diese Weise können wir diesen Teil entfernen und sagen, wie Film Detail Punkt. Wenn Sie sich an das Feld erinnern, für das der Filmname hält, haben wir es aufgerufen, oder es ist in der API genannt Titel. Auf diese Weise, wenn ich auf diesen Film klicken, werde ich sehen, dass der Titel des Films, den ich angeklickt. Also hier haben wir mehrere Filme und zum Beispiel habe ich vertraute Filme. Das ist Luka, eine weitere RIAA, und mehrere Filme. Und es ist dynamisch für mich. Auf diese Weise übergebe ich alle Daten in meiner Komponente von der Karte, auf die ich geklickt habe. Also kam der Film von als Gegenstand, als Requisite an diese Wache und dann wird er ihnen Filmdetail übergeben. Und dann im Detail las ich die Daten und ich bin hier kaputt. 43. Movie: Okay, jetzt in dieser Vorlesung werden wir den Film-Detailservice nutzen. Okay, vielleicht wirst du mir sagen, warum du einen Filmdetaildienst erstellen musst. Warum müssen Sie die Daten des Films erneut erfassen, wenn Sie bereits die Daten im Filmdetail definiert haben. Natürlich ist die API, wie Sie hier in unserem Film DBAPI sehen. Okay, wir haben Glück, dass wir bekommen, wenn wir Liste der Filme, zum Beispiel, die beliebten Filme, Wir bekommen alle Filme irgendwie auf diese Weise. So bekommen wir in den Ergebnissen, je mehr wir stärken und Erwachsenen- und Genre-ID sah auf diese Weise, können wir wissen, dass wir genug Daten haben. Aber wenn wir das Filmdetail überprüfen, wenn wir hier dorthin gehen, bekommen Details und wir werden mehr v sehen, und dann werden wir das Detail des Films bekommen. Wenn wir darauf gehen, werden wir sehen, dass wir mehr Details haben. Wir haben nicht nur Genres. Wir haben einen Ausweis und den Namen des Journalisten. So können wir, auf diese Weise, dass wir alle erhalten können, zum Beispiel, Informationen im Detail, nicht nur IDs. Also zuerst würde ich zu meinen Diensten gehen und dann einen neuen Dienst erstellen, der „get movie“ genannt wird. Also müssen wir nur Filmdetails bekommen. Auf diese Weise werden wir eine dieser APIs oder diese Dienste kopieren und wir werden sie umbenennen. Wir werden sagen, get movie. Hier werden wir die ID des Films übergeben. Wir müssen ID übergeben, weil, wie Sie hier sehen, unsere API ist es, eine ID zu erwerben? Also, um einen Film zu bekommen, muss ich auch die ID davon bekommen. Auf diese Weise können wir die gleiche API haben. Also werde ich das hier setzen. Wir können einen Film Schrägstrich machen und dann werden wir das alles loswerden. Und wir werden nur so haben. Also werden wir API URL, den grundlegenden URL Schrägstrich Film und dann den API-Schlüssel haben. Und die brauchen wir nicht mit Genres. Auf diese Weise können wir sparen und wir werden unseren Service bereit haben. Aber die Daten, es wird nicht mit den Ergebnissen sein, denn wenn wir es überprüfen, diese Antwort hier, es sagt, es wird uns direkt ein Objekt geben, das alle Daten enthält. Also werde ich wieder gehen, nahm meinen Dienst und ich werde sagen, Rückkehr direkt, das ist Teiche Punktdaten. Auch wenn Sie diese in meiner API kennen, wie Sie hier sehen, müssen wir die Film-ID übergeben. Wenn ich also hier zum Film-Detail gehe, Details erhalte, muss ich die Film-ID in der URL oder in der API durchlaufen. Auf diese Weise genügt es nicht, es so zu haben. Wir müssen auch die ID übergeben. Also auf diese Weise können wir hier diese Methode haben, und dann kann ich hier sagen Schrägstrich. Und dann setzen wir einen anderen Parameter oder einen anderen definierten Parameter, was die Idee sein wird, die ich hier übergebe. Okay, genau wie wir vorher mit der Homepage gemacht haben, mehr bekommen wir alle Liste von Filmen, wenn Sie sich erinnern, wir haben diesen Zustand aufgerufen und dann haben wir den Benutzerstatus und dann den Effekt verwenden. Und dann bekamen wir ihren Dienst und setzten dann das Ergebnis dieses Dienstes in meiner Konstanten oder den Zustandskonstanten ein. Also werden wir das Gleiche tun. Zuallererst werde ich wie eine detaillierte Konstante nennen. Ich werde es hier definieren. So können wir hier Konstante haben, die Detail genannt wird, und dann wird es einen Satz detailliert als auch haben. Und es wird einen Staat benutzt haben. Also müssen wir auch den Benutzerstatus importieren. Also jetzt danach brauchen wir dieses Filmdetail nicht mehr, aber wir werden den Parameter brauchen, weil ich die ID des Films haben werde. Wir können sagen, wie auf diesem DO setzen Sie es oben und wir können Film-ID sagen. Und dann können wir im Film Detail auch Punkt-ID übergeben. Denn wenn Sie sich erinnern, haben wir in unseren Parametern, so können wir zu unserer API gehen, die zum Beispiel populär wurde. Und sie wurden populär. Wir haben in dieser Antwort-ID, wir bekommen ID von jedem Film, den wir auf diese Wache klicken, nicht nur ihren Namen oder ihre Dido, wir können auch die ID haben. Danach können wir auch diese Film-ID verwenden, um die Daten dieses Films detailliert mit unserem Service zu erhalten. Auf diese Weise müssen wir auch einen Effekt verwenden. Also sagen wir, Use-Effekt und diesen riesigen Effekt als auch, wir werden es von reagieren importieren. Manchmal ist es automatisch Onboarding. Das musst du nicht tun. Sie müssen also nur den Import automatisch reparieren , damit Sie einen konsistenteren Import haben können. Verwenden Sie also den Effekt. Es hat eine Callback-Funktion und diese Callback-Funktion wird für mich die Fähigkeit enthalten , die konstanten Werte oder die Zustandsvariablen mit dem Ergebnis dieses Sediments zu setzen oder zu setzen. So wie zu Hause, wenn Sie sich erinnern, bekamen wir die Daten dann und dann setzten wir die Daten ein. Auf diese Weise muss ich meinen Dienst importieren, den ich zuvor erstellt habe. Also werde ich sagen, Film zu bekommen und dann werde ich das importieren. Service, ich werde hier sagen, Importieren, holen Sie sich Film aus. Und dann wurde ich sagen, der Weg, den ich meine Dienste definiert habe. Also werde ich sagen, vielleicht hier, ein Schritt nach oben, Dienstleistungen und dann Dienstleistungen. Also in get movie, ich werde mein Film-Detail haben. Also hier werden wir sagen, bekommt mehr v. Und dann werden wir die ID übergeben, die Film-ID ist, wie wir hier gesagt haben. Und dann wird das ein Versprechen sein, wie Sie sich erinnern. Und so werde ich hier dann sagen, und in diesem dann würde ich Filmdaten bekommen. Auf diese Weise werde ich einen Rückruf haben. Und innerhalb von Filmdaten kann ich sagen, setzen Sie Details mit den Daten, die in dieser Antwort kommen. Also werde ich hier sagen, das Detail, mehr readapt. Und natürlich, um sicherzustellen, dass dies unbegrenzt ausgeführt wird, wenn Sie sich für das Speicherleck und die Leistung erinnern, müssen wir dies ein Array leer setzen. In diesem Fall werden wir keine Probleme haben, um nicht unbegrenzt ausgeführt zu werden. Aber wie Sie hier sehen, beschwert sich ES Fussel, dass Film-ID nicht bekannt ist. Es ist also, als ob Sie die Abhängigkeit entweder eingeschlossen oder entfernt haben. Um dieses Problem zu lösen und zu behalten, dass wir diesen Dienst nur einmal in der Wirkung aufrufen und keinen Speicherverlust haben, müssen wir nur Film-ID hier übergeben. Also in diesem Fall werden Sie ES Fusselfehler loswerden. Auf diese Weise werde ich das Detail haben, oder wir können das nochmal wie Filmdetail nennen. Auf diese Weise werde ich detailliertere und festgelegte Filmdetails haben. Also, um konsistentere Benennung zu haben. Also werde ich dies umbenennen, um Filmdetails zu setzen und dann mehr vom Detail, Ich kann es hier verwenden. Also in diesem Fall werden wir speichern, klicken Sie auf einen der Filme. Wie Sie sehen, bekommen wir einen Fehler. Wir sagen, undefined ist ein Objekt. Dies geschah beispielsweise, weil das Filmdetail noch nicht fertig ist. Also, wenn Sie sich erinnern, wir verwendet geladen. Nach dem Laden der Daten kann ich meine Anwendung oder meine Seite rendern. In diesem Fall müssen wir eine andere Konstante definieren. Wir nennen es geladen und gesetzt geladen. Auf diese Weise wird der Standardfall dieses geladenen oder geladenen Satzes falsch sein. Danach kann ich hier sagen, dass, wenn geladen oder zuerst müssen wir geladen werden. Denn hier haben wir dann, und dann setzen wir hier Satz geladen. Und es wird wahr sein, weil wir diese Daten erfolgreich gesagt haben. Alles, was wir haben die Daten erfolgreich. Also können wir auch hier und Objekt haben, wenn Sie sich erinnern, sagen wir geladen und dann setzen wir das in diese Klammern. Und wir garantieren, dass wir den geladenen Zustand unserer Anwendung in der richtigen Weise haben. Also lasst uns jetzt sparen und zu einem unserer Filme gehen. Also würde ich hierher gehen und ich werde wie zum Beispiel diesen sehen. Und wir werden sehen, dass wir einen Fehler haben. Es sagt, dass Service Default keine Funktion ist. Ich mache diesen Fehler absichtlich, nur um sicherzustellen, dass Sie es sind, wenn Sie einen Dienst oder eine Funktion oder eine Konstante importieren, müssen Sie ihn in die Objektklammern setzen, wenn Sie etwas oder einen Dienst importieren oder eine Methode genau die gleiche Weise, wie wir es definieren, weil wir konstant haben und dann Film bekommen, und dann definieren wir unsere Methode. Auf diese Weise müssen Sie sicher sein, dass Sie diese Klammern verwenden. Danach wird es für Sie funktionieren. Also jetzt haben wir hier den Filmnamen kommen genau wie erwartet, aber der Filmname kommt nicht aus der Navigation, er kommt von der API. Nachdem es geladen wurde, so weiter, der Film, Der Wagen, lasst uns zuerst anfangen, eine ScrollView zu erstellen. Wenn Sie sich erinnern, haben wir die Partitur von ScrollView auch auf der Homepage verwendet. Also werde ich es schnell machen. Also würde ich eine ScrollView aufrufen. Und diese Bildlaufansicht wird aus React Native importiert. Also werde ich hier in das Fragment gehen, ich werde eine ScrollView haben. Und in dieser Scroll-Ansicht mit kommen auch von React Native. Und in dieser Scroll-Ansicht können wir vielleicht etwas Styling hinzufügen oder wir können es so für jetzt behalten. Und in dieser Scroll-Ansicht. So kann ich all diese Bildlaufansicht oder diese geladene Ansicht in die Bildlaufansicht selbst verschieben. Also im Inneren wird es der Text sein. Und hier werden wir, wenn geladen und scrollen Ansicht dann für mich den Inhalt setzen. Also können wir das nicht richtig haben. Also muss ich nur dieses Objekt schließen und dann speichern. Okay, wir haben geladen. Und dann brauche ich in der ScrollView vorerst keinen Text. Ich brauche das Bild, wenn du dich erinnerst. Also werde ich dies durch Bild und diese Bildkomponente ersetzen. Wir können es auch aus React Native importieren. So können wir hier Bild sagen und dann wird dieses Bild wie einige Eigenschaften haben. Also, wenn Sie sich erinnern, haben wir die Bildkomponente in unserer Wache verwendet. In unserer Wache haben wir all diese Eigenschaften definiert. Also muss ich sie nicht noch einmal wiederholen. So können wir all diese Eigenschaften verwenden. Ich kann all dieses Bild kopieren. Wir müssen nur einige Parameter ersetzen. Also werde ich hier Bild sagen. Und dann müssen wir wie zum Beispiel ersetzen, Größenänderungsmodus ist in Ordnung. Style, okay, dafür müssen wir Stile hinzufügen. Also lassen Sie uns die gleichen Stile kopieren. So können wir alle diese Stile kopieren, außer wie einige Klassen. Also habe ich hier das konstante Stylesheet, wir müssen es importieren. Wieder. Alles ist genau so, wie wir es vorher gemacht haben, also muss ich sie nicht noch einmal erklären. Also können wir hier die Bildklasse haben und wir können all diese Brillen loswerden. Auf diese Weise brauchen wir keinen Gegenstand, aber wir hätten nicht das Film-Detail. Also auf dem Film Detail, Punkt Plakat Pfad und dann die Leber gibt es Film detaillierte Plakatpfad. Dann zeigen Sie, ansonsten, zeigen Sie das Platzhalter Bild. Wir haben das Bild des Platzhalters nicht. Also in diesem Fall muss ich es auch kopieren. So können wir eine Konstante definieren, nennen es Platzhalter Bild, und dann können wir es auch hier verwenden. Also werde ich hier Platz Halter Bild haben, und in diesem Fall wird unsere Anwendung gut funktionieren. Also haben wir das Platzhalterbild, wir haben Bild, und danach können wir vielleicht die Beschreibung des Films setzen. Also lasst uns das zuerst versuchen. Wenn wir gut arbeiten, arbeiten Sie alle gut. Also werde ich hier setzen, okay, Das Styling sieht hässlich aus, weil wir das Styling ihrer Karte verwenden. Um also mehr richtige Styling zu haben, können wir Höhe wie so etwas geben, wie wir es behalten können 100 und entfernen Sie diese Breite und desto mehr von diesem Grenzradius. Also in diesem Fall werden wir das Bild so haben. Oder wenn Sie einen bestimmten Prozentsatz vom Bildschirm oder der mobilen Größe oder dem mobilen Bildschirm verwenden möchten. So können Sie auch die Dimensionen verwenden, die wir vorher gesprochen haben. Also zuerst muss ich auch die Dimensionen aus React Native importieren. Also hier in React Native Importe, können wir sagen, importieren Sie für mich die Dimension, und dann können wir Konstante definieren. Wir nennen es Höhe. Und diese Höhe wird Dimensionen Punkt bekommen. Wenn Sie sich erinnern, genau die gleiche Art und Weise können wir Bildschirmpunkthöhe sagen. So kann es uns mit viel Detail alles geben. Also brauchen wir nur die Höhe. Auf diese Weise kann ich sagen, die Größe des Bildes wird Höhe geteilt durch, zum Beispiel, halb oder dividieren durch zwei, können wir sagen. Auf diese Weise wird es die Hälfte dieses Grüns hier haben. Das ist also nett. Ich schätze, es ist genug, oder vielleicht kannst du es wie tiefer ausdrücken. Sie können 2.5, um nur wie einige Größe zu haben, um mehr Platz für die Verwendung und Anzeige der Informationen des Films zu haben. Auch, bevor ich diese Vorlesung beenden, können wir genauso gut anzeigen, wie wenn es nicht geladen ist, können wir wie Aktivitätsanzeige anzeigen, wie eine Ladeanzeige, wie wir zuvor gesehen haben. So können wir sagen, wenn nicht geladen, dann zeigen Sie den Aktivitätsindikator in einem größeren Bildschirm. Also müssen wir auch den Aktivitätsindikator importieren, wie ich zuvor in der Vorlesung erklärt habe, als wir den Homepage-Bildschirm geladen haben. Auf diese Weise werden wir zu unserem Simulator gehen. Und wenn ich zurückgehe und zu einem der Filme gehe, und dann werde ich wie Laden bekommen, weil ich eine schnelle Verbindung habe. Also bekomme ich nicht, ich sehe diese Ladeanzeige nicht. Auf diese Weise. Sie sehen eine Ladeanzeige, wenn Sie eine langsame Verbindung haben. Also der Vorteil, den wir hier tatsächlich bekommen haben, dass wir die Daten von der Navigation an den Detailfilm übergeben . Auf diese Weise müssen wir in diesem Wächter nicht alle Filmdaten übergeben , weil wir nur die Film-ID übergeben müssen. Also kann ich hier auf der Karte nicht sehen, einfach, dass ich nur Film-ID übergeben möchte und dann nicht alle Filmdaten, die wir von der API bekommen haben. Denn wie Sie sich daran erinnern, dass der Film oder das Element hier, es enthält einige Informationen über den Film, aber nicht alle Details. Ich meine, diejenigen, die wir in dem beliebten Film für das Beispiel sehen, haben wir in der API, wie alle diese Informationen. Nein, ich muss nur die ID zum nächsten Bildschirm übergeben, denn wieder erstelle ich einen API-Aufruf in den Details sauber, um ein Filmdetail zu erhalten. Auf diese Weise werde ich Movie ID sagen und dann an mich die Item Dot ID übergeben. Also nichts Besonderes. Wir übergeben nur die Film-ID, nicht den ganzen Film auf den nächsten Bildschirm. Also, wenn ich auf eine Karte klicke, dann gehe ich zum Detailbildschirm und dann erhalte ich nicht mehr Details. Ich werde Film-ID erhalten, genau den gleichen Namen wie ich hier angegeben habe. Also habe ich hier Film-ID, dann im Detail werde ich auch von der params Film-ID erhalten. Also, wenn wir zu diesem oder Mutator gehen und das nochmal versuchen, okay, wir sind immer noch in Ordnung und alles funktioniert. Auf diese Weise wird die Navigation schnell sein, weil wir nur die ID übergeben. Ich übergebe nicht alle Daten erneut an den nächsten Bildschirm. Dies ist sehr wichtig für Sie genau zu tun, wenn Sie mobile Anwendung entwickeln , um keine Big Data oder große Menge an Daten zwischen den Bildschirmen zu übergeben. 44. Filmtitel und Genres: Also jetzt lasst uns den Titel des Films und der Genres machen. Auf diese Weise müssen wir eine Textkomponente wie zuvor erstellen. Also müssen wir hier die x-Komponente haben und wir müssen sie auch importieren. Also werde ich hier zum Text gehen und dann werde ich diese Textkomponente importieren. Und in diesem Fall brauchen wir auch die, um einige Daten darin zu setzen. Also werde ich hier dieses Spiel für mich das Filmdetail sagen, dieser Titel. Also lassen Sie uns das tun und dann getestet. So werden wir zu den beliebten Filmen bei Click on it gehen. Okay, wir haben den Titel hier, aber der Titel ist klein, also müssen wir ihn vergrößern. Also müssen wir ihm etwas Styling geben. Also werde ich hier sagen, um zu stylen. Und dann werde ich ein Objekt definieren. Und dieser Stil wird einen Namen haben. Wir können Stile Dot sagen. Wir können einen Namen wie Filmtitel geben. Und auf diese Weise müssen wir wieder die Klasse erstellen, die Filmtitel genannt wird. Ich würde Forum dafür geben, wie eine Schriftgröße 24 sein kann. Also können wir hier 24 sagen. Und dann muss ich hier den Doppelpunkt oder die Schriftgröße setzen. Es kann 24 sein. Und auch, wir können Schriftgewicht setzen, wir können es wie kahl machen. So können wir hören, etwas wie Glatze. Und auch, wir können einige Ränder und Padding hinzufügen. Also werde ich sagen Rand oben. Wir können hier Rand oben setzen, es wird 10. Und Rand unten, wie Sie den Inhalt darunter drücken, um wie wieder 10. Also sparen wir, okay, Nice. Wir haben alles in Ordnung. Aber wir müssen es zentrieren. Aber lassen Sie uns alles zentrieren, so wie wir den ganzen Inhalt zentrieren können. Also werde ich eine Klasse für die Scrollansicht geben. Also gebe ich ihm einen Stil. Und in diesem Stil werde ich genau die gleiche Art und Weise definieren , wie wir mit ihren Containern gemacht haben. Also würde ich Stile Dot Container sagen. Und dieser Container wäre alles zentriert. So können wir die gleiche Sache kopieren, die wir hier haben, Flex ein Justify-Content-Center, Ausrichtung Elemente Center. Also würden wir hier gehen und dann werden wir das Glas setzen, oder wir können hier Container sagen. Und dieser Container, um ein Objekt zu sein. Und ich werde dieses Zifferblatt hineinlegen. Und ich werde das Komma nicht vergessen. Aber wie Sie hier sehen, bekommen wir einen Fehler. Es sagt, dass ScrollView untergeordnetes Layout, wie wir müssen durch den Content-Container angewendet werden. Also müssen wir alles wie etwas in dich stecken. So können wir hier eine Ansicht nennen und wir können den ganzen Text innerhalb oder alle Inhalte, die wir hier in dieser Ansicht tun werden, umwickeln . Und dann machen wir dieses Zifferblatt dieser Ansicht, werden wir den Behälter geben. Also müssen wir das von hier entfernen und es in dergleichen einfügen, die Ansicht selbst. Deshalb benutze ich eine Ansicht. Also, Sie kennen den Grund, weil Sie es nicht für ScrollView setzen können, wie Sie hier sehen, dass wir diesen Fehler erhalten haben. Also lassen Sie uns die Ansicht importieren und dann speichern wir. Und wieder zu einem Film gehen. Okay, wir haben jetzt den Filmtitel in der Mitte und es gibt Padding Ränder, oberen Rand unter. Jetzt wollen wir mit Journalisten arbeiten. Also, wenn Sie sich erinnern, haben wir für den Film einige großzügige. Also alle von ihnen kommen mit dem Film selbst. Also müssen wir sehen, wie wir sie kriegen können. So, wie Sie hier sehen, haben wir in der API, ich gehe Detail API zu bekommen. Und Sie können sehen, dass Teiche direkt hier sind. Sie müssen Postman zum Beispiel nicht verwenden, Sie können hier die Antwort in der Dokumentation, diese API verwenden. So wird das großzügige wieder wie ein Array sein. Und dieses Array hat ID und Namen. Also, was ich brauche, ist nur der Name. Also in diesem Fall können wir zu unserem Code gehen und ein Array von großzügigen und dann Schleife in irgendeinem Text erstellen und alle großzügigen anzeigen. Lassen Sie uns also eine Ansicht in erstellen, wieder in dieser Ansicht. Also sagen wir hier von u und b müssen sicherstellen, dass wir großzügig haben, weil einige Filme nicht haben. Also kann ich das tun. Ist es, wenn ich sage, wie ich ein Objekt geöffnet habe, dann kann ich Filmdetails bekommen, genau wie wir es vorher gemacht haben. Und der Feldname für großzügig, der Feldname ist Journalisten, wie Sie hier sehen. Also zuerst muss ich überprüfen, ob ich wirklich großzügig habe, weil einige Filme nicht haben. Und dann kann ich die Ansicht anzeigen. Auf diese Weise werde ich die Ansicht in diese Klammern setzen. Es ist also genau wie ein wenn. Und in der Ansicht selbst werden wir über den Journalisten schleifen und eine Textkomponente erstellen. Also werde ich hier bei Textkomponente haben, Lassen Sie uns dies hier ausrichten, um auf der gleichen Zeile zu sein. Und dann in diesem Text, Ich möchte alle Generalisten schleifen und anzeigen, weil einige mehr wir, sie haben drei Kategorien, einige mehr Ansicht, sie haben fünf, einige Filme, die sie müssen. Auf diese Weise muss ich sie durchlaufen. Also, wie können wir Schleife? Also in der Ansicht selbst kann ich wieder eine Klammer öffnen. Also in ihm kann ich JavaScript schreiben. Wie Sie sehen, können wir JavaScript in die Vorlage schreiben. Das ist also das Ziel dieser Vorlesung. Ich möchte Ihnen zeigen, wie Sie JavaScript innerhalb schreiben, wie die Vorlage dieser React nativen Komponenten. Also können wir hier sagen, wie Schleife über Journalisten. Also kann ich hier großzügig setzen und dann Karte. Mit dieser Karte ist es so , als ob diese Karte alle Mitglieder durchläuft. Also würde ich hier sagen, und diese Karte, es wird für mich wie einzeln oder Artikel für Artikel zurückkehren. Und dann kann ich das verwenden, um den Komponententext darin zu wickeln. Auf diese Weise werde ich nicht nur wie ihr Geschlecht zurückkehren und was ich in ihm tun werde. Also werde ich eine Komponente zurückgeben, und diese Komponente wird der Text sein. Also werde ich hier zurückkehren und dann werde ich sagen, dass Text, auf diese Weise hier, dass Januar, Ich kann den Namen davon anzeigen, weil ich eins nach dem anderen darüber schleife. Also, wie Sie hier sehen, ist eifersüchtig. Ich schleife über sie, weil es Array ist und ich den Namen jedes Geschlechts hier bekomme. So können wir gehen und unsere Anwendung überprüfen, wenn alles gut funktioniert. Schön. Ich habe hier alle Informationen. Also dieser Film Sie Luca, hat Animation, Komödie, Familie, Fantasy-Kategorien. Aber hier haben wir einen Knoten es sagt, wie jedes Kind in Alice sollte eine einzigartige haben, sagen, was ist das? Einzigartige Schlüsselstütze. Dies liegt daran, dass wir hier wie einen Text haben und wir sind mehrfach Schleifen. Also muss ich eine Schlüsseleigenschaft angeben. Die Schlüsseleigenschaft muss eindeutig sein. Also die einzigartige Sache, die wir in diesem Fall verwenden können, dass wir die ID des Januars bekommen. So können wir hier sagen, dass der Schlüssel nicht nur wie eine beliebige Zahl sein kann, können wir sagen, Geschlecht, wie das gleiche, die wir verwendet Punkt-ID. In diesem Fall haben wir diese Benachrichtigungspistole und den Text, oder jeder Text hat einen eindeutigen Schlüssel. Durch die Karte habe ich mich über die Genres geschliffen und dann habe ich sie wie ein Text angezeigt. Aber hier, wie Sie sehen, sind sie untereinander aufgelistet. Wir wollen nahe beieinander zeigen, sie nahe beieinander zeigen. Dafür können wir Stil für diese Ansicht geben. So können wir auch wie Stil verwenden und es wie eine bestimmte Ansicht geben. Also können wir hier nicht statt Style-Journal sagen, können wir Journalisten Container sagen. In diesem Fall können wir also eine Klasse mit diesem Namen geben. Ich werde hierher gehen und diese Klasse definieren. Und es wird auch wie ein Objekt sein. Und sie nahe beieinander zu machen, weil wir Flex verwenden. Also kann ich keine Flexrichtung sagen. Wenn Sie in CSS wissen, kann ich etwas, das eine Rolle genannt wird, setzen. Und auch für die Ausrichtung kann ich sagen, Inhalt ausrichten oder Elemente ausrichten. Wir können sagen, Zentrum. Auf diese Weise werden sie das sehen, oder sie werden aussehen, als wären sie nahe beieinander. Aber wie Sie sehen, wie der Künstler aneinander duckt. Also müssen wir ein paar Leerzeichen zwischen ihnen machen. Also wieder muss ich einen Stil für dieses Textelement innerhalb des Arrays geben. So können wir sagen, wie nur Stil Geschlecht. So können wir eine Klasse geben. Und diese Klasse wird sich hier befinden. Und dann wäre es ein Objekt. Und ich kann etwas Marge geben, rechts, Rand links. Also Marge rechts, wird es sein, zum Beispiel, können wir es zehn geben. Also lasst uns das versuchen, okay, wie ihr hier seht, haben wir sie alle weit voneinander geschoben. Natürlich können Sie weitere Stylings hinzufügen. Wir müssen genau das gleiche Styling erreichen, das wir auch geben können. Wie einige Schriftgewicht kann auch ummauert werden, so kann es schöner sein. Also werde ich es ein Schriftgewicht fett geben. Und lassen Sie uns den Container ein wenig von oben schieben, wie etwa 20 Pixel, um mehr Platz für den Titel zu haben. Also werde ich hier meinen Rand oben geben, Lassen Sie uns wie 20. Also in diesem Fall werde ich ihre großzügigen und den Titel des Films genau wie wir hier erklärt haben. 45. Movie Star Rating: Eine weitere Information, die wir auch für unser Filmdetail benötigen, ist die Sternebewertung. Wie viel dieser Film bewertet wird? Wenn wir auf die API gehen, werden wir mehrere Felder sehen, um das Film-Detail zu erhalten. Und eines dieser Bereiche ist Stimmdurchschnitt, und auch es gibt eine Stimmenzahl. Also das Abstimmungsmittelfeld gibt mir die Bewertung auf gewöhnliche Kritik über diesen Film. Lassen Sie uns zum Beispiel eine Textkomponente erstellen und diesen Wert ausdrucken. Wir gehen zu unserem Code und wir werden eine weitere Textkomponente erstellen. Also haben wir hier die Ansicht, dass wir damit fertig sind. So können wir unter, dass wir eine andere Textkomponente erstellen. Natürlich werden wir es entfernen. Es ist nur für einen Test. Also werde ich hier sagen, drucken Sie einfach für mich Film Detail Dot, was wir hier haben, die Abstimmung Durchschnitt. So können wir auf diese Weise haben, der Film sind Durchschnitt des Films. Also, wie Sie hier sehen, haben wir die 8.38.3 von zehn, weil sie Bewertung oder Durchschnitt der Filme ist von 10 bewertet. Aber wir wollen eine Sternbewertungskomponente verwenden. Sternbewertungskomponente wird eine Fünf-Sterne-Komponente haben. Auf diese Weise kann ich das durch zwei teilen, dann kann ich den Wert von fünf erhalten. Wir brauchen also eine Sternbewertungskomponente. Also, wo wir das finden können. Leider gibt es in React Native keine Sternbewertungskomponente wie bei der nativen eingebaut. Aber wir können eine finden, wenn Sie Sternbewertungskomponente finden möchten, nur Google es, und dann werden Sie es leicht finden. Für mich verwende ich eine, die React Native Star Rating genannt wird. Also haben wir diese einfach gesetzt und ich werde im npm-Paket etwas finden , das React Native Star Rating genannt wird. Also lassen Sie uns dazu gehen und wir werden diese Dokumentation dieser Bewertung sehen. Natürlich, diese Komponente, viele Eigenschaften genau wie wir mit anderen Komponenten gesehen haben, die wir zuvor verwendet haben. Und hier ein Beispiel für die Verwendung. Es sagt, dass nur importiert Dürre Sterne Bewertung und sagen deaktiviert mag es nicht als Eingabe zu machen , so dass Sie nicht darauf klicken können, weil es nur Präsentationswert und Maxes Sterne ist, können Sie so viel definieren, wie Sie Sterne wollen und Bewertung und dann den Wert der Bewertung, die wir vereinbart haben. Und auch wie ausgewählte Sterne, wenn Sie auf den Start oder auf die Bewertung klicken. Also lasst uns diese Komponente installieren. Zuallererst müssen wir gehen und sehen, wie wir es installieren können. Die Installation ist nur npm installieren React Native Sterne Bewertung. So können wir hier zu unserem Code gehen, das Terminal öffnen, und dann gehen wir zum Terminal Tab, und dann fügen wir den Befehl hier ein. Auf diese Weise installieren wir die Bibliothek von React Native Star Rating. Wir werden in der Lage sein, es zu importieren und in unserer Anwendung zu verwenden. Also die Art, diese Komponente zu importieren, wie Sie wissen, immer, wir sind zum Beispiel, sehen wir die Beispiele. Also hier importieren Sterne Bewertung, weil es eine Klasse von React Native Sterne Bewertung ist. So können wir hier zu unserer Komponente gehen. Schließen wir das Terminal, weil wir damit fertig sind. Also hier werde ich sagen, OK, Import für mich Sternebewertung von React Native Star Rating. Und hier kann ich diese Komponente verwenden. Also statt des Textes können wir Sternbewertung setzen, und hier werden wir einen Stern haben, richtig? Also eine der Eigenschaften, die wir brauchen, ist max Sterne und der Bewertungswert. Also lasst uns sie nehmen. Wir können hören gehen und sagen, wie wir dieses Teil entfernen weil es eine Seite Komponenten ist, so dass wir so etwas haben können. Wir müssen es nicht wieder schließen. Auf diese Weise können wir Max's Sterne haben. Es ist genau, es hat Auto-Vervollständigung, so dass wir es sehen können. Es wird fünf sein. Und auch, wir müssen den Bewertungswert haben. Das Rating wird also die gleiche Bewertung sein, die wir zuvor definiert haben. So wird es Filmdetail sein, obwohl, Stimme Durchschnitt. Auf diese Weise werde ich ihre Bewertung in diesem Wert haben. Aber wie wir bereits gesagt haben, ist der Wert 10, also werde ich ihn durch zwei teilen. Also lasst uns das retten. Und dann wird unsere Anwendung geladen. Und wer einen Fehler bekommen würde, ist etwas, das als unbekannte Formularfamilie bezeichnet wird. Schriftart Awesome. Dies liegt daran, dass diese Bibliothek Font Awesome oder Schriftartsymbole verwendet. Auf diese Weise werden wir diese Bibliothek erst verwenden können, wenn wir weitere Abhängigkeiten installieren, wie wir in der Dokumentation sehen. Aber wenn Sie diesen Pfeil entfernen möchten, können Sie diesen Miss setzen. Und alles, was Sie wieder speichern können, um diesen Fehler zu entfernen, okay, Aber der Fehler immer noch im Hintergrund und dem Terminal, aber es zeigt Ihnen die Realität des Problems. Wie du hier siehst. Ok, Wir haben vier Sterne, aber das Problem, dass die Sterne nicht angezeigt werden, weil es kein Symbol. Und wie Sie sehen, wenn Sie in die Dokumentation gehen, sagen sie, dass Sie nach der Installation zu einer Bibliothek verlinken müssen , die React Native Victor Icon heißt. Auf diese Weise müssen wir auf dieses Symbol oder Richter-Icon-Bibliotheksleitfaden verweisen. Manchmal sind Komponenten von anderen Komponenten abhängig. Auf diese Weise müssen Sie diese Bibliotheken immer installieren und in der Lage sein, sie zu verwenden. Installation der Icons braucht ein wenig Arbeit. Also werde ich es in einer separaten Vorlesung machen. 46. Icons in React Native verwenden: Okay, in der letzten Vorlesung haben wir hier angehalten, wo wir einen Fehler haben weil wir die Schriftart oder die Symbole, die wir wollen, nicht laden können. Wie Sie hier sehen, sehen wir nur Fragezeichen. Wir sagten, dass diese Bibliothek zwischen installiert über Sterne Bewertung hängt von einer anderen Bibliothek, die React Native Icons oder React Native Victor Icons genannt wird. Von React Native 0.6. Sie können nur diesen Kommentar ausführen und Sie sind fertig. Sie brauchen nichts anderes nur zu tun, wenn es einige Probleme gibt, die ich in diesem Vortrag erwähnen werde. Denn in dieser Bibliothek, wie wir hier gesagt haben, haben wir mehrere Schritte, um es zu installieren. Aber das funktioniert mit React Native mit weniger als 0,6. Wenn Sie also React Native weniger als 0,6 haben, folgen Sie diesen Anweisungen. Andernfalls genügt es, npm install and install layer ready zu tun und dann Ihre Anwendung neu zu starten und alles würde gut funktionieren. Ich habe diesen Link genau aus der Bibliothek der Sternebewertung bekommen, wie ich Ihnen schon gesagt habe. Also React Native, Victor-Symbole, das ist der Name der Bibliothek und hier gibt es Installationsanleitung darüber. Also gehen wir wieder hier zu unserem Terminal und fügen Sie diesen Kommentar ein. Wir wollen diese Bibliothek installieren, die React Native Vektorsymbole genannt wird. Auf diese Weise zeigt uns die Sternebewertung die Symbole auf die richtige Weise. Also hier ist die Installation abgeschlossen. Okay, wenn ich speichere, habe ich immer noch den Fehler in meiner Anwendung. Ich würde diesen Fehler immer noch nicht sehen oder immer noch erhalten. Und ich kann die Symbole nicht sehen, weil Sie die Anwendung neu starten müssen. Auf diese Weise müssen wir neu starten, zur U-Bahn gehen und dann müssen wir es beenden, weil dieses Terminal automatisch geöffnet wird. Also müssen wir es komplett beenden. Und dann behalten wir natürlich den Simulator kein Problem. Wir werden sehen lassen Taten, die von der Metro verbunden sind. Und dann starten wir unsere Bewerbung erneut. Auf diese Weise wird es wieder mit der richtigen Abhängigkeit mit den richtigen Bibliotheken geladen . Und wir werden die Symbole hier wieder sehen, genau auf dieser Seite. Okay, jetzt hat meine Bewerbung Guthrie begonnen. Ich habe eine neue Metro eröffnet. Auf diese Weise kann ich zu meinen Filmen gehen und auf einen dieser Filme klicken. Natürlich werden wir den Fehler vielleicht wieder bekommen, weil ich Ihnen zeigen möchte, wenn Sie den Fehler erneut erhalten, was zu tun ist. Normalerweise wird es für einige Geräte funktionieren, aber hier wird der Fehler immer noch angezeigt. Dies, weil Sie etwas mehr tun müssen, was von Ihnen verlangt wird. Es gibt einen Kommentar in der Dokumentation, die Sie tun müssen, der React Native Link React Native Victor Icons genannt wird. Auf diese Weise können Sie React Native mit dieser Bibliothek verknüpfen. Auf diese Weise können Sie ihre iOS-Bibliothek und auch das iOS-Projekt und auch das Android-Projekt mit dieser Bibliothek verknüpfen . Nur wenn Sie diesen Fehler erhalten, können Sie diesen Befehl verwenden. Also werde ich hierher gehen und es einfügen. Und danach werden Sie sehen, dass die Gesetzbibliothek verknüpft wurde, aber wir sehen das Symbol immer noch nicht, weil wir die Anwendung erneut neu starten müssen. Also, wenn es dir passiert ist, dann musst du mit dieser Option gehen, die heißt React Native Link, und dann diesen Kommentar verwenden. Sie müssen diesen Befehl im gleichen Pfad Ihrer Anwendung ausführen. Also bin ich hier in der Film-App und ich führe diesen Befehl aus, den ich dir erwähnt habe, reagiere Native Link, React Native Victor Icons. Auf diese Weise müssen wir die Anwendung erneut neu starten. Also werde ich gehen und das Terminal beenden. Und dann werde ich hier sagen, React Native, laufen iOS oder Android hängt davon ab, was Sie verwenden. Perfekt hier, jetzt läuft meine Anwendung. Ich möchte überprüfen, ob es schon Sterne gibt. Ich würde in einem der Filme gehen. Schön. Wir haben die Sterne schon hier. Aber sie sind wie groß und sie sind wie dieser Stil, na ja, und es gibt, als ob sie anklickbar sind. Lassen Sie uns dazu einige Eigenschaften hinzufügen. Einige dieser Eigenschaften, die in der Dokumentation dieser Bibliothek erwähnt werden, die wir für React Native Sternbewertung verwendet haben. Einer von ihnen wird als deaktiviert bezeichnet. So können wir auch deaktivieren alle diese Symbole sind alle Sterne. Also kann ich hier behindertes Eigentum setzen. Und mit dieser behinderten Eigenschaft kann ich es auf true setzen. Also können wir sagen, deaktiviert. Und dann haben wir es auf wahr gesetzt. Auf diese Weise werden die Sterne deaktiviert. Also gehe ich hierher und wir werden sehen, dass sie behindert sind. Das ist auch eine weitere Eigenschaft, die Vollsternfarbe genannt wird. Sie können die Farbe wählen. So kann ich auch diese Eigenschaft verwenden. Also kann ich hier für diese dunkle Farbe setzen und wir können eine spezielle Farbe wie eine CSS-Farbe setzen. Also würde ich Gold wählen. Auf diese Weise werde ich sehen, dass sich die Farbe zu Gold ändert, wie Sie hier sehen. Außerdem sind die Sterne ziemlich groß, also kann ich sie vielleicht kleiner machen. So können wir eine Eigenschaft haben, die Sterngröße genannt wird. Diese Sterngröße können wir eine Größe in Pixeln geben. Also werde ich hier Sterngröße setzen, und ich werde zum Beispiel 30 setzen. Lassen Sie uns die Anwendung überprüfen. Okay, jetzt haben wir so angefangen. Das ist sehr gut. Jetzt hat jeder Film seine eigene Bewertung, wie Sie hier sehen. Also haben wir hier nichts. Manchmal gibt es keine Bewertung. Manchmal hat es hier eine Bewertung. Also haben wir die gesamte Bewertung, aber lassen Sie uns etwas Platz machen, damit wir den Inhalt dieser Tags unter schieben können. So können wir zu dem gehen, wo wir die Journalisten haben und wir können hinzufügen oder wir können Container Padding Button oder Margin-bottom setzen. So können wir hier den Rand unten setzen, und wir geben ihm 20. Und dann werden wir diesen Inhalt auf diese Weise schieben. Natürlich ist diese Bibliothek, die Icon-Bibliothek genannt wird, oder wir können Symbole sagen, Vektorsymbole. Es hat auch viele Eigenschaften. Wir können eine Komponente verwenden, die Icon genannt wird. Und indem Sie den Namen des Symbols zuweisen, wie wir später sehen werden, können Sie angeben, zeigen Sie ein Symbol auf Ihrer Anwendung. So werden wir später sehen, wenn wir ein Symbol benötigen, ich werde Ihnen zeigen, wie Sie ein Komponentensymbol erhalten und es in der Anwendung verwenden. 47. Filmbeschreibung und Veröffentlichungsdatum: Okay, lassen Sie uns in dieser Vorlesung einige wie Veröffentlichungsdatum und auch eine Beschreibung des Films hinzufügen . Wenn wir erneut die API der Dokumentation überprüfen, wo wir die Film-Datenbank haben, haben wir einige Felder, die wie, zum Beispiel, wichtig für uns sind , um einige Informationen über den Film anzuzeigen. Zum Beispiel werden wir etwas namens Übersicht haben. Es wird wie eine Zeichenfolge sein, in der es einen Überblick über den Film haben wird. Und auch gibt es einige Informationen, wie wir es dem Benutzer über das Veröffentlichungsdatum dieses Films oder dieser TV-Show zur Verfügung stellen können. So können wir sie leicht Verlust hinzufügen oder wir können etwas wie nach der Sterne-Bewertung tun, können wir zwei Textfelder hinzufügen. Einer wird für das Veröffentlichungsdatum sein und der andere wird auch für die Beschreibung sein. Auf diese Weise werde ich zwei Texte haben. Also wird einer dieser Texte für mich das Filmdetail enthalten. Und dann kopiere ich das Feld, das ich habe oder für die Beschreibung verantwortlich bin. Also werde ich hier einen Überblick geben. So wird mir dieser die Übersicht über den Film anzeigen. Und auch wir werden eine andere haben, die das Veröffentlichungsdatum enthalten wird. Also kann ich hier auch wie String verwenden, wir können das Veröffentlichungsdatum sagen. Und dann können wir wie hier etwas Platz setzen. Und nach dem Zitat können wir eine Explosion platzieren, wie wir einen anderen Text hinzufügen können oder der ein wertvoller sein wird. Also würde ich mehr von den Details verwenden und dann werde ich verschwenden oder ich werde hier das Veröffentlichungsdatum haben. Also das Veröffentlichungsdatum, das ich auch von der API bekommen habe, wie wir hier gesehen haben. Also haben wir hier Release-Datum. Also, in diesem Fall, lassen Sie uns speichern und wir werden alle Informationen sehen. Also lasst uns jetzt etwas Styling über diese Texte machen. Also werde ich hier wie auch Stil haben. So wird der Stil der gleiche sein, wie wir es hier gemacht haben. Also werden wir eine Klasse geben und wir werden hier wie eine Übersicht an als auch hier sagen , würden wir wie etwas namens Release-Datum geben. Wir können hier sagen, Release, also nur als Klasse veröffentlicht. Und dann können wir diese Klassen in unserem Stylesheet angeben. Also würde ich nach unten gehen und ich werde sagen, dass ich eine neue Klasse habe, die Overview heißt. Und diese Übersicht werde ich wie eine Marge und Polsterung von oben und unten über die Sterne Bewertungen und auch zum Veröffentlichungsdatum geben. Also werde ich hier sagen, Margin unten wird wie zum Beispiel sein, 15. Und auch Rand oben wird 15 sein. Sie können die Werte setzen Jeder denkt, dass Sie wollen. Ich zeige hier nur, als hätten wir einen Lehrkurs. Jetzt, wie Sie sehen, kleben wir den Inhalt an die Grenzen des Telefons. Also müssen wir etwas Platz geben, damit Sie einen Abstand mit Polsterung geben können. Auf diese Weise kann ich entfernen, oder zum Beispiel kann ich sagen, wie gib mir Polsterung, links, Polsterung rechts. Aber ich kann diese auch entfernen. Und ich kann sagen, gib mir nur Watte von allen Vieren außer, wie ich hier von oben, rechts, links und unten sagen kann . Also kann ich sagen, gib mir eine Polsterung, die 15 Pixel sein wird. So wird es den Inhalt von oben, Inhalt von unten und auch von den Seiten schieben . Und das letzte, was wir geben können Release-Datum, das wie ein mutiger, wir können es eine kühne Farbe geben. Ich würde sagen, Release, und dann werde ich eine neue Klasse haben, oder es könnte Release genannt werden. Und diese Version wäre Objekt und ich werde sagen Schriftgewicht wird mit einem Wert namens kahl sein. Auf diese Weise werden wir das Veröffentlichungsdatum auf diese Weise oder auf diese schöne Weise haben. Okay, jetzt, wie Sie hier sehen, haben wir das Datum irgendwie in hässlicher Weise formatiert wie nicht streiten, aber die Standard-Datenbankformatierung, müssen wir das Datum basierend auf einigen formatieren, zum Beispiel auf Ihrem Land. Zum Beispiel, in meinem Land in Europa, sie setzen den Tag zuerst und dann die Mathematik, und dann danach setzen sie das Jahr. Also nicht so. Also möchte ich den Tag irgendwie formatieren, was für mein Land geeignet ist. Dafür müssen wir eine Bibliothek installieren, die Zieldatumsformat ist. Also werde ich wieder zu meinem Terminal gehen und ich werde sagen npm installiert. Und der Bibliotheksname wird Datumsformat genannt. Und mit diesem Datumsformat kann ich es speichern, und ich kann diese Bibliothek installieren und sie auch in meinem React nativen Code verwenden. Nach der Installation der Bibliothek kann ich sagen, dass ich für mich eine Funktion aus dieser Bibliothek importieren kann, die Datumsformat genannt wird. Also kann ich sagen, importieren Sie Datumsformat aus dem Datumsformat. Danach kann ich diese Bibliothek einfach als Funktion verwenden, indem ich sie auf diese Weise sage. Also lassen Sie uns das Terminal schließen. Wir können nach unten gehen und dann hier sagen, dass ich diese Funktion aufrufen werde, die Datumsformat genannt wird. Und sie würden formatieren, wie Sie sehen, es sagt mir, ein Datum als Zeichenfolge anzugeben und dann Maske oder das Format. Auf diese Weise können wir wissen, was eine Maske aus der Dokumentation dieser Bibliothek ist. Also würde ich hier zu Google gehen und ich habe das Datumsformat React native Bibliothek oder Datumsformat MPM setzen . Und auf diese Weise kann ich eine Bibliothek finden, die Datumsformat genannt wird. Und diese, die ich benutze. Und wir werden die Dokumentation dieses Datumsformats sehen. Wie Sie sehen, gibt es mehrere Formatmöglichkeiten, um Ihre Daten zu formatieren. Auf diese Weise können Sie das passende Format für Sie auswählen. Also zum Beispiel möchte ich etwas haben wie, wie Sie hier sehen, es heißt hier, wenn Sie vier M setzen, dann wird es Ihnen den Monat als seinen vollständigen Namen geben. Wenn Sie YOY setzen, wird es Ihnen das Jahr geben. Bitte durch vier Ziffern dargestellt werden. Auf diese Weise kann ich ein Format wählen, das mir gefällt. So können Sie die Dokumentation lesen und das Format für mich überprüfen. Das Format, das ich mag, ist eins. Also gehen wir hier und gehen zu ihrem Format als zweiten Parameter dieser Funktion. Und ich werde hier Komma sagen. Und dann werde ich Zitate als String setzen, und dann würde ich dieses Format verwenden. Dies wird mir den Namen des Monats vollständig geben, und dann würde es mir geben, wie der Tag 17. Juni, zum Beispiel 2021. Natürlich haben Sie wie zum Beispiel, wenn ich hier D, D wie, dann würde ich den 17. Juni 2021 bekommen. So genau, wie Sie es hier implementieren können. So können Sie einfach kopieren, was Sie wollen. Sie benötigen Stunden, Sie brauchen nur Monat ordentlich, zum Beispiel, dass sie, können Sie bekommen, was Sie wollen durch diese Bibliothek. Also für mich, dieses Format, das ich am meisten für meine Anwendung mag, und es ist am meisten verständlich für die Benutzer. Also kann ich dieses Format verwenden. Auf diese Weise haben wir hier gelernt, wie man ein Datum formatiert und wie man weitere Informationen über den Film hinzufügt. Auf diese Weise werden wir als nächstes über einen Play-Button Film implementieren, wo wir den Film in einem Dialog oder in einem Modell abspielen können. Und wir können Video des Films sehen. 48. Movie: Okay, jetzt in diesem Vortrag haben wir hier einen Play-Button. Natürlich wird es nicht funktional sein, weil wir ein Modell brauchen, wir brauchen ein Video. Aber lassen Sie uns eine Komponente erstellen, wo es hier eine Play-Schaltfläche abspielt. So kann es für den Benutzer anklickbar sein. So kann er darauf klicken, um das Video des Films zu sehen. So mag ich immer natürlich können wir berührbare Deckkraft oder repressible verwenden, wie wir zuvor gesehen haben, aber auch, wir können unsere eigene Komponente erstellen, haben nicht so viel Code hier. Natürlich können Sie all diesen Inhalt immer in einigen Komponenten halten, aber auch, Sie können sie hier nicht geben. Für jetzt. Ich werde eine Komponente erstellen, besonders nur für die Play-Taste. Also in diesem Fall werde ich hier wie einen Container haben, wie wir sehen. Also werden wir hier eine andere Ansicht haben. Und diese Ansicht wird für mich meine Komponente halten, diese Komponente, die ich Ihnen gesagt habe, wir können es nicht eine Blade-Tasten zum Beispiel nennen. Und diese Play-Schaltfläche, Ich werde es erstellen. Also ist es nicht, etwas existiert in React Native ist etwas, das wir schaffen werden. Also, um eine Komponente zu erstellen, wie immer, klicken wir einfach auf unsere Ordnerkomponenten, so dass Sie es überall platzieren können, aber ich bevorzuge es, es in Komponenten zu haben. Ich werde eine Datei erstellen, nennen Sie es Play-Schaltfläche. Und diese Play-Schaltfläche, NodeJS, würde ich eine reine Komponente erstellen. Erstellen einer reinen Komponente, wie wir immer B, C, S wie reine Komponentenklasse verwendet haben. In diesem Fall wird die Butylkomponente erstellt und wir müssen React Native importieren. So können wir IMR sagen, dann können wir sagen importieren React. Und dann danach müssen wir React.com sagen , weil es reine Komponente kommt von reagieren. Also müssen wir unsere Komponente von React dot reine Komponente erweitern. Also lasst uns jetzt den Zustand entfernen. Und dann brauchen wir hier im Gegenzug eine Vorlage. Die Vorlage, die wir verwenden werden, ist berührbare Deckkraft, wie wir mit der Karte verwendet, wenn Sie sich erinnern, oder wir können etwas anderes oder moderneres verwenden, was Prinzip genannt wird. Dieses Prinzip ist in U, wie Sie hier in der neuesten Version von Komponenten in React Native sehen, können wir es verwenden und es hat eine Menge Funktionalität wie beim Drücken in, Ausdrücken und auf längerem Drücken und wie auf der Brust auf der linken Seite, Brust auf die Richtig. So hat es eine Menge Funktionalität gegenüber dieser berührbaren Deckkraft. Also in diesem Fall können wir einen Blick nehmen und es verwenden, um mehrere Varianten Komponente in diesem Kurs zu haben. So wie wir es verwenden können, müssen wir es nur aus React Native importieren. Also werde ich die Komponente importieren, die repressiv genannt wird. Sie müssen sicher sein, dass Sie React Native 0.6 und höher verwenden. Also in diesem Fall werden Sie in der Lage sein, es zu haben. Also werde ich hier Import und dann vorrangig setzen, oder wir können es als Objekt von haben. Und wir werden die native React-Bibliothek setzen. Auf diese Weise werden wir vorrangig wichtig haben. Es ist genau wie die berührbare Deckkraft. Sie, wie Sie hier sehen, verwenden wir das vorher, aber sie sagen, wie wenn Sie nach umfangreicheren und zukunftssicheren Weg suchen , um Berührung basierend auf Eingabe zu handhaben, überprüfen Sie ihre ABI So empfehlen sie, diese Komponente zu verwenden. Auf diese Weise kann ich all diesen Inhalt nehmen. Also hier haben wir ein Beispiel. Wir können alle diese Inhalte kopieren und dann können wir es in unserem Code platzieren, wie in ihrer Rückkehr. Und danach müssen wir natürlich den Text importieren. Also müssen wir uns nur einen Blick darauf werfen. Also haben wir hier etwas wie einen Knopf, aber wir haben unsere Komponente noch nicht aufgerufen. Also müssen wir die Play-Taste Komponente irgendwie in unserer Anwendung aufrufen. Also auf der Detailseite. Also werde ich das auf der Brust entfernen, um keinen Fehler zu haben. Also können wir einfach einen bevorzugten Text haben und ich bin adressierbar. Dann gehen wir zur Detailseite. Ich werde den Play-Button genau so importieren, wie wir es vorher mit einer beliebigen Komponente gemacht haben. Also hier drinnen werde ich sagen Import. Und dann werde ich meinen Play-Button von setzen, und dann werde ich die Datei oder die Ordnerkomponenten ablegen, und dann werde ich meine Play-Button Komponente setzen. Also hier haben wir einen Fehler. Wir arbeiten, weil wir es getan haben, schließen Sie die Komponenten. Also haben wir hier Play Button, wir müssen es so schließen. So sparen wir wieder und wir werden sehen, dass wir hier immer noch einen Fehler bekommen. Der Fehler kommt also wegen des Imports. Also immer, wenn Sie in einer Datei sind oder Sie wichtig sind, eine Klasse oder eine Konstante oder irgendetwas, müssen Sie sicherstellen, dass, wenn Sie diesen Standard haben, Import ist wie Play-Taste. Also, in unserem Fall hier wird die Play-Button-Komponente als Standard exportiert. Sie müssen es also nicht in diese Halterung stecken. Also, wenn Sie es in dieser Klammer setzen müssen, wie wir im Falle von Diensten haben, haben wir mehrere Konstanten, wir werden importiert und keiner von ihnen ist Standard. Also in diesem Fall habe ich es zwischen Klammern gesetzt. Ansonsten, wenn Sie nicht wissen, wenn Sie nur eine Komponente hier haben, dann setzen Sie es einfach so ohne Klammern. Also, wenn Sie diesen Fehler erhalten, sicher, dass Sie immer den richtigen Weg haben, um die Dinge zu implementieren. Also hier bin ich möglich. So wie Sie hier sehen, unsere Komponente und wurde in der richtigen Weise ausgeführt. Also haben wir den Knopf hier, aber auch, wir müssen eine Play-Schaltfläche setzen und es hat ein Symbol, das ein Spiel ist. Also, um ein Symbol zu haben, wenn Sie sich erinnern, sprachen wir über Icon Library, die wir zuvor in unserer Anwendung installiert haben. Also müssen wir auch die Icon-Komponente importieren hier können wir etwas namens Icon aus der Bibliothek importieren, die wir zuvor installiert haben. Und der Name der Bibliothek war React Native Icons. Und diese React Native Vektorsymbole können Sie auch wählen, wie eine Bibliothek, zu der die Symbole gehören, weil diese Bibliothek mehrere Bibliotheken wie, Oh, Font awesome, wie ionic, zum Beispiel, Icons, Google Materialien usw. Wenn Sie also einen Schrägstrich hier setzen, erhalten Sie mehrere Optionen, wie Materialsymbole. Dann können Sie aus Materialsymbolen wählen. Aber wenn Sie ionische Symbole wählen, dann müssen Sie zu ionischen Symbolen gehen und das richtige Symbol für Sie auswählen. Also in meinem Fall werde ich diese ionischen Symbole wählen. Also, hier, wenn wir zu diesem Ionensymbole gehen, müssen wir hier zur Dokumentation dieser Ionensymbole gehen. Also gehe ich hier zu Google. Ich werde Ionensymbole setzen und dann Ionensymbole für mich wiedergegeben werden. Also haben wir alle Symbole hier, dann kann ich den Namen des Symbols bekommen. Also in unserem Fall brauchen wir ein Play-Button-Symbol. Also brauchen wir das hier. So können wir hier vorgetragen haben Umrisse, so dass Sie den Namen von hier kopieren können. Also kopiere ich den Namen und gehe dann zu meiner Bewerbung. Ich rufe die Komponente anstelle des Textes auf. Also müssen wir es öffnen und wieder schließen. Wir entfernen diese komprimierbar. Also hier die eine Eigenschaft dieser Komponente, dass es einen Namen annehmen kann und innerhalb dieses Namens können Sie den Symbolnamen definieren, den Sie bereits kopiert haben. Also können wir hier haben, weil wir diese Bibliothek verwenden. Also werde ich vorgetragen haben Skizze. Es ist also genau der Name, der in der Ion-Symbol-Bibliothek angegeben wird. Und sicher können Sie auch einige Größe geben. So können wir Größe geben. Es ist genau so, wie wir es mit den Sternen gemacht haben, wenn Sie sich erinnern, wir haben es gegeben. Nachdem wir gespeichert haben, werden wir sehen, dass das Symbol auf diese Weise angezeigt wurde. Wir haben also kein Problem mit den Icons. Lassen Sie uns ein anderes Symbol ausprobieren, nur um sicherzustellen, dass es uns wirklich gut geht. Also werde ich den Namen dieses Symbols kopieren. Also haben wir hier etwas namens Kreis in der Mitte. Also haben wir einfach nicht nach vorne, aber wir werden Kreis setzen. Und dann werde ich retten. Und wie Sie sehen, habe ich das Symbol auf diese Weise. Dies ist also eine Möglichkeit, wie wir mehrere Symbole in unserer Anwendung haben können. Es ist eine sehr große Bibliothek. Sie können alle Symbole aus der berühmtesten Icon-Bibliothek in, im Internet verwenden. Hier haben wir wie beschweren sich von ES Fusseln. Wir müssen dieses Symbol von hier entfernen und wir schließen es mit einer Klausel, damit wir kein Problem haben. Diese Textkomponente, wir brauchen sie nicht mehr, also entfernen wir sie. Und jetzt müssen wir den Principal oder diesen Knopf haben , um hier irgendwie platziert zu werden. Aber davor lassen Sie es uns stylen. Also würde ich für diesen Button wie einen Stil oder dies möglich etwas Stil geben. Und von Stilen, die ich aus den Stylesheets erstelle, genau wie wir es vorher gemacht haben. Also werde ich es nicht jedes Mal wiederholen, wenn wir ein Stylesheet erstellen müssen. Also das Stylesheet, wir müssen es wieder von React Native importieren. Und dann habe ich ein Styling für diese Schaltfläche erstellt. Richten Sie also Inhalte aus, wie der Inhalt in der Mitte der Schaltfläche sein wird. Und wir brauchen auch einen Grenzradius. Ich setze 50, denn wenn ich nicht 50 setze, wird es wie ein Rechteck sein. Also gab ich ihm eine Menge Grenzradius, um es wie kreisförmig zu machen. Und dann Unkraut. Und wir haben eine gewisse Höhe, oder Sie können auch eine schlechte Sache geben. So können Sie wie eine Breite 50 geben. So wird es 50 Pixel in Gewinnen haben und einige Polsterung, um den Inhalt zu drücken 10 Pixel nimmt ein Pixel von jeder Seite. Und dann gab ich einen Hintergrund wie so etwas wie Blau. Natürlich ist es hässliche Farbe, aber wir können mehr schöne Farben haben. Also habe ich eine Farbe, die hartcodiert definiert ist, also habe ich sie bekommen. Also habe ich hier Hash und dann die Nummer oder den Code der Nummer oder der Farbe. Aber wir können für dieses Symbol etwas Färbung geben. Als könnten wir es wie eine Farbe Weiß geben. So können Sie hier eine Immobilie haben. Wir verwenden kein Stil-Ordnersymbol, da Sie in der Dokumentation dieser Symbolbibliothek eine Farbe verwenden können. Wenn Sie also zur Dokumentation dieses Icons oder der Icon-Bibliothek gehen , die wir hier verwendet haben, werden Sie alle Eigenschaften sehen, die Sie benötigen. Also, was ich eigentlich brauche, ist Eigenschaft namens Farbe. Dann können Sie die gewünschte Farbe definieren. Also in meinem Fall werde ich die Farbe Weiß hier für das Symbol setzen. Also haben wir hier eine weiße Farbe. So sind wir auf diese Weise mit unserer Komponente der Play-Schaltfläche fertig. Also haben wir es genannt. Jetzt müssen wir es irgendwie so positionieren wie hier. Also, wenn Sie sich erinnern, wir haben wie eine Positionierung erstellt. So können wir uns Zeit für diese Komponente geben. So können wir alle, wir können einen Stil für die Ansicht dieser Komponenten geben. Also werde ich hier Stil haben und dann werde ich Stile Punkt verwenden, und dann werde ich einen Play-Button geben. So können wir hier spielen Button Klasse. Die Play-Button-Klasse wird also eine spezielle Anforderung haben. Also haben wir am Ende, wir werden es hier setzen, so dass wir eine Play-Schaltfläche haben können. Und diese Play-Schaltfläche wird eine Position haben, die absolut ist. So können wir die Position dieser Taste absoluten. Also lasst uns jetzt sparen, um zu sehen, wohin es geht. Okay, wie Sie sehen, hat es absolut wie eine Position und es war in der Mitte der Ansicht zentriert. Welche Aussicht? Also die Ansicht, die wir hier als Elternteil definiert haben. Also hier haben wir einen Container und dann innerhalb dieses Containers nach dem Bild. Es wird also diese Ansicht sein, weil die Ansicht darüber oder diese andere Komponente darüber ein Bild ist. Auf diese Weise werden wir diese Ansicht als Elternteil haben. Und dann haben wir eine andere Ansicht, wo wir diesen Knopf haben. Auf diese Weise können wir Positionierung oben für diesen Knopf geben, der zum Beispiel minus 20 sein kann . Also das ist, nachdem ich berechnet habe. So sehen Sie, dass es hier gewesen ist, denn wenn ich 0 gab, dann wird es von Anfang an dieser Ansicht sein. Also das schlechte Ende, das, was ich dir gesagt habe. So hat es hier eine Top 0. Das ist also ein Beweis für mein OK Das, dass diese Ansicht ein Patent dieser Komponente ist. Also werde ich es minus 20 geben und dann können wir von dort geben, richtig? Als würden wir es hier auf der rechten Seite setzen. Auch ein 20 Pixel, nicht minus 20, weil es aus ihrem Inhalt gehen wird und es 20 Pixel sein wird. Also wird der Button genau hier sein. Also lasst uns es auf eine nettere Art und Weise positionieren. Ich denke, 20, 25, ja , so wird es meistens zentriert sein. Auf diese Weise ist unser Knopf bereit, so dass wir einige Hauptfunktion zu einem Spiel oder einem Film haben können , die wir in den nächsten Vorträgen sehen werden. So können wir ein Modell haben, um ein Video abzuspielen, wenn der Benutzer auf diese Schaltfläche klickt. 49. Video: In diesem Vortrag werden wir sehen, wie wir einen Film abspielen können , wenn wir auf diese Schaltfläche klicken. Aber vorher müssen wir einen Ort sehen, an dem wir diesen Film spielen können. Normalerweise können Sie, wenn Sie einen Film im Vollbildmodus abspielen möchten, ein Modell verwenden. Und Modell in React Native ist eine Komponente, die bereits in den Komponenten von React Native definiert ist. Sie können es auch verwenden, um einige Inhalte auf dem Bildschirm anzuzeigen und auszublenden, basierend auf dem Benutzerverhalten. So zum Beispiel, wie Sie in diesem Bild sehen, können Sie wie einige einen Titel oder einen Text und okay, oder Benachrichtigungen haben. Auf diese Weise können Sie ein Modell über der Anwendungsebene sehen. Auf diese Weise können Sie ein Video innerhalb des Modells platzieren und dieses Video für den Benutzer abspielen. Also zuerst können wir ein Modell in unserer Anwendung haben, um ein Video darin abzuspielen oder zu spielen. Also lassen Sie uns dieses Modell erstellen. Zunächst einmal, wenn Sie zur Dokumentation der Komponentenbibliothek von React Native gehen, werden Sie etwas namens Modell sehen. Und in diesem Modell können wir es verwenden, um einige Informationen darin anzuzeigen. Also zuerst müssen wir ein Modell aus dem React Native importieren. Also lassen Sie uns dieses Modell importieren. Also gehe ich zu meinem Code und gehe zum Detailbildschirm. Wenn Sie sich erinnern, haben wir eine ScrollView platziert. Also haben wir hier die Scrollansicht, die all diesen Bereich unserer Anwendung ist. Wir werden es außerhalb dieses Bereichs platzieren. Also nach dem Schließen von ScrollView, so hier werden wir unser Modell platzieren. Also werde ich hier Modell sagen, und dann werde ich das Modell schließen. Also müssen wir auch das Modell von React Native importieren. Also retten wir das. Okay, das Modell hat einige in schließenden Tag eingewickelt. Auf diese Weise müssen wir den gesamten Inhalt in eine Ansicht einschließen , wie die eine Bildlaufansicht und das Modell selbst hat. Also zuerst, vor der Scrollansicht, werden wir eine Ansicht platzieren. So können wir hier eine Ansichtskomponente haben, und wir schließen sie, nachdem wir das Modell geschlossen haben. Auf diese Weise werden wir diesen Fehler nicht bekommen. So wie wir dieses Modell verwenden können, benötigt dieses Modell einige Informationen, um es darin hinzuzufügen. Also zuerst sehen Sie, dass Sie einen Animationstyp benötigen. Sie benötigen eine transparente oder einige Eigenschaften, die hier immer definiert sind. Zunächst einmal lassen Sie uns Animationstyp haben, der Folie sein wird. Also haben wir hier wie Eigenschaft namens Animationstyp wird Folie sein. Und auch müssen wir etwas Sichtbarkeit haben und auch OnRequest schließen. Und wenn Sie hier sehen, haben wir in ihm einen Inhalt, der dynamisch ist und Sie können setzen, was Sie wollen. In unserem Fall werden wir hier ein Video stellen. Also zuerst müssen wir eine sichtbare Eigenschaft setzen, und diese Visible-Eigenschaft, die Modell sichtbar genannt wird. Und dieses Modell sichtbar ist eine Variable, die als Zustand kommt. Lassen Sie uns also auch die Zustandsvariable kopieren und zu unserem Detail gehen. So können wir in unseren Zustandsvariablen, wie Sie hier sehen, den sichtbaren Zustand des Modells definieren. Daher ist das Modell standardmäßig nicht sichtbar, wenn wir diese Seite besuchen, nur wenn wir auf diese Schaltfläche klicken, wie wir später sehen werden. Also zurück zur Dokumentation, wir müssen modal sichtbar in die, unsere Eigenschaften des Modells. Also haben wir hier etwas Sichtbares, das Eigentum an dem Modell ist , wenn es sichtbar ist oder nicht. Also werde ich hier zum Modell gehen und ich werde diese Eigenschaft einstellen. Auf diese Weise haben wir das Modell nicht standardmäßig. Standardmäßig ist es falsch. Aber wenn ich es wahr mache, lassen Sie es uns hier wahr machen. So werden Sie sehen, dass wir einige Leerzeichen haben. Das ist eigentlich das Modell, aber hier haben wir keinen Inhalt. Lassen Sie uns etwas Inhalt darin setzen, wie ich hier in das Modell einfügen werde, eine Textkomponente. Also werde ich hier beim Text anrufen. Und ich werde in diesen Text wie ein Name oder Hallo setzen, wie wir es lange Hallo oder alt, so etwas wie das. Sie werden sehen, dass das Modell hier ist, wie Sie sehen, aber der Text ist völlig oben auf dem Telefon. So ist das Modell sichtbar. Auf diese Weise funktioniert alles gut. So müssen Sie sich keine Sorgen über diesen weißen Bildschirm machen. Nun, Lassen Sie uns den Standardzustand dieses sichtbaren des Modells auf false setzen. Jetzt wollen wir es nicht mehr sehen. Okay, nett. Also unsere Anforderung jetzt müssen wir dieses Modell so einstellen, dass es sichtbar ist, indem Sie auf die Schaltfläche klicken. Aber hier ist unsere Schaltfläche nicht direkt die Hauptkomponente, die wir innerhalb der Play-Schaltfläche erstellt haben. Auf diese Weise muss ich auch wie dieses Modell für diesen Button sichtbar übergeben , damit ich darauf klicken kann. Und dann innerhalb der Play-Taste kann ich hier zum Repressibel gehen und dann auf Drücken als eine der Eigenschaften dieser Komponente einstellen. Also haben wir eine Funktion, in der wir sagen können, okay, Höhe für mich, das Modell, aber wie wir eine Funktion an die Komponente übergeben können. Also brauche ich diese Komponente, die Play-Schaltfläche genannt wird, und ich habe erstellt, um auch Klicks zu behandeln, weil hier jetzt nichts behandelt wird. Und wenn ich die Cliques innerhalb der Play-Buttons handle, habe ich keinen Zugriff auf die zum Beispiel die Variable, die Modell sichtbar genannt wird. Auf diese Weise habe ich keine Möglichkeit, zwischen diesen beiden Komponenten zu verknüpfen. Es ist genau die gleiche Art und Weise, wie wir Eigenschaften gesendet haben, tun eine Komponente von einer übergeordneten Komponente, wir können auch eine Funktion senden. So zum Beispiel werde ich hier sagen, dass ich eine Eigenschaft setzen werde, die Griffpresse genannt wird. Und dieser Griff drücken, was etwas sein wird, wo ich eine Funktion oder eine Funktion aufrufen kann und etwas für mich wie Set sichtbar tun kann, um wahr zu sein. So, wie ich eine Funktionseigenschaft an eine Komponente in React übergeben kann. Um das zu tun, können wir genau gehen, wie wir eine Komponente oder eine Eigenschaft für diese Komponente mit React definiert haben. Also zuerst müssen wir Handle Brust oder eine Konstante wie nach dem Rendern definieren. Und ich sage, diese Konstante namens gehandhabt drücken Sie Hinzufügen. Es wird von diesem Punkt Requisiten sein. Und dann auf dem Pressen von verarbeitbaren Komponenten. Ich werde sagen, dass, okay, für mich diese Brust ausführen, aber rufen Sie die gehandelte Presse. Auf diese Weise werde ich es auf diese Weise haben. Denn wenn wir auf die Dokumentation dieser Bibliothek gehen, all diese Presse U, wie Sie sehen, haben wir hier auf der Presse. Und dann übergibt er so etwas wie eine Funktion. Und dann definierte er eine benutzerdefinierte Funktion, die er will. Zum Beispiel, setzen Sie gedrückt, so etwas. Auf diese Weise kann ich sagen, okay, führen Sie für mich die Funktion aus, die an die Play-Button-Komponente übergeben wird. Also, wenn ich speichere und auch eine ISA, diese, werde ich sagen, dass in Ordnung, gehandelte Presse für mich funktioniert, aber hier muss ich eine Funktion definieren. Und diese Funktion wird für mich das Modell so einstellen, dass es sichtbar ist oder nicht. Stattdessen können Sie Ihre eigene Funktion definieren. Also werde ich zum Beispiel sagen, Funktion, die ich wie Video abgebildet nennen werde. Dieses Video wird also eine Funktion sein, aber Sie führen es nicht aus, denn wenn Sie ausgeführt werden, dann ist es falsch. So wird es direkt ausgeführt. Sie werden das nicht behandeln, da wir die Ausführung innerhalb der Play-Button-Komponente damit behandeln. Also, wenn Sie sehen, haben wir gehandhabt Presse, die in diesem Fall die Video gezeigte Funktion sein wird, die wir durch diese Komponente übergeben und es wird hier ausgeführt werden. Es ist ruhig, kompliziert, aber es ist leicht zu verstehen. Also übergebe ich eine Funktion an diese Komponente und führe sie aus. Das war's also. Es ist sehr einfach. Und ich führe es aus, wenn ich auf diesen Knopf drücke, als verdrängbar bezeichnet wird, und er hat dieses Symbol. Welcher ist das? Also lassen Sie uns die Video gezeigte Funktion definieren. Also werde ich hier const sagen, und diese Kosten werden ein Video gezeigt, und es wird eine Funktion sein. Und diese Funktion wird implementiert, um das Video oder das Modell sichtbar als wahr oder falsch zu setzen. Also auf diese Weise, Lassen Sie es für jetzt, wie ich Ihnen zeigen, wie Sie diese Funktion später umschalten können. Also jetzt lasst uns alles retten. Und dann werden wir auf diesen Button klicken. Wie Sie sehen, habe ich das Modell, aber ich habe keine Möglichkeit, es zu schließen. Also auf diese Weise, Lassen Sie uns eine Funktion oder eine Schaltfläche erstellen , wo wir darauf drücken und dieses Modell ausblenden. Also werde ich in dieses Modell gehen und eine repressible Komponente erstellen. Wir haben hier Presse zivilen. Und dieser Druck muss ich es auch von React Native importieren. Also können wir hier gehen und sagen Import für mich, drücken. Okay, ich habe es schon. Also können wir hier runtergehen und wir werden einen Repressibel haben und drücken genau so, wie wir es in diesem Knopf gemacht haben. Also, wenn auf der Brust, kann ich die Funktion aufrufen, die Video gezeigt genannt wird. Aber wir müssen es auf eine Weise wie diese ausführen. Also haben wir hier ein Video gezeigt. Also und Video Shawn wird diesen Prozess behandeln und es wird hier haben, um das Modell auf true zu setzen. Auf diese Weise können wir das Modell nicht nur auf true setzen, sondern auch umschalten. Also, wie können wir das umschalten? Also kann ich nicht sagen, wie wenn ich Video gezeigt sage, nehmen Sie den aktuellen Zustand des Modells und dann widersetzen Sie es. Was also ein aktueller Zustand des Modells ist, wird sichtbar modelliert. Danach werde ich sagen, okay, setze das Modell sichtbar, um es dem aktuellen Zustand des Modells entgegenzusetzen. Also, wenn es wahr ist, dann wird es es zeigen. Wenn es falsch ist, wird es es verstecken. Auf diese Weise können wir hier gehen und wir werden das Video ausführen, das auf dieser Taste gezeigt wird. Aber lasst uns den Inhalt des Modells so einwickeln, dass er in dir ist. Denn immer, wie Sie in der Dokumentation sehen, ist es besser, ihm zu folgen. Also hier, hier oben alles in dir. Und dann schuf er einen verdrängten Knopf. Also, auf diese Weise, Lasst uns das Gleiche tun. Also werde ich hier in das Modell gehen und ich werde eine Ansicht definieren. Und diese Ansicht, ich werde es um all diese unterdrückbaren wickeln. Also habe ich hier auch die Schließung dieser Ansicht. Also können wir hier so haben. Danach können wir auch einen Text oder ein Symbol oder genau alles setzen. Wir wollen, genau wie wir mit dem Knopf gemacht haben. Ich gehe zu einer einfachen Lösung. Ich werde einen Text schreiben. Und in diesem Text werde ich sagen, zum Beispiel, Modell verstecken. Okay, wir retten alles. Das Höhenmodell hier oben und ich kann nicht darauf klicken. Also ist es besser, dieser Ansicht etwas Styling zu geben, wo wir zum Beispiel diesen Knopf hier in der Mitte zentrieren können. So können wir hier Stil haben. Und dieser Stil wird von Stilen Punkt lesen und wir können geben, zum Beispiel, Video-Modell. Auf diese Weise müssen wir das Videomodell irgendwie definieren, damit wir nach unten gehen können. Und wir sagen hier, Videomodell hat es das bereits definiert. Also habe ich Video-Modell, Flex, rechtfertigen Inhalte, richten Elemente genau die gleiche Art und Weise aus, wie wir, wir zentrieren Elemente in der Mitte, wie wir zu Beginn dieses Kurses gesehen haben. Also, jetzt verstecken Modell ist in der Mitte. Also, wenn ich darauf klicke, okay, das Modell ist versteckt. Als ich es wieder geöffnet habe, erscheint das Modell. Auf diese Weise führe ich Video aus, das gezeigt wird. Es liest den aktuellen Zustand des Modells und lehnt es ab. Wenn ich darauf klicke, wird es sich verstecken. Wenn ich hier klicke, wird es angezeigt. Also danach, anstatt hier Modell verstecken zu haben, werden wir einen Video-Player haben. Und das, was wir in der nächsten Vorlesung sehen werden. 50. Spielen eines Filmes in der Modal: Okay, jetzt in diesem Vortrag werden wir sehen, wie wir ein Video abspielen oder einen Film abspielen können. Wenn ich also auf diese Play-Taste drücke, werde ich das Modell zeigen. Und mit diesem Modell werde ich hier ein Video haben. So können wir das einfach mit einer Bibliothek tun, die React Native Video Controls genannt wird. Also, wenn Sie zu Google gehen und nach React Native Videosteuerungen suchen, dann werden Sie auf das erste, was aus dem GitHub. Dies ist also eine Open-Source-Bibliothek. Sie, wir können es für die Wiedergabe eines Videos in unserer Anwendung verwenden. Wie Sie hier sehen, wird das Video wie auf diese Weise abgespielt. Also die Anforderungen zuerst, müssen wir diese Bibliothek installieren. Mal sehen, wie wir es installieren können. Er sagte, dass wir zwei Bibliotheken installieren müssen. Eines ist npm installieren, speichern, React Native Video, und auch React Native Video-Steuerelemente. Lassen Sie uns also diese Tool-Bibliotheken installieren. Also würde ich zu meiner Anwendung oder zu meinem Code gehen und das Terminal öffnen. Und dann werde ich diesen Kommentar einfügen. Und dann wird es in meiner Anwendung installiert und wir können es danach verwenden. Also, wie Sie hier sehen, wurde die Bibliothek installiert, es gibt einige Warnungen, okay, egal um sie. dabei nur um Verwundbarkeit. Es gibt einige Korrekturen sollten für diese Bibliotheken gemacht werden und sie werden bei den nächsten Releases kommen. Also, jetzt lassen Sie uns unser Terminal verstecken. Wir brauchen es nicht mehr. Und dann werden wir mit unserem Modell arbeiten. Also zuerst müssen wir das Zulässige entfernen oder wir können es beiseite halten. Wir würden es später zurücksetzen. Also werde ich hier adressierbar sein. Also würde ich es nicht mehr benutzen. Und wir werden hier haben, um die Bibliothek zu importieren. Also müssen wir die Komponente importieren, die die Videos hat. Also werde ich hierher gehen und prüfen, wie wir es benutzen können. Sie verwenden besagt, dass Sie etwas namens Videoplayer importieren müssen. Und der Videoplayer wird diese Eigenschaften haben. Natürlich gibt es viele Eigenschaften, wie wir später sehen werden, können wir sie auch verwenden. Nehmen wir zuerst diese Komponente und importieren Sie sie in unsere Anwendung. Also werde ich wieder zum Code für das oberste Board gehen und dann haben wir diese Komponente bereit und wir können sein Beispiel verwenden. So kann ich, wieder zurück zum Beispiel. Also kann ich diejenige verwenden, die hier sagt, und ich kopiere die Komponente, die hier definiert ist. Also gehe ich zurück zum Code und ich werde es dort platzieren, wo im Modell. Ich werde hier einen Video-Player haben, Beispiel für URL, einige Video und Navigator wird so etwas wie für die Navigation sein, wir können es behalten, weil wir es später brauchen. Also jetzt werde ich sparen. Und dann werden wir auf diesen Play-Button drücken. Okay, wie Sie sehen, haben wir ein Problem. Also sagt es so, Dot Requisiten Dot Navigator. Also müssen wir diese Eigenschaft auch entfernen. Also zeige ich Schritt für Schritt, um keinen Fehler zu haben. Und dann musst du keine Fragen stellen und auf eine Antwort warten. Also zeige ich Ihnen alle möglichen Fehler. Also jetzt brauchen wir nur eine Eigenschaft, die Quelle genannt wird. Und diese Quelle, müssen Sie etwas namens URI angeben. Und Sie werden MP4-Video, mp4-Video haben , wie Sie es von überall bekommen können. Sie können Video hochladen, tun Sie Ihren Server, und dann können Sie es auf diese Weise abspielen. So können Sie einfach den Link des Videos bekommen. Also jetzt speichern wir, und jetzt werde ich das Video abspielen oder ich gehe zu meinem Video, und dann drücke ich Play, und wir bekommen hier einen weiteren Fehler. Der Fehler zeigt hier, dass die Bibliothek noch nicht definiert ist oder ihr Bibliotheksvideo noch nicht definiert ist. Dafür müssen wir eine Lösung finden, die ohne Verknüpfung möglich ist. Denn wie Sie wissen, dass eine Verknüpfung wie React Native Link nur automatisch auf React Native sechs und höher durchgeführt wird. Also ziehe ich es vor, zu dieser Dokumentation der Bibliothek zurückzukehren. Und dann sehen wir Schritt für Schritt, was sind die Lösungen dafür? Wie Sie wissen, dass diese Bibliothek von etwas abhängt , das React Native Video genannt wird. Wie Sie hier sehen, wenn Sie die Dokumentation lesen, müssen wir auf React Native Video klicken, da wir es bereits mit diesem Befehl installiert haben. So haben wir React Native Video und React Native Video Steuerung. Auf diese Weise müssen wir zur React Native Video-Bibliothek gehen und es Schritt für Schritt überprüfen, wie es installiert wird, weil es nicht genug ist, dass Sie nur MPM manchmal installieren. Und dann läuft die Anwendung wie eine Magie. Wie Sie hier sehen, gibt es einige Schritte für die iOS-Installation, Android, und auch gibt es andere Systeme. Woran wir jetzt arbeiten, ist iOS. Wenn Sie für das Android folgen möchten, können Sie das gleiche tun. Es besagt, dass, wenn Ihr Projekt React Native weniger als 0,6 verwendet, Sie diese Verknüpfung durchführen müssen. Andernfalls müssen Sie diese Verknüpfung nicht unterrichtet werden, da automatisch Native reagieren würde, damit es auf Android funktioniert. Und natürlich, wenn Sie mehr Probleme haben, können Sie Folgendes tun, wie hier erwähnt wird. Also zuerst werde ich zur iOS-Installation gehen. Ich werde hier zum iOS Detail gehen und es bleibt für mich wieder. Okay, Sie verwenden React Native 0.6 und höher. Dann müssen Sie die Pod-Installation ausführen. Das war's also. Sie müssen keine Verknüpfung machen, wenn Sie weniger wie Nullpunkt 59 tun. Und dann. Sie müssen eine Verknüpfung machen. Seien Sie also vorsichtig, denn wenn Sie Verknüpfungen und Pod-Installation durchführen, erhalten Sie einen weiteren Fehler. Und es ist sehr schwer, danach zu lösen, und Sie werden zum toten Punkt in Ihrer Anwendung gehen. Also räte ich Ihnen, genau die Dokumentation zu befolgen. Also werde ich hier gehen und MPM installieren. So Pod installieren, hat es entweder zwei Möglichkeiten. Vielleicht können Sie sagen, pod install, alles, was Sie tun können, wie NP x pod installieren, so wie dies. Wenn Sie also im Filmverzeichnis oder im Projektverzeichnis tun, haben Sie leeren Export installiert. Dann installieren Sie diese Abhängigkeiten. Und es wird Ihnen sagen, wie, okay, alles ist installiert und mit iOS-Anwendung verknüpft. In diesem Fall müssen Sie Ihre Anwendung erneut über das Terminal neu starten. Also werde ich meine Bewerbung schließen. Und dann wieder, ich werde die Anwendung erneut mit React Native laufen iOS ausführen. Also MDX React Native Run iOS wird mir helfen, dieses Problem zu beheben, hoffentlich. Okay, jetzt läuft die Anwendung wieder und wir können auf einen der Filme klicken. So gehen wir zum Beispiel zu diesem und klicken auf die Schaltfläche Play. Also, wenn Sie auf Play klicken, Nizza, Sie haben wie Player-Video funktioniert gut und Sie haben die Kontrolle über die Stimme. Und Sie können auch den Ort des steuern, wie zum Beispiel das Video. Und Sie können es auch stoppen und pausieren. Und auch Sie können einige Timer sehen. Und auch du kannst zurückgehen. Aber hier in meinem Fall kann ich nicht aus diesem Video oder aus diesem Modell zurückgehen, weil wir auf der Rückseite Funktionalität brauchen. Also zurück zur Dokumentation der Bibliothek, die React Native Video-Player oder React Native Video Steuerung ist , die wir bereits installiert haben. Es gibt eine Methode oder eine Eigenschaft, wo wir an die Komponente übergeben können und dann wird es wie etwas und Wirkung haben. Also, weil ich hier nicht mehr drücken kann, weil ich eine Funktion angeben muss. Ich muss die Funktion definieren, die für mich dieses Modell verbergen wird. So kann ich auspacken, wenn ich auf die Rückseite klicke, was dieses ist, dann wird das Modell ausgeblendet. Wie wir das einfach machen können, gehen wir zu unserem Code und gehen dann zum Videoplayer und definieren dann auf der Rückseite genau, wie wir es in der Dokumentation haben. Und das auf der Rückseite wird eine Funktion sein. So können wir eine Funktion im Rückruf dieser Funktion ausführen. Also hier werde ich sagen Video gezeigt. Also Video gezeigt für mich ausgeführt, wenn das Modell zeigt. Also jetzt speichern wir und gehen wieder zu unserer Anwendung und dann klicken wir auf zurück. Wir haben immer noch einen Fehler, da dieser Navigator oder diese Funktion auf der Rückseite den Navigator benötigen. Wenn Sie sich erinnern, haben wir diesen Teil hier gelöscht. Also zurück zu dem Beispiel, das er hier angegeben hat. Es gibt eine Eigenschaft namens Navigator. Und dieser Navigator übergibt die Navigationssteuerung des aktuellen Bildschirms. Also brauchen wir das für diesen Videoplayer notwendig. Also werde ich hier und Navigator setzen, und ich werde diesen Punkt Requisite Dot Navigator nicht verwenden. Ich werde die Anwendung verwenden, die wir hier bestanden haben, wenn Sie sich erinnern. Also werde ich diese Navigation verwenden, um dieses Modell zu schließen. Also, hier würde ich sagen, anstelle dieses Punkt-Produkt von Navigator, würde ich sagen, verwenden Sie Navigation. Und dann werden wir speichern und dann wieder zur Videoanwendung gehen und zurückdrücken. Okay, das Modell ist versteckt. Auf diese Weise wird das gezeigte Video ausgeführt und dann das Modell Darm versteckt, weil es bereits gezeigt wird. Jetzt spielen wir das Video auf dem richtigen Weg zu jedem Film ab. Also dafür müssen Sie auch zur Verfügung stellen. Wenn Sie Videos möchten, wo Sie auf Ihren Server hochladen können. Leider ist diese API nicht mit Videos aufgrund von Urheberrechten zur Verfügung gestellt. So können wir hier wie einige spezielle haben, wenn Sie sie Urheberrechte für die Anzeige einiger Filme haben, dann können Sie diese Links mit diesem Video ersetzen. Und dann können Sie auch einige Filme Anwendung, spielen einige Filme in der App. 51. Modale Closing: Okay, in dieser Vorlesung werden wir einige Logik und einige Refactoring für unseren Videoplayer machen. So kann ich zum Beispiel eine Komponente erstellen, die auch Video genannt wird. Und dann kann ich den Videoplayer darin spielen oder platzieren. Und dann kann ich einige Eigenschaften übergeben. Das Ziel dieser Vorlesung, dass ich Ihnen zeigen werde, wie Sie eine Komponente auf eine andere Weise als auch erstellen. So können wir zuerst auf die gehen, unsere Komponenten und definieren Sie eine neue Datei, und wir nennen es Video. So können wir hier sagen video dot js. Anstatt die Snippet-Tools zu verwenden, können wir also auch unsere Hand verwenden. So können wir die Komponente von Hand erstellen, um zu verstehen wie wir wirklich mit Komponenten in React Native arbeiten. So erstellen Sie eine Komponente, ein React Native erforderlich, um React zu importieren. So können wir dies mit Importer oder mit Snipping Tool tun. Wir können React von React importieren lassen. Und dann müssen wir den Namen für ihre Komponente verwenden, damit wir fein geben können, eine Konstante und wir geben ihm den gleichen Namen der Datei, die Video sein wird. Und dann können wir als Funktion definieren. Und dann wird diese Funktion wie Rückkehr haben, wo wir die Vorlage dieser Komponente zurückgeben werden. Und innerhalb der Vorlage dieser Komponente werde ich den Videoplayer verwenden, den wir im Detail erstellt haben. Also hier werde ich diesen Teil kopieren. Also werde ich all das nehmen und es dann in das Video legen. In diesem Fall müssen wir also auch den Videoplayer importieren. Auf diese Weise habe ich Video-Player von React Native Video Control importieren. Jetzt haben wir also keine Kontrolle über ihre Navigation. Und auch haben wir nicht die Kontrolle über die Video Shawn Funktion. Auf diese Weise können wir Eigenschaft erstellen, wie wir zuvor mit der Schaltfläche Play gesehen haben. Aber hier können wir die Eigenschaften wie eine Funktion auf eine andere Weise erstellen. Hier können Sie Aufforderungen an eine Komponente finden oder übergeben. Wenn Sie also eine Komponente aufrufen oder eine Komponente definieren, definieren Sie einen Parameter als Objekt und geben ihm einen Namen. Zum Beispiel sage ich auf Kleidung. Diese Funktion wird also jedes Mal ausgeführt , wenn etwas außerhalb dieser Komponente passiert ist. Auf diese Weise muss ich zum Detail gehen und dann möchte ich meine Videokomponente anrufen. Also wollen wir diese Videokomponente nennen, wir müssen sie exportieren. Also hier, nachdem ich eine Kosten definiert habe, kann ich sagen, Exportstandard, wie standardmäßig, wie wir zuvor gesehen haben. Und dann definiere ich diese Komponente, die ich exportieren werde. So haben wir dieses Video exportiert wird, können wir es im Detailbildschirm verwenden. Also hier werde ich sagen, wenn ich gehe Import für mich Video von, aber nicht von React Native Videosteuerungen. Wir werden es aus Komponenten und dann Video importieren. Und danach werden wir diese Komponente nennen. Also werde ich hier im Modell selbst Video sagen und dann geht das Video hier. Aber davor müssen wir dieses Eigentum passieren, das wir hier definiert haben. Also kann ich ON-Klausel sagen, so dass wir die Eigenschaft auch hier haben können. Also hier haben wir UNCLOS. Diese Eigenschaft wird eine Funktion sein. Weise kann ich sagen, dass diese Funktion das gezeigte Video ausführt. So können Sie hier sagen, Video gezeigte Funktion. Die ON-Klausel wird also als diese Funktion gehen, wie Sie hier sehen, und sie würde innerhalb der Videokomponente ausgeführt werden. Und das kannst du auch. Du musst das nicht alles hinstellen. Sie können nur Video gezeigt setzen. So können wir hier ein Video gezeigt, so als eine Funktion und es wird in der Video-Komponente ausgeführt werden , wenn auf der Rückseite, zum Beispiel. Also kann ich hier sagen, anstelle von Video, das dann UNCLOS gezeigt wird, also auf der Rückseite des Video-Players, wird es dieses ausführen. Es gibt auch andere Eigenschaften, die ich in der Dokumentation gefunden habe, so dass wir sie auch verwenden können, um unsere Anwendung in der richtigen Weise zu behandeln. So zum Beispiel auf Vollbild eingeben oder einen Vollbildmodus beenden und auch die Kontrolle einblenden. Oder zum Beispiel können wir sagen, wie am Ende, wenn das Video und wir gehen, um das Video zu schließen. Auf diese Weise kann ich das Video beenden oder das Modell schließen, wenn das Video fertig ist. Statt dessen kann ich hier wie am Ende und auch gerne auf der Rückseite sagen, wir haben auch diese Navigation schließen. Wir brauchen es nicht mehr, damit wir es entfernen können. So können wir jetzt unsere Anwendung testen. Also werde ich alles retten. Also haben wir hier Video ON Klausel, Video gezeigt und auch dieses. Es sollte nicht so geschlossen werden. Wir können es von einer Seite schließen, um den ES Fusselfehler zu ignorieren. Also, jetzt haben wir Modell und innerhalb der Ansicht und rein und sauber, wir haben hier nicht so viel Code. Also, wenn ich dieses Video abspiele, wie Sie hier sehen, ist es gut abgespielt. Aber wenn ich auf Zurück klicke, dann ist es fertig. Und auch wenn das Video bis zum Ende geht, sollte es auch schließen. Also lasst uns jetzt warten. Es wird zu schließen oder es ist fertig. Jetzt ist es automatisch aus dem Modell gegangen. Auf diese Weise habe ich auf der Rückseite Funktion, die für mich die Arbeit und auch auf die End-Funktion gemacht hat. Es gibt auch mehrere Eigenschaften. Sie können sie in der Dokumentation sehen, zum Beispiel, schaltet Größe-Modus auf Vollbildmodus zum Beispiel, wir haben diese Eigenschaft. Wenn wir es auf true setzen, wird es das Video nicht so umschalten, dass es so ist. Wenn Sie also auf dieses Vollbild-Symbol klicken, wird es nicht so sein. Es ist also nur ein Fall, in dem Sie auch wie diesen Vollbildmodus, Steuerung, Animation, Timing behandeln können , wie die Menge der Zeit Millisekunden, um das Steuerelement ein- und auszuanimieren. Als ob Sie diese Steuerelemente nach einiger Zeit nicht anzeigen müssen. Wenn ich zum Beispiel meine Maus so ohne irgendetwas behandelt habe, verschwinden die Steuerelemente. Also, was tun, wenn ich weitermache, ich berühre das Telefon, dann habe ich die Kontrollen wieder zurück. Also all diese Eigenschaften, können Sie sie selbst ausprobieren und dann werden Sie in der Lage sein zu sehen, wie das funktioniert und wie dieser Videoplayer mit Ihnen arbeitet. Das ist also die Funktionalität, die ich Ihnen zeigen wollte. Es ist so etwas wie zu zeigen, wie wir eine Komponente selbst erstellen und Eigenschaften auf eine andere Weise definieren können , um einige externe Funktionen außerhalb dieser Komponente aufzurufen . Letzte Sache, die ich auch über unser Modell erwähnen möchte , dass, wenn wir brauchen, um die Orientierung zu unterstützen, so dass, wenn ich zurückkehre oder drehen Sie das Telefon horizontal oder im Hochformat. So können wir irgendwie etwas mehr V haben, um wie Vollbild zu sein. Auf diese Weise kann ich auch eine Funktion festlegen, die definiert ist oder eine Eigenschaft, die im Modell definiert ist, die Unterstützungsorientierungen genannt wird, die ich auch aus der Dokumentation des Modells erhalten habe. So kann ich hier sagen, wie unterstützte Orientierung dargestellt werden und Landschaft. Auf diese Weise, das Modell, unterstützen wir das auch. Also, wenn mein Telefon sich dreht, dann wird es so etwas für mich tun, um das Modell auf die richtige Weise zu unterstützen. Also, wenn ich jetzt zum Video gehe, muss ich eine Eigenschaft auf diese Weise hinzufügen, die als Vollbildausrichtung bezeichnet wird. Alle. Auf diese Weise kann ich die Orientierungssteuerung über alle Modelle haben. Wenn das Modell zurückkehrt, um darzustellen, dann wird auch der Videoplayer dargestellt. Also lasst uns das versuchen. Also werde ich das speichern und ich werde das Video starten. Okay, wir haben das Video auf dem richtigen Weg. Ich werde das Telefon so drehen, dass es wie eine Landschaft ist, damit wir es so ausdrücken können. Wie Sie sehen, hat sich der Videoplayer auch an diesen und auch den Vollbildmodus des Telefons angepasst. So haben wir jetzt diese Fähigkeit, das Telefon basierend auf den Eigenschaften zu drehen , die wir haben und wie wir unsere Anwendung definieren. Auf diese Weise werden wir auch in der Lage sein, Vollbild zu sehen , wenn wir das Telefon drehen. 52. Füge Navigation hinzu: Wenn Sie sich erinnern, in app.js, haben wir mehrere Bildschirme erstellt. Einer ist für zu Hause und einer ist zum Detail. Und wenn ich auch nach dem Detail navigiere, werde ich wie eine Navigationsleiste oben sehen. Und wir können diese Navigationsleiste irgendwie anpassen, um auf unsere Anwendung passen. Zum Beispiel muss ich dieses Detail nicht zeigen. Ich möchte diese Home-Funktion nicht zeigen und auch gerne, wie wir hier den Pfeil haben. Ich möchte eine benutzerdefinierte Navigationsleiste. ich zum Beispiel auf dem Home-Bildschirm bin, kann ich eine Suchschaltfläche haben, wo ich sie für Filme verkaufen kann. Und ich kann auch. Wenn ich zu einem Film gehe, habe ich nur diesen Knopf zurück. Also, wenn Sie sich erinnern, in React native Navigation, haben wir die Bildschirme definiert und sie haben einige Eigenschaften. Einer von ihnen wird Komponente genannt. Und auch gibt es eine andere Eigenschaft in React native Navigation, die Optionen genannt wird. Und diese Optionen können Sie die Optionen übergeben, die Sie in Ihrer Navigation wollen. Eine dieser Optionen wird Header genannt. So kann der Header von dieser Navigation einstellbar sein, um eine bestimmte Komponente zu erhalten, nicht diese Komponente oder nicht die Standardkomponente, die in der Navigation definiert ist, auch andere Eigenschaften wie sie sind zurück Bildkopftitel, und auch Header Hintergrund Header Left hatte ihr Licht. Viele Informationen können Sie in der Kopfzeile dieser Navigation oder dieses Bildschirms angeben. Also zum Beispiel, versuchen wir eine Eigenschaft, die Eigenschaft ist, die Header transparent genannt wird, und diese Header Anlage Balance. Wenn Sie es auf wahr setzen, dann wird es den Header transparent machen, wie Sie hier sehen. So wird die Navigation innerhalb dieses Bildschirms sein. Wir können die Navigation direkt in unserem Bildschirm haben, nicht außerhalb des Bildschirms, so werden wir wie etwas Platz im sicheren Bereich haben, wie wir uns erinnern. Also, weil wir das als Raumgebiet nennen, weil außerhalb davon ist es kein sicherer Bereich. Also lassen Sie uns auch diese Option für die Detailseite festlegen. Also gehe ich hier zu den Optionen, kopiere sie und setze sie auch für die Detailseite ein. Also im Detail werde ich auch einen transparenten Header haben. Aber wie ich Ihnen sagte, müssen wir dieses Haus und auch den Titel, der hier ist, loswerden. Dafür können wir unsere eigene Komponente erstellen, indem wir sagen, dass ich Header möchte. Der Header wird irgendwie anders sein, indem er eine Funktion aufruft, die eine Callback-Funktion ist , bei der ich die Rendering-Komponente angeben kann , die hier gerendert wird. So können Sie zum Beispiel sagen, ich möchte nur einen Text, ich möchte nur eine bestimmte Komponente. Ich will nur einen Knopf, wo ich eine Suche habe. Auf diese Weise können Sie Ihre eigene Komponente erstellen und diese in der Kopfzeile hier angeben. Versuchen wir also die App und erstellen Sie unsere Komponente. Also werde ich zu Komponenten gehen, eine neue Komponente erstellen. Also hier werden wir eine Komponente haben, wir können es Navigation nennen. Also würde ich hier sagen Navigation dot js. Und dann würden wir eine reine Komponente erstellen, wie wir zuvor gesehen haben. Also mit dem Snipping Tool Wochenende haben eine reine Komponentenklasse und diese Computer-Komponentenklasse wird importiert und von React Native dot-dot reine Komponente erweitert werden. Also werde ich Ihren IMR haben und dann die Klassennavigation erweitert React dot reine Komponente, wie wir vorher gesehen haben. Oder wir können unsere Navigation umbenennen, um keinen Konflikt in der Benennung Wochenende haben , sagen wir wie navbar. So können wir diese Komponente als Navbar nennen. Haben Sie keinen Konflikt mit anderen Namen der Navigation. So können wir diese Datei umbenennen, um auch und nav bar zu sein. Also lassen Sie uns für jetzt nur eine Textkomponente zurückkehren. Also werde ich hier Text haben, und dieser Text wird wie der Name der Anwendung zum Beispiel halten. So kann ich sagen, Movies App. Auf diese Weise haben wir die Navigation oben, so dass wir nicht vergessen müssen, auch die Textkomponente zu importieren. Also werde ich hier Text von React Native haben. So ist jetzt unsere Komponente bereit für den Import. Also werde ich wieder zu app.js gehen, und dann werde ich sagen, importieren Sie für mich die Navigationsleiste. Also sagen wir hier importieren navbar von Komponente nav bar. Es ist also genau so, wie wir es mit den anderen Komponenten machen. Und hier in der Kopfzeile, im Callback, werde ich die Navigationsleiste selbst aufrufen. Also jetzt, wenn wir sparen oder wir können diesen Anruf wie ein Nebenanruf machen. Also können wir hier diese Seite haben. Und dann, wenn wir speichern und zu einem der Filme gehen, zum Beispiel zu diesem. Und er war er, dass wir den Titel oben und im sicheren Bereich haben. Also brauchen wir oder außerhalb des sicheren Bereichs. Also müssen wir es irgendwie in den sicheren Bereich stellen. Dass Sie das einfach tun und eine Komponente aufrufen können, die als sicherer Sichtbereich bezeichnet wird, speichern Sie jeden von Ihnen kommt auch von React Native. So können Sie diese Komponente nach dem Rendern verwenden. Also werden wir diese Rückkehr zurücksetzen und wir würden die Textkomponente mit der Komponente umgeben , die als sicherer Sichtbereich bezeichnet wird. Also werden wir hier den Text in diesem sicheren Bereich haben. Und wie Sie sehen, wird der Titel der Film-App in den sicheren Bereich verschoben. So ist unsere Anwendung nicht widersprüchlich oder der Inhalt unserer Anwendung, zum Beispiel, die Navigation steht nicht in Konflikt mit dem sicheren Bereich wie der Orange und der Zeit, und auch der Batterie und dem Signal. Also, im sicheren Bereich, gehe ich auf diese Navigation. Ich werde hier ein Logo haben. Und auch können wir so etwas wie Zurück Button definieren, wie es vorher war. Und auch können wir ein Symbol für die Suche haben. Aber im Detail dieses Films können wir nur einen Zurück-Button haben. Wir mussten keinen Anstieg und die Einheimischen haben. So können wir nur einen Zurück-Button haben. Also im sicheren Bereich können wir einen Blick haben. Und diese Ansicht wird auch von React Native importiert werden, wie wir gesehen haben. Und dann haben wir einen Knopf, so dass wir einen berührbaren Opazitätsknopf verwenden können. So können wir hier berührbare Deckkraft haben, wie wir hier sehen. Und es hat Eigentum, das auf der Presse sein wird und zurück gehen wird. Also jetzt haben wir die Tupeldeckkraft. Wir können das Symbol darin angeben. So können wir auch einige Icons aus unserer Icon-Bibliothek verwenden, die wir bereits installiert haben. So können wir diesen Namen für dieses Symbol geben kann ein Zurück Symbol sein. Ich habe den Namen schon aus der Dokumentation bekommen. Und die Größe. Wir können die Größe des Symbols angeben, das 40 sein kann. Und wir können auch etwas Farbe geben, die weiß sein kann. So können wir hier Farbe haben. Und dann setzen wir diesen HashCode, drei Fs, und dann schließen wir das Symbol von einer Seite. Also, was wir jetzt importieren müssen, ist die Ansicht. Und wir müssen auch die Icon-Komponente importieren. Also Import Element Icon Komponente aus der Bibliothek, die wir zuvor angegeben und wir verwendet. Also lasst uns das speichern und versuchen. Schön. Wir haben hier, um das Symbol berührbare Deckkraft. Wir können darauf klicken, aber es tut nichts. Auf diese berührbare Deckkraft drücken, können wir angeben und navigieren, so dass wir zurück zur vorherigen Seite navigieren können. Also werde ich hier auf der Presse sagen. Und mit dieser Kompresse wird es eine Callback-Funktion sein. Und in dieser Rückruffunktion muss ich die Navigation angeben. Wenn Sie sich erinnern, haben wir nicht die Navigation hier, weil wir eine Navigationsleiste haben. Also müssen wir es irgendwie von außerhalb dieser Komponente übergeben. Irgendwie müssen wir eine Requisite für diese Navigationsleiste erstellen. Also kann ich hier wieder zur Navbar-Komponente gehen und eine neue Requisite erstellen, die auch Navigation genannt werden kann. Bevor ich zurückkomme, werde ich eine Konstante definieren. Und diese Konstante wird ein Objekt sein, weil wir andere Eigenschaften benötigen, wie wir später sehen werden. Ich werde es Navigation nennen. Und diese Navigation, wir werden diese Punkt-Requisiten haben, weil wir diese Punkt-Requisiten importieren und sie als Requisite verwenden. Und dann können wir hier auf der Presse sagen, wie nachdem wir diese Kompressenfunktion haben, wir müssen etwas ausführen, das Navigationspunkt genannt wird, gehen Sie zurück. Und dies ist bereits definierte Methode, die mir hilft, in meiner Anwendung auf die vorherige Seite zurückzukehren. Aber vorher müssen wir nicht vergessen, die Navigation an Navbar-Komponente zu übergeben. Und wir können das durch ab.js tun. Und wie Sie hier sehen, können wir die Navigation angeben. Und in dieser Navigation, können wir sagen, bekommen die Navigation von ihrem aktuellen Bildschirm, wie wir es bekommen können. Wir können die Navigation vom aktuellen Bildschirm erhalten, indem wir hier in der Callback-Funktion übergeben, so etwas wie Gold, Navigation, weil es einen Parameter hat, wo wir den Unterschied der Navigation dieser Detailseite verwenden können , für -Beispiel. Und dann kann ich es hier passieren. Speichern wir also alles und versuchen Sie dann erneut, auf die Schaltfläche zu klicken. Okay, wir haben einen Fehler. Dies ist ein Fehler, den ich mit Absicht gemacht habe, weil ich Ihnen zeigen möchte wie Sie dann Navigation von der Waage wie von diesem Bildschirm passieren können. Also, wenn Sie die Navigation anhalten möchten, Es ist nicht genug, um es so zu übergeben. Sie müssen es mit Klammern, mit gebogenen Klammern umgeben. So kann es ein Objekt sein. Also müssen Sie sehr vorsichtig mit diesen sein, wie eine Klammer und wie Sie sie angeben können. Auf diese Weise wird es Arbeit sein, weil es definiert wird, die Callback-Funktion wird definiert. Wenn ich also auf diese Schaltfläche klicke, gehe ich wieder zu meiner Komponente zurück. Auf diese Weise werden wir ein bestimmtes Ziel haben, wie das Zurückgehen Schaltfläche nur für die Komponente des Details, weil ich das nur für die Detailseite angegeben habe. Ich habe nicht für die Startseite Seite. 53. Home: Okay, hallo, Hash von Schlüssel aus Verurteilung und Navigation hat eine Sulfhydryl AAC. Die eine Seite bin ich eine Navigation fragte mich ein Unterkopf und das Hirsch, die alten Filmdetails, aber er dann bekam es eine 100 und das wird nun Navigation Herzschlag uns, wie die Intensivstation Morgan gab und hatte ihre eigenen mich war und Navigation und mehr wäre ein Sub. Wie wäre es, wenn Sie sehen, Ihr Navigationsmodus wäre ein Detail, dass MOOC und wir haben 30 und Komponente gleich dynamische Partei, die nicht nur gewesen war, wie SI, Führer hatte Haupt gegangen für hatte nicht Haupt, wurden nicht durch 0. Falsch. B hat ein weiches Herz und Mozart oder für einen kann man unser Leben betreten. Wie bedeutet das, dass wir sagten, Standard-Requisiten oder Hauptsitz Sie tun. Das hatte nicht gemeint, dass es um Stürze gegangen ist. Er hatte älter AC noch gegangen, aber versteckt in Auth0, die eine Eingabe, Typisierung Eigenschaften ist bis zu zed Tintenfisch eidetic, und gehen Sie vor und vor allem weg Ich kaufte auf Boolean. Regierung ist jetzt Mitte Block Typen Befehl wichtig genug Schlaf Studie in der Freizeit von dort wird sie zerschlagen Mirada und was sie nicht mögen, böser Heck Mann und bestimmte Amaka Mann und irregeführt, Hand lange gesucht in Lean und Drop Divs mit Standard-Requisiten genug, aber Sie erhalten kein Amin. Hey, komm schon, hacken in, wird keine nav bar bekommen, dot brach divs waren nav bar, die Standard-Requisiten wurden es auf hey geschliffen, Althea für meine Art von Guan und Komponente j hat thermische bekommen dies zu haben Hauptkörper und warum jede Firma mit ihm? Ich bin nicht vorangegangen als ich. Starten Sie sie auf Azure, die arabische Navigationsleiste, MC, dass, wenn eine Navigationsleiste und Modul von heißem Wasser Körper, dass es R4 und alle Navigation gekauert ist weg. Main Lemma am Korpus, wie die ACA oder mein Vater cool, Haupt und die meisten gegangen ein weiches Herz und fand eine fettige Derek und R3, dass nav bar Eigenschaft, dass ich eine Knotenstütze für wie der Glanz Talk fällt. Markieren Sie genügend Unterseite des gleichen Bit-Details. Ich hatte ein Team durch p-Hat und nav bar gelehrt. Hoher Mais kam zu 0 Overhead Gombe, ein Sub-AC. Aber eidetische Karten und Navigationsleiste genug begleichen Implementierung. Wenn alte Leute bekam ein Nein, BS haben eine leicht auf einen Heck, wenn ein Fahrer auf sie, es wird, aber glaubst du, dass sie Gamma bekommen und diesen Farbstoff Sie, die Unbekannten brauchen nicht. Falsch, es gibt keine Grenze, wenn all die hinzugefügte Komponente für durch Italien aufgeweckt hat, er dahinter ein Sulfhydryl. Sie sehen sich Höhe auf dem Home-Bildschirm. Und dann ist die Komponente in der Haupt für wie diese Domäne, aber doppelklicken Sie auf einen Knopf und füttern und wenn Fett, wenn und der Kopf, der bedeutet, dass ich Dudley ausschließen wollte, Alice hatte mich das Logo und Krankenhausanwendung gesagt. Was könnte das ein li eine Suche nach dem Tag mit einem heißen Objekt alle im Hauptkörper in einem Schuss auf diesem Diff-Amp-Job, Danny, hey Ayesha an, dass diese diff-amp habe Dann emittiert, wenn inline, wenn überhaupt, B-Zelle auf die breite für Euler oder wie heiß die Herz wirklich schlecht Schuss, das heißt, der Gründer hatte Kaffee Highland vor allem durch das Herz wieder und Hauptkraft, dass eine Hotline für eine Weile, sehen Sie es nicht viel. Wenn Sie in Maine nicht zwingen, aber er dann hat es eine Menge zu ihm für Bob. Hi weg, Interview genug. Also Italien, die Lamellen waren, nennen hauptsächlich falsche Yanni und machen dann auf einer Domäne eine sulfhydryl ACA Navies der Höhe bei der direkten Methode dann. Aber er dann ic und dann meine Mutter und die Hälfte war vorbei. Sie ließ ihn um sie reden. Gwurde dem Theater nach Hause gezeigt und hatte die Mason auf der APA von einem Hub. Hallo, ehrlich gesagt an einer Leuchte wurde von diesem Bob abgelehnt. Und warum kommen sie die Halbwertszeit für ADA heraus, es kräuselt ihr Haar Mitte Blatt für Madelyn, finden Sie einen Kumpel, ich werde keine Komponente bekommen, die oh, wenn sonst Kumpel, Kumpel, dass es jeder von euch sehr hatte, wenn du nicht Haupt-Filmemacher hatte Gegenteil davon gegangen, wie ich es sehe. Ich nehme an und nav bar kämpfen es. Wenn es um einen hochfetten IE und IC geht, dass Sie auf eine kleine Reise unter AC gehen würden. Wenn ich es tat, dann hätte es sein können, dass sie eine Bleikomponente hatten. Ich werde sehen, es wird Modul, dass der Herzschlag uns, dass ein Hamburger Preis sie Morgan und Gesundheit Komponente. Und wie ich gewesen war, traurig und heiß Solar wird Logo-Inseln zu bekommen hatte , wie das Logo und Logo Mann Anwendung Debye zurückgesetzt worden. Dann kann es Bildkomponente. Und diese Bildkomponente oder ich kaufte auf, wie es als meine Quelle und Quelle MAC Maßnahme für diesen Aggrecan sehen wird nicht backen, wenn ich auf meine Liebe gekauft. Oh, du bist drin und mein linker Fuß ist mehr erforderlich. Nun, aber es erforderte RF und Massage, ein Hausenthauptung und MLF. Und ich bin das Manifest, aber Kontinent mit Gold-Logo, einige mit, dass es y Einheit geklumpt. Wenn Magellan Vermögenswerte durch die dyadische und eine halbe Rückwärtsentwicklung, wenn 4D plotten , dass als Vermögenswerte für gut oder schlecht hier ist, sie hassen Bild und Bild. Er, ich besser und mehr v's Blick PNG innerhalb meiner Hurrikane, viel Spaß. Und ich hatte meine Seite. Ich habe Gesetz, dass Agenda Mudra bis dahin eine heiße Komponente auf Vermögenswerte für Gallensäuren und Filme. Bild auf Filmen Punkt PNG. Für einen harten wird es nicht rauskommen. Bild oder Logo. Und nav bar, wenn Sie eine AAC durch den Haarkamm hatte , kann ein Bild oder eine Anzeige dominieren oder fallen oder importieren, React Native für einen Kumpel, Ich werde Mais und Andi sein. Judy, sei er. Ghani ist es, sie authentische Lasagne Bein und es hat eine Wahl Tauchen für Bild eine Menge von gamma1 sein, aber er konnte noch nicht solche Gewichte wählen von Gesundheit diese Dyne gut jetzt bin ich ein additives Objekt Stile McDermott, , die nicht auf ihre eigene Art war, sondern auf Stylesheet, warum dieses Lernblatt, das ich eine Klasse hinzufügen muss, lokaler ist. Aber er dann konnte es Riff und ein Horn konstant dort. Jedes hydrogene Glas oder wie digitale Komponente und wie alt. Und sie sind konstant. Wenn ich auf Stile gekauft und tat ein Unkraut ADA als Dynamit, wie sowjetische Komponente, genetische Kumpel, wenn gerichtet Komponente, alte Stylesheet hier und verstanden eine Komponente, die die meisten Tagebuch Blatt wird jetzt erstellen. Wir erschaffen den Objekt-Ellenbogen auf einem Glas zwischen meinem Schatten. Mord ist abgelehnt. Für Logo bis hohem Mais. Ich kaufte auf Breite, Höhe und Breite. Viele der hoch gegangene Heim-Szene oder schlechte Kopfschmerzen oder Heu, Mais und hoch, wie Amy sagte. Komm schon. Ich sehe weiter gegangen war ich auf Logan gekauft. Er nickte wieder. Warum in Gebühren LU minus ECA und ich werde dieses Stylesheet importieren. Kumpel, nicht auf dem Logo. Mehr Drew's Michelle kann mit einer Zeitschrift über Bienen Elliot kommen, sie, für schlecht, hey Mann, Sie werden kein Blatt auf uns bekommen, wenn Danny ein schlechtes Bild für Methode und wir werden Hilfe bekommen. Ein geiler hier drinnen am Rand es fname für degeneriert den Haken drauf. Meine Studie dann kann es berührbare Deckkraft Komponente Ileum und hatte das weiß. Ja. Ja. Also habe ich eine Menge von ihnen oder sie hatten berührbare Deckkraft, dass sie Coursera Trialisten hatte ich traurig gewesen, Ich begann mit einer vollständig Allegruppe. Das Gebot Ionen Symbole aus der Botschaft, skizzieren, was die Größe ist, 18, äquivalent es noch. Aber Hickman kann Heu funktionieren und dann musste ich einen machen, bis Jack, Nevada und navigieren Allahs von D-Day und später Hannah, ich bin Debbie, die Regeln der Cloud, die wichtigsten Ideen, wie man koordiniert. Und Sache als solche, dass Ach entweder Suchkomponenten UFO sind. Nun, ich sagte, wir sahen fast einen Anstieg. Ein flaches Bett kann halten, es sei denn, das Wählproblem wird fast Styling sein. Ich weiß nicht, unsortiert dachte einen Topf auf einem lokal dort. Und wie Sie sich erinnern, Janet unten, thermodynamische Daten hatten eine jährliche oder nicht, Die Hustler-Jährigen sterben in der Tat, warum sie beschlossen D je höher das Logo und dann die ADSR. Was für ein lustiges, dass es hängen kann auf Stil sein, wie es ist direkte RF, Stile Befehl, was ich meinen Sohn bekommen hatte und ich bekam auf einer Domäne f. Aber Lumen hatte einen Namen Haupt, nie von einem Vermögenswert oder feindselig wie Mohak es tat gehört. Huntley hat das geantwortet. Er süchtig Oh, hoch auf auch genannt Magenta Boden für alles, was sie tut es fügt Sprengkopf zu haben die ältere NACADA Bewertung hatte einen Flicks, indem Sie Ihnen Inhalt oder Modell oder eine Hand auf Adorno es V im Raum gewesen? Ja. Das Logo, ein geil, ein hochwertiger Minutenraum zwischen irgendwelchen warum habe ich geschlossen oder sie werden sowieso nicht, dass elisa Platte. Schlechte HIG. Und das ist alles. Wir sehen uns dort. Jede externe Fett und regenerieren Engpass und wissen, wie man es das ganze Jahr zu heben. Dann flickt und hochwertig ist klein, Flex-Richtung der Säule. Das war ein handheld Gesamt Danny Meyer hi Ecke Spalte, das Modell und alle anderen Tiere, Puppe, studieren sonst entweder der Mittelwert oder die ADSR Firma wird die Polsterung herausbekommen und hatte die Nevada und Schwann, wie aus einem Hemd Sie quantitieren, Einbettung von Asherah, was ich nenne, geht los, wenn der Mob, den sie weitermachen und ich werde meiner Spule helfen, wird keine fischigen Artikel ausrichten, senden Sie das Foto. Das Acetyl sein Shaquille, MALDI, Mozilla, und Bop legte ein Geschirr auf ihn, Ghani, über ehrlichen Rand. Was ich behaupte. 54. Besichtigung von dritten Abschnitten: Okay, in dieser Vorlesung werden wir sehen, wie wir die app.js einfacher machen können. Wir können etwas Code in eine separate Komponente verschieben. Ich mag immer das Superego die Dinge zu einigen Komponenten, um eine niedrigere Codebasis in meinen Anwendungen oder in meinen Dateien zu haben . Dafür können wir vielleicht diesen gesamten Navigationscontainer in eine andere Komponente verschieben, da wir einige Ladebildschirme erstellen müssen und auch Fehler machen müssen, wenn es einen Fehler in der API gibt, damit wir ihn in der App anzeigen können. Also würde ich mit der Erstellung einer neuen Komponente fortfahren. Vielleicht kann ich es eine Hauptnavigation nennen. Also kann ich hier einen Namen in der Komponente geben. Wir können sagen, Haupt-Navigationspunkt js. Und dann können wir wie ein reiner Komponenten-Audio-Typ erstellen und die Komponente mit einem Staatenlosen erstellen. So können wir hier eine reine Komponente erstellen. Also werde ich meine Snippets anrufen, und ich werde reine Komponente sagen, ich werde diesen Zustand entfernen. Und wir können auch den gesamten Inhalt von Like aus dem Navigationscontainer schneiden. Als würden wir den Navigationscontainer nicht haben. Wir kriegen nur den Stapel. Auf diese Weise bekomme ich nur die beiden Bildschirme oder den Stack-Navigator. Also würde ich es ausschneiden und dann füge ich es in meine Hauptnavigation ein. Und wir werden auch zurückbringen, was für uns fehlt, zum Beispiel fehlt uns die Konstante, wir werden es bekommen. Hier. Ich bringe Ihnen bei, wie Sie eine Refaktorierung für die Dinge durchführen, da Sie sonst einen komplizierten Code haben und nicht wissen können, wie Sie mit diesem Code umgehen oder pflegen sollen. Wir brauchen also auch einige Importe, wie Sie sich erinnern, wir müssen React importieren. Also bekomme ich eine React und Put Extend von reiner Komponente. Und auch wir müssen hier einige Importe haben, wie wir später sehen werden. Also brauche ich zum Beispiel den Create Stack Navigator, damit wir ihn nehmen können. Und wir brauchen auch die Bildschirme, die Komponenten, die wir als Greens in dieser Komponente verwenden werden. Also werde ich sie schneiden und hierher gehen und Import platzieren, aber unsere Komponente an einem anderen Ort. Also müssen wir einen Schritt nach oben gehen und dann die Bildschirme machen, und dann bekomme ich den Komponentenbildschirm. Und dann auch das Gleiche für das Detail. Aber hier befindet sich die Navigationsleiste der Komponente im selben Ordner. Also können wir es einfach so ausdrücken. Danach sparen wir. Okay, es ist, unser Code ist formatiert, wir haben keinen Fehler oder kein Problem. Anstatt all diese Tags, Navigator und all das Zeug zu haben, können wir einfach unsere Komponente aufrufen, die als Hauptnavigation bezeichnet wird. Importieren wir also die Hauptnavigation. Ich sage „Importieren“. Und dann ohne Klammern, wie wir gelernt haben. Also haben wir hier eine Hauptnavigation. Also bekomme ich hier Komponenten und gebe mir dann die Hauptnavigation. Auf diese Weise kann ich mich hier in der Navigation verwickeln. Ich kann sagen, bring mir die Hauptnavigation. Und es wird von einer Seite geschlossen, weil es sich um eine Komponente ohne Inhalt handelt. Und jetzt müssen wir die zurücklegen. Oder wenn Sie automatisch hübscher speichern möchten, setzen wir alle diese Klammern ein. Jetzt funktioniert unsere Komponente einwandfrei. Wenn wir also ins Detail gehen, okay, Nice. Und wie Sie hier sehen, haben wir einen immer noch, einen Fehler, dass der Header oder der Navigator oder der Haupt-Home-Navigator noch vorhanden ist. Selbst ich sagte, wenn EDS-Details es ihm dann nicht zeigen. Und für dieses Problem müssen wir unserem Navigator auch einige Eigenschaften hinzufügen. Eine dieser Eigenschaften, die Sie hinzufügen müssen, um diese Überlappung der Hauptnavigation innerhalb der Detailnavigation nicht zu haben diese Überlappung der Hauptnavigation innerhalb der Detailnavigation , wird Header-Modus genannt. Sie müssen also sicher sein, dass Sie es dem Navigator-Stack-Punkt-Navigator hinzufügen. Der Header-Modus kann also auf Bildschirm eingestellt werden. Sie können also sagen, dass der Header-Modus der Anwendung ein Bildschirm sein muss. Auf diese Weise. Wie Sie sehen, haben wir diese Navigation der Heimnavigation nicht mehr. Wie Sie sehen, haben wir alle definiert. Wenn die Anwendung also auf den Startbildschirm kommt, wählt sie die Navigation aus, aber die Hauptanwendung ist Drew. Auf diese Weise wurde die Navbar basierend auf dem Haupt gerendert. Wenn es stimmt, wird das Logo und auch die Schaltfläche „Suchen“ angezeigt. Wenn dies nicht der Fall ist, wird nur die Zurück-Taste angezeigt, wie Sie hier gesehen haben. Jetzt sind wir bereit mit unserer Anwendung wie innerhalb der Navigation. Im nächsten Abschnitt werden wir sehen, wie wir darauf klicken können, um bei der Suche nach OT zu navigieren, zur Suchseite zu navigieren und nach amorphen zu suchen. 55. Filme und -videos: Okay, in dieser Vorlesung werden wir sehen, wie wir eine Welle erzeugen können. Also müssen wir nach einem Film oder einer TV-Show suchen. Auf diese Weise muss ich die richtige API finden, um das zu verwenden. Wenn Sie also zur API-Dokumentation gehen, finden Sie etwas, das Surge genannt wird. Und in die Welle, können Sie in der Lage sein, herauszufinden. So etwas wie Suche nach Filmen und auch Suche TV-Sendungen. Suchfilme haben also eine bestimmte API, die Surge Movie genannt wird. Und es hat einige Parameter, die Sie übergeben müssen. Das Gleiche geht auch für Surge TV. Wir müssen auch SRD und dann dv haben. Und dann können Sie die Parameter wie den API-Schlüssel und auch Sprache und Seite und auch die Abfrage übergeben , die erforderlich ist, so dass Abfrage, wird es die Sache sein, die der Benutzer hier in der Anwendung eingeben wird, und dann wird er die Ergebnisse basierend darauf. Also lasst uns gehen und den Dienst dafür erstellen. Also für mich werde ich die gleichen Dienste haben, die ich zuvor erstellt habe. Also werden wir hier die Dienste haben. Ich würde einen dieser Dienste kopieren, also lasst uns diesen kopieren und hierher gehen. Und dann nennen wir es „Surge Film“ oder „TV“. Also werde ich Ihnen sagen, warum wir, wie wir diese Dienste zusammenführen können, um zu bekommen. Auf diese Weise kann es Surge Film oder TV genannt werden. Also suchen Film und die DV. So können wir gemeinsam nach beidem suchen. Und hier können wir sagen, Suche nach Film oder TV nach Stichwort. So können wir etwas haben, Schlüsselwort oder eine Abfrage, die hier als Parameter übergeben wird, und wir werden das Ergebnis basierend darauf erhalten. Also lassen Sie uns unsere URL erstellen. Also zuerst brauchen wir eine Abfrage, wie wir in der Dokumentation gesehen haben. Also, wie Sie hier sehen, haben wir so etwas wie Gold eine Abfrage. Also wird die Abfrage auch übergeben, führen Sie die Anwendung oder an die API über die URL. Also dafür muss ich einen Parameter übergeben, wenn ich diesen Fehler aufrufe ist wie von der Anwendung, wenn der Benutzer, den wir darauf klicken und einige dicke Bücher haben. Und dann wird er die Suche drücken, dann übergibt er die Abfrage. Also muss ich hier etwas haben, der einen Abfrageparameter genannt wird. Und in diesem Abfrageparameter kann ich es über die API übergeben. Also, wie wir es passieren können. Wenn Sie sich erinnern, haben wir Parameter wie diesen. Wir können auch eine Abfrage anstelle davon übergeben, da diese Parameter genau, Sie können sie über eine URL übergeben. Also, jetzt brauchen wir eine Abfrage, und diese Abfrage wird das Quadrat sein, das an diesen Fehler übergeben wird, also können wir hier dann haben, okay, übergeben Sie für mich die wertvolle Abfrage. Auf diese Weise werde ich meine API mit dieser Abfrage haben. Aber statt dessen müssen wir suchen, wie Sie hier sehen. Wenn wir nach oben gehen, haben wir hier TV und Serge Film. Es ist also genau die gleiche Art und Weise, aber das ist anders. Also lasst uns das als Suche setzen. Und jetzt diskutieren wir über den Typ. Also muss ich nach einem Film oder einem Fernseher suchen. So können wir hier keinen weiteren Parameter haben. Wir können sagen, Typ. Also, und dieser Typ, können wir ihm einen Fernseher oder einen Film geben, wenn wir den Dienst anrufen. Also werde ich hier auch anstelle von Film setzen , kann ich Parameter setzen, der Typ ist. Also, auf diese Weise, meine API-URL, die ursprüngliche, wie Sie sehen, haben Sie Schrägstrich Suche und dann den Typ, der Film oder ein TV sein würde. Und dann übergebe ich die Parameter, den Schrittzähler, diesen API-Schlüssel, wie wir gesehen haben, der diesen hat. Und auch die Abfrage, die der Benutzer eingegeben hat, um einen Film oder TV zu finden. Und dann wird es diese Daten als Ergebnis zurückgeben. Mal sehen, dass Teiche in der API sind, wie es aussehen wird. Wie Sie sehen, haben wir hier eine Seite und auch Ergebnisse und die Gesamtergebnisse. Auf diese Weise haben Sie auch hier einige Ergebnisse. Also werden wir es unsere Antwortpunktdaten setzen, weil dies von Axiomen kommt. Es kehrt für andere Daten zurück. Und dann kann ich auf diese Ergebnisse zugreifen, hinzufügen, dann wird es mit der API wie folgt zurückgegeben. Also werden wir dasselbe haben, Film, Diethyl-Bolster, Video und alle anderen Informationen, die wir hier bekommen. Also jetzt ist unser Service bereit. In der nächsten Vorlesung werden wir den Suchbildschirm erstellen, und wir werden diesen Dienst verwenden, um Filme anzuzeigen, die wir in der Datenbank gefunden haben. 56. Movie suchen: Okay, Nachdem unser Service bereit ist, können wir jetzt den Bildschirm erstellen. Also gehe ich zu Bildschirmen, erstelle einen neuen Bildschirm. Ich nenne es „Suchen“. Und in dieser Suche werden wir unser Formular platzieren , wo der Benutzer nach Komponenten oder Filmen suchen kann. Also werde ich hier zustandslose Komponenten verwenden, die wie zuvor zurückgegeben wurden. So wird es Search genannt. Und mit der Suche werden wir auch zurückkehren, wie einige Navigation in Parametern. So werden Sie hier Navigation haben. Und auch werden wir eine Vorlage zurückgeben, und diese Vorlage wird sich innerhalb des sicheren Bereichs befinden. Also zuerst müssen wir React importieren. Also werde ich hier sagen, IMR Import React für mich. Ich werde hier schaffen wir Fragment handeln. Also werde ich hier so etwas wie React Punktfragment haben, und dann wird es darin sein, unsere sichere Bereichsansicht. So können wir hier speichern Bereichsansicht haben. Aber ich möchte erwähnen, dass Sie einen von Ihnen retten, es ist besser, es von React Native zu bekommen, dass von React Native Safe Area Kontext. So können Sie diese Komponente von React Native erhalten , die nicht wie einige Konflikte in den Fehlern haben. Also hier haben wir jetzt wie sichere Bereichsansicht, können wir wie eine Ansicht erstellen, genau wie für ein Beispiel. Und in dieser Ansicht können wir eine Textkomponente setzen , wo wir sehen werden, wie einige Änderungen passieren, gerne sicher sein, dass unsere Komponente gut funktioniert. Lassen Sie uns nun die Ansicht und auch die Textkomponenten importieren. Also werde ich hier gehen, um alle von ihnen zu importieren. Also, jetzt müssen wir zu diesem Bildschirm navigieren. Wenn Sie sich erinnern, wenn wir auf diese Komponente oder diese Schaltfläche klicken, konnten wir zu etwas namens Bildschirm navigieren. Also, was ich tun muss, um zur Hauptnavigation zu gehen und einen neuen Stack-Bildschirm zu erstellen. So wie wir es mit dem Haus oder im Detail gemacht haben, können wir einen von ihnen kopieren. Und dann können wir einen neuen Stack-Bildschirm hinzufügen. Und dieser neue Bildschirm wird einen Namen haben, wird Welle sein. Und wie ich Ihnen gesagt habe, müssen Sie vorsichtig mit den Namen sein. Also hier werden wir als auch Überspannungskomponente haben, also müssen wir es auch importieren. Wie Sie hier sehen, wird es automatisch importiert und es wird die gleichen Eigenschaften haben, wie es navbar hat, und es wird auch einige Navigations- und Navigationseingaben haben. Also, jetzt lasst uns das speichern und versuchen. Okay, wir klicken auf die Schaltfläche Suchen. Okay, wir gingen zum Suchbildschirm und es ist jetzt leer. Und es hat hier einen Anstieg. 57. Suchformular: Okay, also funktioniert unser Bildschirm gut, jetzt haben wir keine Probleme. Wir müssen nur jetzt ein Formular erstellen, in dem der Benutzer Text eingeben kann, um nach einem Film zu suchen. Dafür verwende ich eine Komponente, die verwendet wird und die native Bibliothek React. Und diese native React Bibliothek hat eine Komponente namens Texteingabe. Und diese Eingabe können Sie wie einen besonderen Stil darauf haben, auf Jane, das nächste Ereignis, und auch einen Wert mögen. Also am Anfang und es ist auch diese Komponenten importieren, so dass wir diesen Teil hier kopieren und zu unserer Anwendung gehen und den Text hier mit dieser Komponente ersetzen können. Und auch, wir werden hier, dass Texteingabe von React Native importiert. Ich benutze u. Wir brauchen auch ein paar Stylings. Also müssen wir auch die Eingabe steinigen. Also müssen wir dieses Wählblatt haben, wie wir schon oft gesehen haben. Also müssen wir nur eine Konstante haben und wir können diese Konstante als Stylesheet definieren und sie in unseren Komponenten verwenden. Also müssen wir dieses Stylesheet auch aus React Native importieren. Aber wie Sie hier sehen, gibt es einige Ereignisse, also verwendet er dieses Datum dafür. Also lasst uns gehen und dieses Datum dafür verwenden. Also werde ich sagen, dass ich einen konstanten Text und onChange-Text habe, und dann werden diese laufenden Einsätze in den Zustand zurückgegeben. Also werde ich hier wie auch einige auch Konstante haben und dann würde ich sagen, verwenden Sie Zustand. Und dieses Verwendungsdatum wird von React Native importiert werden. Und wir können auch einen Standardwert geben, wie er es hier getan hat. So können wir geben, wie weniger Text wie so etwas verwenden oder wir können sagen, Überspannungsfilm. Dies ist also wie eine grundlegende Information, wo wir für unsere Input zur Verfügung stellen können. Und wie Sie hier sehen, haben wir den Import bereits, damit wir damit arbeiten können. Also müssen wir nur die Ansicht ein bisschen schieben wie auch. Wie hier haben wir den Pfeil. Es ist völlig oben und es überlappt sich mit der Eingabe. So können wir es ein wenig hinlegen, damit wir für diesen Missbrauch auch etwas Styling geben können . Und ich würde es genau so nennen, wie wir es vorher gemacht haben. Und wir werden ihm einen Namen geben, der als Container bezeichnet wird. Und dieser Behälter, ich werde das Styling hier setzen. So wird es genau das gleiche sein. So können wir es wie ein Banding oben von oben geben , um nicht den Konflikt zu haben, den ich erwähnte. Also haben wir, sorry, hey, Apple legte die Spalte, also werde ich hier Polsterung oben und schlechte Ei Dopa wird wie etwa 100 Pixel sein. Wir können sagen, lasst uns das versuchen, okay, 100 ist zu viel. Sagen wir es 60. Also 60. Okay, wir haben nach Film gesucht. Also, und dann kann der Benutzer etwas Text hineinlegen. Und auch müssen wir einige Informationen wie Flex-Richtung, Flare, Zentrum, Rechtfertigung von Inhalten setzen . Wir werden sehen, dass später, wenn wir die Submit-Button als auch haben. Aber lassen Sie uns etwas Styling für diesen Input geben, der zu unserem Design passt. Also würde ich zuerst wie etwas geben, wir können Grenzradius sagen. Wir können so etwas wie 15 haben. Und wir können auch Randbreite geben, etwas schnell, geben Sie es wie 0,5. Also können wir hier bei 0,5 haben, wir können dafür nicht so gut etwas Höhe geben. Und wir können eine feste Höhe setzen oder Sie können eine gewisse Höhe mit Prozentsatz und Abmessungen vom Bildschirm machen . So können wir nicht wie für jetzt, feste Höhe geben , weil es sowieso nicht beeinflusst, wenn Sie verschiedene mobile Größen haben. Also werden wir es wie zum Beispiel 50 geben. Und auch wir werden wie ein Padding haben, um den Inhalt innerhalb des Like zu schieben , um hier oder genau an den Grenzen der Eingabe nicht fixiert zu werden. Wir können es so etwas wie acht Pixel zum Auffüllen geben. Und auch können wir einige Färbung für die Grenze und auch einige Hintergrund geben , wie Sie wollen oder wie Sie wollen, um es zu stylen. Wie Sie sehen, haben wir diese Eingabe, wir können dies von Polsterung oben ändern, um nur Batting zu sein. So 60 ist zu viel, so dass wir es als Polsterung halten können. Aber wir können hier zuerst Polsterung setzen. Und Polsterung wird 10. Und dann legen wir Polsterung oben, und dann überlappt sich die Polsterung über diese Polsterung. Also werden wir Polsterung Top 60 haben, und von anderen Seiten wären 10, 10, und von unten wird es genau so sein, wie wir es mit HTML und CSS machen. Sie können hinzufügen, werden einige andere Eigenschaften hinzufügen, die Sie in der Dokumentation sehen können. Es gibt viele Eigenschaften für diese Eingabe. Einer von ihnen wie etwas Platzhalter genannt, ein Standardwert, editierbar oder nicht wichtig für Autofill viele Dinge. So können wir auch etwas hinzufügen, das Platzhalter genannt werden kann. Also kann ich hier eine Eigenschaft namens Platzhalter setzen. Und im Platzhalter können Sie einen Standardtext definieren. Also kann ich hier sagen, suchen Sie nach einem Film oder TV, wie diesem, Surge Film oder TV-Show. Auf diese Weise werden wir Platzhalter haben und wenn Sie den Standardstatus entfernen, wie wenn wir einen undefinierten Wert haben, dann werden wir diesen Platzhalter wie folgt haben. So können Sie in der Lage sein, direkt zu tippen. So wird der Platzhalter angezeigt, wenn nichts in der Eingabe ist. Um das Ergebnis einzureichen, brauchen wir auch einen Knopf hier, wie für den Benutzer, dass er den Wert einreichen kann , den er eingegeben hat und dann die Ergebnisse der Filme bekommt. In diesem Fall können wir das alles so gut halten und diese Eingabe in dich setzen. Also werde ich wieder eine andere Ansicht geben und vielleicht können wir ihm einen Namen wie Form geben. Und diese Form wird für mich diese Texteingabe halten. Ich werde es wieder so schließen. Und dann hier, diese Ansicht, werde ich eine andere Komponente setzen, die berührbare Deckkraft sein wird, genau wie wir mit dem Suchsymbol hier in der Navigationsleiste gemacht haben. Also werde ich auch diese berührbare Deckkraft setzen, so etwas wie dieses. Und auf der Presse nicht, wir werden nicht eine navigieren, aber wir werden etwas anderes haben, damit wir es für jetzt leer halten können und wir können so gut wie Symbol haben. Also müssen wir mehrere Dinge importieren. Einer von ihnen ist berührbare Deckkraft, die wir von React Native haben. Und auch müssen wir das Symbol und das Symbol importieren, wir können es genau das gleiche Symbol importieren, das wir in der Navigationsleiste verwendet haben. Also werde ich es auch hier setzen. Also lasst uns alles retten und dann werden wir sehen, dass, okay, das Symbol kommt hierher. Also müssen wir das Symbol irgendwie ändern, um in der Nähe dieser Komponente zu sein. Also lassen Sie uns die Farbe auf diesem Symbol entfernen, um es klarer zu sehen. Okay, jetzt ist es schwarz. Also müssen wir wie ein Styling für diesen Container setzen um die Ansicht des Formulars und der Schaltfläche nahe beieinander zu halten. Also zuerst werde ich zum Styling des Behälters gehen und ihm einige Eigenschaften geben. Eine dieser Eigenschaften wird die Flexrichtung sein , wenn Sie daran denken, sie nahe beieinander zu setzen. Also werde ich hier sagen, Flex-Richtung wird Rho sein. Auf diese Weise werden sie nahe beieinander sein, aber jetzt sind sie AGI. So können wir auch die Elemente auf der gleichen Ebene zusammen ausrichten. So werden sie in der Mitte ausgerichtet sein. Also müssen wir irgendwie diese Eingabe mehr hier und den Suchknopf auf dieser Seite setzen. Also die Ansicht dieser Form, kann ich es wie einige spezielle Eigenschaften geben, zum Beispiel, die in der Lage sein können und uns helfen, einige Abstände für diese Eingabe zu machen. Also zuerst werde ich hierher gehen und ein Formular geben, die Formklasse, die ich oben definiert habe, wenn Sie sich erinnern. Und eine dieser Eigenschaften wird eine Flex-Basis sein Auto. Und auch wir brauchen eine andere Perpetuity heißt Flex ein Mädchen. Und dieses Flex wachsen wird eins sein. Und wir müssen auch so etwas haben, wie Sie hier sehen, Polsterung, richtig? So können wir schieben, das Lehrbuch ist ein wenig weg von der Eingabe. So können wir etwas Padding richtig setzen, wo es wie etwa acht Pixel sein kann. Auf diese Weise sind sie nahe einander ausgerichtet. Und auch sie haben wie, wie der Knopf ist hier. So, wie Sie Flex-Basis sehen, heißt es Auto. Es gibt wie der Flex dynamisch dieser Form zu sein und den Rest des Raumes von mit diesem Artikel zu erhalten ist Buchung. Zum Beispiel ist diese berührbare Deckkraft nur Buchung, sagen wir fünf oder 10 Pixel. Aber hier wird diese Eingabe den Rest nehmen. Also, indem wir sagen, Flex Basis Auto und Flex wachsen eins. Es bedeutet also, dass den Rest des Raumes nehmen und es auf diese Weise ausrichten. Und wir geben Batting Recht, diese Eingabe nicht auf die berührbare Deckkraft haften lassen. Also das letzte, was wir tun müssen, wie etwas auf Einreichung. Also für diesen Knopf, so berührbare Opazität, die er beim Drücken hat, und wir müssen das onsubmit dafür behandeln. So werden wir eine Methode haben, die aufgerufen werden kann und den Wert der Eingabe einreichen, die in der Eingabe eingegeben wird. Und dafür onsubmit, wie schnell und machen Sie es wie Großbuchstaben auf Submit. Ich kann es oben definieren. So können wir wie Ergebnisse haben und die Daten werden immer eine aufgelöste und ruft unseren Service. Auf diese Weise werde ich eine andere Konstante definieren, die onsubmit aufgerufen werden kann und die wie eine Funktion sein wird. Und diese Funktion wird für mich etwas zurückgeben, wie den Dienst aufzurufen, den wir zuvor erstellt haben. Also für jetzt gehe ich zu console.log den Wert, den ich von der Suche erhalten möchte. Also möchte ich, dass der Benutzer einen Abfrageparameter setzt. Also möchte ich, dass der Benutzer eine Abfrage setzt und ich diese Abfrage erhalte und ich gebe sie durch den Dienst, wie wir zuvor gesagt haben. So können wir dies als eine Abfrage nennen. Also, jetzt werde ich diese Abfrage auch konsolenprotokollieren. Aber hier haben wir nichts, wir haben keine Abfrage bestanden. Auf diese Weise werde ich diesen Text verwenden. Dieser Text ändert sich also basierend auf dem Änderungstext oder dem Benutzer hier. So können wir diesen Text nehmen und ihn auch an unsere onsubmit Methode übergeben. Also lasst uns das retten. Und wir können unser Terminal öffnen, um das Konsolenprotokoll zu sehen. Also lass es uns ein bisschen größer machen. Und ich werde etwas Wert setzen, wie wir hier sagen können, Film. Und dann klicke ich auf „Senden“. Wie du siehst, habe ich den Film, so einen Film. Ok? Suchen Sie zum Beispiel, wie ein neuer Film, so etwas. Und ich bekomme das Ergebnis auf Submit. Also jetzt werde ich ihre Dienste nutzen, um die Daten zu greifen und anzuzeigen, dass hier genau die gleiche Kartenkomponente schützt , die wir auf der Homepage und anderen Seiten verwendet haben. Auf diese Weise werden wir sehen, wie wir den Dienst in der nächsten Vorlesung anrufen werden . 58. Suchergebnisse: Okay, jetzt in dieser Vorlesung werden wir eine Vorlage für die Anzeige der Ergebnisse der Suche erstellen. Aber zuerst müssen wir den Dienst anrufen, der dafür verantwortlich ist, uns die Suchergebnisse zu liefern. Folgen Sie also, dass, wenn Sie sich erinnern, wir haben einen Dienst erstellt, der Search Film oder ein TV genannt wird. Und es fragt nach zwei Parametern, bei denen es sich um eine Abfrage und einen Typ handelt. Also werde ich das auch hier genannt setzen. Also, wenn es onsubmit gibt, werde ich diesen Service anrufen. Also werden wir so etwas wie Suchfilm dV haben, die ich von Diensten importieren werde. Also werde ich hier Import setzen und dann werde ich den Namen des Dienstes und dann Unterarm setzen. Und dann werden wir wie Dienste stellen. Und wir würden Dienste auf diese Weise nennen. Also, jetzt haben wir den Überspannungsfilm TV. Also, dieser Überspannungsfilm TV wird mich bitten, zwei Parameter zu haben. Zuerst wird die Abfrage sein, und die zweite wird Film oder TV sein. Also lassen Sie uns zum Beispiel sagen, Film wie jetzt. Also, was wir hier haben, Film oder es hängt von der API ab, wie wir es benutzt haben. Also sagte es, ja, okay, Film und Fernsehen, also werden wir den Film übergeben. Also, jetzt wird das für mich ein Versprechen zurückkehren, wie wir es zuvor gesehen haben. Also werde ich Sie dann sehen und danach werden wir die Ergebnisse haben. Also werden wir wie diese als eine Welle nennen, oder wir können es wie eine Daten nennen. Dies sind die Suchdaten und diese Daten werden wir etwas damit zu tun. Und wenn Sie sich daran erinnern, dass wir eine andere Zustandsvariable erstellt haben. Und diese Zustandsvariable, wir haben es in der Vorlage verwendet. Also werde ich sagen, hier können wir wie Suchergebnis und diese Welle oder Ergebnisse geben, lassen Sie uns es so machen und dann die Suchergebnisse einstellen, so dass wir auch hier die Stoßergebnisse haben können. Auf diese Weise werden wir all diese Entzündung in diesem Suchergebnis speichern. Also können wir hier nicht das Suchergebnis auf Daten setzen. Auf diese Weise werden wir die Ergebnisse oder das Array haben, die von der API zurückgegeben wurden , wobei die Filme zurückgesetzt oder in den Suchergebnissen eingestellt wurden. Also hier werde ich eine Vorlage verwenden, die aus den Suchergebnissen kommt. Weil wir mehrere Male darüber gesprochen haben und ich Ihnen gesagt habe, dass wir mehrere Möglichkeiten haben, alle diese Vorlagen zu arrangieren. Wir haben darüber gesprochen, wie wenn es geladen ist, wenn es nicht geladen ist und wenn es Fehler gibt, werde ich die Vorlage einfügen, die ich bereits vorbereitet habe. Erklären Sie nicht, und ich werde Ihnen den Code zur Verfügung stellen. Also habe ich diese Vorlage erstellt. Diese Vorlage wird eine Ansicht haben. Es wird innerhalb der scrollbaren, scrollbaren Ansicht sein. Also haben wir hier eine Ansicht, die Container genannt wird. Und dieser Behälter wird die Form und auch diese berührbare Deckkraft halten. Und dann werden wir eine andere Ansicht haben, wo wir die Ergebnisse des Suchelements haben werden. Also habe ich hier erstellt ist u, wenn Sie sich an etwas erinnern, das Suchergebnis genannt wird. Also überprüfe ich hier. Wenn es Suchergebnisse gibt und die Punktlänge der Suchergebnisse größer als 0 ist, muss ich eine flache Liste mit ihren Karten anzeigen. Wenn Sie sich erinnern, haben wir dies bereits mehrfach getan, als wir das taten. Wachen auf der Homepage hier. Also müssen Sie sich um diesen Punkt keine Sorgen machen. Nur eine Option, die ich extra habe, Es heißt num Spalten, die so ist, als ob ich zeige, wie viele Spalten in dieser Zeile. So zum Beispiel, im Suchergebnis, werde ich drei Spalten Barrel haben. Also werde ich sie nicht so scrollbar haben. Ich werde nur drei im Handy fixiert haben und sie sind, als ob ich durch sie gehen kann. So haben Sie auch diese Dateneigenschaft und Renderelement. Ich möchte sie als Wächter machen. Ich werde sie nicht als irgendetwas anderes rendern. Und die Guard-Komponente, die wir zuvor erstellt haben, wenn Sie daran denken, es auch auf der Homepage zu verwenden, haben wir so etwas wie Schlüsselextraktor. Es wird sich wie eine Beschleunigung für unsere Suche machen. Es geht also und es hängt mit etwas wie Gushing zusammen. So können Sie den Extraktor verwenden und Sie können angeben, was der Schlüssel ist. Es wird also die Item-ID oder die Film-ID sein, die aus den Suchergebnissen zurückgegeben wird. Und auch wenn es bestimmte Ergebnisse gibt, aber die Länge 0 ist, dann bedeutet das, dass wir keine Werte oder Ergebnisse haben, die unseren Kriterien entsprechen. So können wir verschiedene Keywords ausprobieren. Und auch wenn es überhaupt keine Suchergebnisse gibt, was der Anfangszustand unserer Suche ist, würde ich sagen, etwas eingeben, um mit der Suche zu beginnen. Danach haben wir eine Komponente, die als Fehler bezeichnet wird. Und für den Fall, dass es einen Fehler gibt, dann werde ich die Fehlerkomponente zeigen, die wir zuvor erstellt haben. Also hier haben wir wie ein Fehler standardmäßig sagen, etwas ist schief gelaufen, usw. So ist dies eine Vorlage. Über all das haben wir schon einmal gesprochen. Ich mache nur ein paar verschiedene EFS, einige Kommentare für Sie nicht haben, wie jeder Fehler oder irren. Alle von ihnen sind im sicheren Bereich von u. Okay, Lassen Sie uns zur Suche gehen und ich werde meine Ergebnisse speichern. Schön. Wir haben hier etwas eingeben, um mit der Suche zu beginnen. Also werde ich wie zum Beispiel tippen, Neu. Und ich werde auf Search Taste drücken. Schön, ich habe direkt, das ist Alts. Also haben wir hier etwas und Sie messen und groovy, et cetera. Wenn ich also auf einen dieser Filme klicke, wie Sie hier sehen, gehe ich zum Detail des Films. So kann ich auch bekommen, dass das Detail Köder tun, weil ich die Karte, dass Gott berührbare Deckkraft hat, die wir erstellt haben. Und wenn Sie darauf klicken, navigieren Sie zum Detail. Das ist sehr großartig. Und diese Hölle, wir sehen, dass wir die Dynamik von React verwenden, die native der Erstellung von Komponenten. Okay, Nett. Also werde ich jemanden alt machen, was nicht gefunden wird. Okay, niemand ist alt, passend zu deiner Gegend. Versuchen Sie, unsere verschiedenen Keywords zu finden. Also, wenn wir alles entfernen und wie Suche setzen, okay, Dies wird nicht antworten, weil wir keine Ergebnisse senden und wir keine Ergebnisse haben. Also jetzt haben wir unsere, unsere Vorlage bereit mit den Filmen und den Wachen. Es gibt nur kleine Sache, die hier sind die Wachen sind sehr nah beieinander. So können wir zu ihrer Garde Rand unten geben. Also können wir zu dieser Wachkomponente gehen. Und wenn Sie sich daran erinnern, dass Guard Komponente etwas namens Container hat, was die berührbare Deckkraft sein wird. Und im Container können wir ihm einen Wert oder einen Rand Button geben. Also können wir hier nicht sagen margin-bottom, wir geben es wie fünf. Auf diese Weise wird es weit voneinander entfernt sein. Wir können es mehr geben, zum Beispiel, acht, um deutlicher zu sein. So haben wir jetzt wieder unsere API läuft. Alles ist in Ordnung. Auf diese Weise haben wir die Suchvorlage. Nichts kannst du auch nichts erschaffen, oder? Genau so? Ich habe nur eine neue Klasse hier, die Surge Items genannt wird. Ich gab Padding etwa fünf, wo es den Container von Suchelementen halten wird, nur um den Inhalt ein wenig weit vom Inhalt entfernt zu schieben. Also können wir nichts Neues haben. Und dann wird es nach mir suchen, um nicht an den Grenzen der Form zu bleiben. Das war's also. Dies sind die Suchelemente. Ich werde ihren Code in der nächsten Vorlesung anhängen, damit Sie ihn verwenden und herausfinden können , ob es so gibt, als ob es mit Ihrem Code übereinstimmt. Und Sie können problemlos ohne Probleme und ohne Probleme daran arbeiten. 59. Filme und Merging verschmieren: Okay, Wie Sie sich erinnern, haben wir Suche Film TV erstellt und wir nur für die Filme verwendet. Also, wenn wir mehrere verwenden wollen, wie wir brauchen, um mu's für Film und Fernsehen. Wie können wir das machen? Wenn Sie sich erinnern, haben wir etwas benutzt, das alle versprochen genannt wird. So ist es möglich, für mich mehrere Versprechungen zu heiraten. Also können wir das hier nicht auch tun. Also werde ich hier sagen, Versprechen Punkt, und dann Alle. Und dann kann ich hier zwei verschmolzen haben. Und dann kann ich hier Dienste haben, zusammen heiraten. Also zuerst, es wird die Suche Film TV, aber für Film und die andere mit kann wie für Suche Film TV aber für den TV sein. Also in diesem Fall rufe ich den Service 2 mal für den Fernseher und Film an. Und dann kann ich die Ergebnisse irgendwie zusammenführen, denn hier werden die Ergebnisse für mich als Array von zwei Elementen kommen, wenn Sie sich erinnern, einer ist Filme und einer ist die Visuals. Also kann ich hier nicht wie okay sagen, ich werde hier Filme als erstes Ziel bekommen, weil ich nach Film gesucht habe und auch ich hier komme dv. Also auf diese Weise, ich werde zwei Elemente bekommen, sind zwei Mitglieder hier. Auf diese Weise haben wir ein Array, so dass wir alle in Klammern setzen können , um keinen Fehler zu haben. Und dann können wir zu diesen Daten kommen, die wir hier haben, und sie zusammenführen. So können wir Filme und TV miteinander verschmelzen. Also, wie wir das einfach für das Zusammenführen tun können, ist ziemlich einfach. Wir können nur Daten machen. Wir können eine Konstante definieren, die Daten genannt wird. Und diese Daten werden wie Array halten, indem Operatoren verwendet werden, wie Spread-Operatoren. Also werde ich Filme zusammen haben und auch die Fernseher. Auf diese Weise verschmelze ich zwei Arrays zusammen, um in einem Array zu sein. Also in diesem Fall, wenn ich speichere, werde ich die Ergebnisse von diesem Versprechen Punkt alle bekommen. Und dann verschmelze ich sie in einem Array. Also lasst uns den Code ein wenig stylen. Schön. Wir sind jetzt zwei Mal in Dienst gegangen und dann werden wir diese Daten zusammenführen und sie dann zu ihren Suchergebnissen senden. Also in diesem Fall werde ich hier nach etwas suchen. Ich werde dich hineinlegen. Und dann werde ich die Ergebnisse zwischen dem Fernseher und auch den Filmen vermischt bekommen. Und normalerweise wird der Fernseher am Ende sein, weil wir hier gesagt haben, dass wir das Fernsehen nach den Filmen zeigen wollen. 60. App: Aus dem Titel dieser Vorlesung, wissen Sie vielleicht, was ich meine? Ich meine, dass wir einige Farben für unsere Anwendung hinzufügen können , ohne diese hartcodierten Farben zu haben, die wir zuvor in navbar und anderen Komponenten erstellt haben, wir haben sie sorgfältig mit einigen Variablen platziert, wo ich Lage sein werde Ändern Sie das Thema meiner Anwendung. Auf diese Weise kann ich eine externe Variable haben und kann ich daraus lesen? Und dann habe ich mein Thema basierend auf so etwas wie auf diesen Farben konfiguriert. Also zuerst können wir zu den Anwendungsdateien gehen und eine Datei erstellen, die Theme genannt wird. So können wir Ordner auf der Root-Ebene erstellen. Also werde ich hier sagen, wie Thema oder Themen, können wir sagen. Und in diesem Theme-Ordner kann ich auch etwas hinzufügen, das Farben genannt wird. Also in diesen Farben dot JS, ich werde meine Anwendung Farben aus dieser Datei lesen lassen. Auf diese Weise kann ich auch eine Konstante schaffen. Und diese Konstante, kann ich ihm einen Namen wie Farben geben. Also können wir hier sagen const. Und in diesem Kurs können wir nicht sagen, dass es Farben sind und diese Farben ein Objekt sein werden. Und ich kann in diesem Objekt sagen, dass ich die Farben definieren werde, die ich für meine Anwendung brauche. Also diese Farben, Ich habe sie schon erstellt. Wie natürlich können Sie Ihre Farben erstellen, wie Sie wollen. Also erstelle ich so etwas wie wir sagen können, ich habe zum Beispiel Hintergrund , der wie dieser sein wird, schwarz, weiß, hellgrau, primäre Farbe auch, was dieses Blau sein wird, das wir für den Play-Button haben. So können Sie auch Theming für Ihre Anwendung so hinzufügen , dass es sich von Kunde zu Kunde unterscheiden kann. Danach ist es besser, Großbuchstaben für Exporte zu geben. Und dann können wir Standard exportieren, wie wir Exportstandard sagen können, und wir sagen Farben. Auf diese Weise können wir es irgendwo in unserer Anwendung importieren. Also danach werde ich zu meinem Beispiel gehen, wo wir waren, wir waren genug Bar in Bar. Ich habe zum Beispiel ein Problem mit der Farbe, dass es hart codiert ist. Ich habe es durch eine weiße Farbe ersetzt. Also werde ich hier gehen und ich werde hier Import haben, und dann werde ich wie zum Beispiel Farben bekommen. Und diese Farben kommen von Theme Colors, wie wir zuvor gesehen haben. Also jetzt werde ich gehen und diese Farben genau verwenden, um meine Farben darin zu setzen. Also werde ich hier statt Farbe FFF haben, werde ich sagen Farben Punktweiß zum Beispiel. Also auf diese Weise, meine Anwendung, wo NDR auf dem richtigen Weg, die ich haben werde, wird die Navigation Farbe sein. So, wie Sie hier sehen. Also, jetzt werden wir alle diese Farben, zum Beispiel, für diese Navigation irgendwo hier setzen. Und natürlich können wir es nicht für alle hartcodierten Farben verkaufen und sie in unserer Anwendung platzieren. Zum Beispiel würde ich auf die Schaltfläche Play gehen und dann werde ich hier sagen, dass ich hier nicht will, auch Farbe, also muss ich auch die Farben importieren. Also werde ich hier Farben importieren, Thema aus Farben. So können wir auch die gleiche genau haben, wie wir es vorher gemacht haben. Auf diese Weise habe ich hier, dass die Farben weiß gefärbt werden und auch die Farbe des Knopfes. Wenn du dich daran erinnerst, haben wir hier eine Farbe hart codiert. So können wir es auch mit einigen Farben platzieren, wie eine Primärfarbe. So können wir etwas haben, das Primär genannt wird. Und auf diese Weise wird meine Anwendung eine Primärfarbe dieser Farbe haben. So kann ich die Primärfarbe überall in meiner Anwendung verwenden. Also jetzt werde ich wie hier gehen, zwei Farben werde ich ändern, zum Beispiel, zu diesem können wir ein 000 machen. Und in diesem Fall ändern sich alle verwendeten Farben dieser Farbe in der Anwendung. Auf diese Weise können Sie Ihre Anwendung auf eine richtige Weise gestalten, ohne ein Triple zu haben, wie Sie unsere Farbe überall ändern müssen, um die gleiche zu sein. Also werde ich diese hartcodierte Farbe nicht verwenden. Ich werde nur verwenden, wie Farben nicht primär sind. Auf diese Weise müssen Sie diese Farben nur ändern, falls Sie die Anwendung einem anderen Kunden liefern möchten? Aber Sie möchten irgendwo im Layout und in den Farben ändern. Am Ende dieses Abschnitts werden Sie also nicht wie der Code mit hartcodierten Farben sehen. Wir werden es wie mit dem Thema haben, aber nehmen Sie nicht den Verkauf so lange in der Vorlesung. Also werde ich es schnell machen und den Code für Sie in der Anwendung oder die Ressourcen dieser Vorträge anhängen . 61. Styling-Fehler: Okay, wir sind jetzt in einer Vorlesung, wo wir das Styling reparieren werden. Also das Styling, wie Sie hier sehen, haben wir einige Bugs. So zum Beispiel, hier, der Titel tickt zu viel auf das Telefon. Also lassen Sie uns das beheben und tun, wie eine einfache Arbeit für diesen Vortrag. Also, jetzt werde ich müssen, sie sind bei, in ihrer wenigsten haben wir diesen Text und diesen Text, er hat etwas Styling, so dass wir es auch geben können, einige Watte herum. Damit wir etwas Platz haben können. Also können wir nicht so etwas wie Watte im Allgemeinen oder schlecht in dieser haben. Und wir geben ein paar Leerzeichen. Also auf diese Weise müssen wir es vor zu bewegen weil dann durch Hinzufügen von Schaltfläche wäre alles boride es sein. Also werde ich hier wie dann sagen, und versuchen wir es, um zu sehen, ob es gut funktioniert. Okay, es ist gut. Ich schätze. Jetzt haben wir wie besser das und wir können an ihm ein wenig den Schlagknopf reduzieren, so dass wir es 15 setzen können. Okay, ich denke, jetzt ist es schön. Okay, jetzt überprüfen wir, ob wir noch weitere Styling-Bugs haben. Also können wir hierher gehen und hier die Augen sehen. Wir haben nichts. Wir haben in der Navigation oder wenn wir zu der Suche gehen, die wir hier haben, ist die Färbung dieses Symbols nicht so sehr klar, also ist es breit. Wir können es wie eine mittlere Farbe ausdrücken, die zum Beispiel hellgrau sein kann. Also alles, was wir zur Anwendung oder zur Navigationsleiste gehen können. Und in der Navigationsleiste verwenden wir dieses Symbol. Also haben wir hier Geschwätz von zurück. Also hier setzen wir ein hellgrau wie dieses. Also können wir das als dunklere Farbe machen, zum Beispiel, Sie können es drei Cs setzen, okay, nett. Es ist jetzt besser so. Und auch wenn wir zu einer detaillierten Seite gehen, okay, wir können sie immer noch sehen. Ok. Ja, es ist gut. Ok. Andere Styling-Fixes, wir haben keine anderen Abstellgleis Fixes. Alles ist in Ordnung. Unsere Anwendung funktioniert reibungslos und problemlos ohne Probleme. Und wenn Sie einen Fehler finden, wäre es toll, es an die Q und a und Fragen zu melden. Wir können es direkt beheben, und ich würde mich sehr freuen, all diese Fehler zu beheben.