Wie Sie wissen, wird diese React Native-Anwendung jetzt mithilfe von expo erstellt. Wie ich zu Beginn des
Kurses erwähnt habe, handelt es sich immer noch um eine reguläre React Native-Anwendung.
Daher ist Expo nur ein zusätzlicher Wrapper, der viele praktische Funktionen bietet, die das Erstellen
dieser App vereinfachen
und wie eine Shell aussehen. Eine App, in der unsere App ausgeführt wird, wodurch das Aufrufen
vieler nativer Gerätefunktionen einfacher und insbesondere einfacher einzurichten ist.
Wie ich bereits zu Beginn dieses Moduls erwähnt habe, werde ich Ihnen in einem separaten Modul zeigen,
wie Sie Nicht-Expo-Apps native Gerätefunktionen hinzufügen können. Wenn Sie jedoch
keinen Grund haben, Expo nicht zu verwenden, würde ich dies tun Es wird dringend empfohlen, es
zu verwenden, da expo, wenn Sie die Dokumente überprüfen, viele integrierte Funktionen und viele integrierte native Module enthält, die Sie verwenden können, sodass
native Gerätefunktionen einfach
hinzugefügt werden können und eine
vollständige Liste angezeigt wird Hier gehen Sie zu den Dokumenten und dort zur API-Referenz.
Hier sehen Sie eine Reihe von Dingen, die Sie zu Ihrer App hinzufügen können. Hierbei
handelt es sich hauptsächlich um native Gerätefunktionen, die
alle von expo standardmäßig bereitgestellt werden. Sie müssen also noch etwas installieren, müssen
jedoch kein Handbuch erstellen Konfiguration und wie Sie beim Erstellen einer App ohne Expo-Modul sehen werden, müssen
Sie möglicherweise einige Konfigurationen vornehmen, wenn Sie einer Nicht-Expo-App native Module und native Gerätefunktionspakete hinzufügen. Das
ist also wirklich süß Hier.
Jetzt möchte ich eine Kamera verwenden und tatsächlich gibt es ein Kamerapaket, das Sie hinzufügen können.
Wir könnten das tatsächlich verwenden, um auf die Gerätekamera zuzugreifen. Dies
ist perfekt,
wenn Sie eine Anwendung erstellen müssen, die wirklich viel mit der Kamera zu tun hat, wenn
Sie wie Instagram erstellen, wie eine Anwendung, bei der Sie die wirklich steuern möchten Der gesamte
Kamerabildschirm und der gesamte Kamerafluss sind eigentlich nicht das, was ich hier machen möchte.
Ich möchte die normale Gerätekamera verwenden, ich
brauche dort nichts Besonderes, ich
kümmere mich nur darum, ein Bild zu bekommen, das der Benutzer
aufnehmen kann, und dafür bekommen wir tatsächlich die Bildauswahl. Dadurch können wir auch die Gerätekamera verwenden, aber
wir können die Kamera nicht so stark anpassen,
aber genau das brauche ich hier.
Jetzt müssen wir nur noch diesen Befehl expo install ausführen, um Zugriff darauf zu erhalten. Dies entspricht im Übrigen der
Installation von npm, stellt jedoch sicher, dass eine Version des Pakets installiert wird, die garantiert mit unserer
spezifischen Version von funktioniert Expo verwenden wir in dieser App. Also kopiere ich einfach diesen Befehl und dann können
wir in diesem Projekt expo install expo image picker ausführen. Drücken Sie die Eingabetaste und dies wird nun dieses Paket mit
npm install hinter den Kulissen installieren. Dies ist, was es hier tut,
nur in einer Version, die zu unserem Expo-SDK passt, das wir in diesem Projekt verwenden, und dies wird
es jetzt installieren und das war's. Es
ist keine zusätzliche Konfiguration erforderlich.
Wir müssen keine Konfigurationsdatei berühren, wir müssen
nichts anderes tun, dies stellt
sicher, dass wir diese Funktionalität nutzen können und das ist
natürlich sehr einfach.
Damit können wir es verwenden und ich möchte es hier auf dem neuen Ortsbildschirm verwenden, wo wir die
Texteingabe richtig haben. Dort möchte
ich jetzt auch eine Schaltfläche hinzufügen, die der Benutzer drücken kann, um die Kamera zu öffnen.
Natürlich haben Sie für all diese nativen Gerätefunktionen und auch für die vielen Funktionen, die wir in diesem
Kurs natürlich nicht behandeln können, immer gelernt, wie Sie sie hier in Ihren offiziellen Expo-Dokumenten verwenden können.
Dort haben Sie gelernt, auf welche Methoden und Eigenschaften Sie zugreifen können Dort finden Sie einige kurze Beispiele für viele
Pakete. Das sollten Sie sich also unbedingt ansehen. Für die Kamera können Sie natürlich auch
mitmachen, da wir sie hier zusammen verwenden, um ein Bild aufzunehmen.
Ich werde tatsächlich eine neue Komponente erstellen, ImageSelector. js, Sie können es beliebig benennen, in
das ich React from React importiere und in das ich eine Ansicht und eine Schaltfläche sowie einen Text aus React Native und
natürlich auch das Stylesheet importiere, weil ich meine Bildauswahl formatieren möchte.
Nennen wir es eigentlich Bildauswahl, das gefällt mir, meine Bildauswahlkomponente.
Hier ist die Bildauswahl dann natürlich eine reguläre Komponente, bei der ich einige
Stile mit dem Stylesheet einrichten möchte. Methode erstellen und wo ich am Ende die Bildauswahlkomponente exportiere.
Was wird nun hier in der Bildauswahlkomponente passieren? Am Ende werde ich hier eine Ansicht
zurückgeben, die dann eine andere Ansicht enthalten sollte, in der ich eine Vorschau des Bildes anzeigen kann.
Dort möchte ich also die Textkomponente haben, in der ich sage, dass noch kein Bild ausgewählt wurde. Dies ist mein
Fallback-Inhalt, wenn noch kein Bild ausgewählt wurde. Andernfalls
wird ein Bild angezeigt, sodass wir
auch die Bildkomponente aus importieren müssen Reagieren Sie auf Native und unter dieser Ansicht füge ich eine
Schaltfläche mit dem Titel "Bild aufnehmen" hinzu, auf der ich die Farbe auf "Farben" setzen möchte. Stellen Sie daher sicher, dass
Sie diese Farben konstant importieren. Beim Drücken möchte ich die
Kamera öffnen und dem Benutzer anzeigen. Also werde ich hier auch eine Konstante hinzufügen, einen Bildhandler nehmen und das ist
eine Funktion, die die Kamera
öffnen sollte und die ich an diese Schaltfläche binden werde.
Jetzt wäre ein bisschen Styling schön. In dieser äußeren Ansicht füge ich einen Stil der Bildauswahl hinzu. In
dieser inneren Ansicht, in der eine Vorschau
meines Bildes angezeigt wird, füge ich einen Stil der Bildvorschau hinzu. Dann könnte dieser Text hier auch gestylt werden, aber ich brauche dort eigentlich keinen
speziellen Stil und natürlich möchte ich auch hier ein Bild ausgeben und ich werde bald eine if / else-Bedingung hinzufügen, um nur entweder den
Text oder das Bild und
dies anzuzeigen sollte auch einen Stil von vielleicht nur Bild bekommen.
Jetzt haben wir drei Stilkennungen, die wir dem Stylesheet
hinzufügen müssen. Wir erhalten die Bildauswahl
für die Gesamtkomponente, die Bildvorschau und dann das Bild selbst.
Das Bild selbst ist einfach, da möchte ich nur eine Breite von 100% und eine Höhe von 100%
einstellen, damit es die volle Breite und Höhe des umgebenden Vorschau-Containers einnimmt.
Dieser Container kann dann natürlich konfiguriert werden, wie auch immer Sie ihn konfigurieren
möchten. Ich gebe ihm eine Breite von 100% und eine Höhe von 200 Pixel, aber natürlich
können Sie dies ändern oder dynamisch mit der Dimensions-API berechnen. Fügen Sie einen Rand am unteren
Rand von 10 hinzu und stellen Sie sicher, dass mein Platzhaltertext tatsächlich zentriert ist,
indem Sie hier das Inhaltszentrum ausrichten und die
Elementmitte ausrichten. Außerdem füge ich hier einen Rand mit der hellgrauen Rahmenfarbe und der Randbreite von hinzu
einer.
Nun, für die Bildauswahlkomponente im Allgemeinen werde ich dies so einstellen, dass die Elementmitte ausgerichtet wird,
um sicherzustellen, dass alle Elemente horizontal zentriert sind. Jetzt
sind wir alle hier, um die Gerätekamera wirklich zu öffnen, oder?
Bevor wir hier etwas anderes in Bezug auf die Vorschau usw. tun,
stellen wir sicher, dass wir hier im Take Image Handler die Kamera tatsächlich öffnen, und importieren wir dafür alles als Bildauswahl aus der Expo-Bildauswahl, also aus
dieser Paket, das Sie gerade installiert haben. Da ich hier und auch für die Komponente die
Bildauswahl verwendet habe, kommt es zu einem Namenskonflikt. Daher werde ich diesen Bildwähler hier benennen,
um diesen Namenskonflikt zu vermeiden, der sonst zu Problemen führen würde. Ändern Sie ihn
auch hier beim Export von Kurs.
Jetzt, da der Bildwähler hier importiert ist, können wir ihn hier
verwenden, den Bildwähler,
und dort können wir die Startkamera als asynchron bezeichnen.
Sie können stattdessen auch die Galerie öffnen,
wenn Sie möchten, aber hier rufe ich die Startkamera asynchron auf.
Dies öffnet nun die Gerätekamera und der asynchrone Teil hier impliziert, dass dies eine asynchrone
Operation ist.
In der Tat gibt dies ein Versprechen zurück, das sinnvoll ist, da es die Kamera öffnet und
wir nicht wissen, wann der Benutzer
mit der Aufnahme des Bildes fertig ist. Daher wird nur eine Funktion registriert, die ausgeführt werden soll, sobald der Benutzer
fertig ist und aufgelöst wird das Versprechen, diese Funktion auszuführen, sobald dies geschieht, wenn der
Benutzer fertig ist oder natürlich auch, wenn der Benutzer abbricht. Wir können das alles und das Ergebnis behandeln und
so weiter. Lassen Sie uns jetzt sehen, ob das funktioniert, und dafür die Bildauswahlkomponente in den neuen Ortsbildschirm aufnehmen.
Dort können wir also die Bildauswahl importieren und hier natürlich diesen Namen
verwenden, da wir hier nicht das Bildauswahlpaket verwenden. Importieren Sie das aus Komponenten, aus der Bildauswahlkomponente
und fügen Sie diese Bildauswahl hier unter unserer Texteingabe hinzu als selbstschließende Komponente wie diese.
Wenn wir das speichern, schauen wir uns das an. Hier, dieser Text und
so weiter, der nicht richtig positioniert ist, darüber müssen wir uns jetzt keine
Gedanken machen. Drücken wir stattdessen auf Bild aufnehmen und Sie werden sehen, dass nichts passiert, aber dann bekomme ich eine
Warnung - fehlende Kamera oder Kamerarolle Erlaubnis. Wenn ich es auf Android versuche, werde ich dort gefragt, ob ich Berechtigungen erteilen möchte. Ich muss hier auf Zulassen drücken und
damit öffnet sich die Kamera. Das ist also gut, es funktioniert im Allgemeinen,
ich kann es
verwenden, ich kann diese Taste drücken und dann das aufgenommene Bild bestätigen, aber
unter iOS funktioniert es nicht und warum ist das so? Nun, unter iOS haben wir hier einen Berechtigungsfehler erhalten,
und
das passiert einfach, weil Berechtigungen wichtig sind, aber unter iOS und Android unterschiedlich funktionieren.
Unter
Android werden Sie Berechtigungen auch im Voraus einrichten. Da wir diese Expo-Anwendung verwenden, in der expo diesen Wrapper bereitstellt, führt expo
tatsächlich alle diese Berechtigungen durch, die für uns eingerichtet und angefordert werden. Für iOS funktioniert das Berechtigungssystem
etwas anders.
Sie richten es nicht wirklich so ein, dass Sie eine Konfigurationsdatei haben, in der Sie alle Berechtigungen im Voraus
definieren,
und das war's, stattdessen müssen Sie zur Laufzeit um Erlaubnis bitten.
Nebenbei bemerkt, in einigen Android-Versionen sollten Sie das jetzt auch tun.
Wie Sie sehen, funktioniert die Ausstellung immer noch für Sie. Für Android funktioniert das also so. Unter iOS
müssen Sie den Benutzer um Erlaubnis bitten, auf die Kamera zugreifen zu dürfen, und das müssen wir einfach
tun hier und wir können es mit Hilfe eines anderen
Expo-Pakets tun und das ist das Berechtigungspaket.
Sie müssen dies auch mit diesem Befehl hier in Ihrem Projekt installieren, damit Sie den Benutzer nach
Berechtigungen fragen können.
Lassen Sie uns dies hier im
Projekt tun. Lassen Sie uns die Expo-Installations-Expo-Berechtigungen ausführen. Dies ist wiederum nur dieser Wrapper um npm install, um die Berechtigungen für dieses
Projekt zu installieren oder dieses Paket für dieses Projekt und dann in der Image-Auswahl zu installieren, bevor wir versuchen, die
zu starten Kamera und Öffnen der Kamera müssen wir um Erlaubnis bitten. Dafür füge ich hier tatsächlich
eine neue Konstante hinzu, erhalte oder überprüfe Berechtigungen und dies ist eine Funktion,
die eine Funktion enthält, die dieses neu hinzugefügte Berechtigungspaket verwendet.
Also importiere ich hier alles als Berechtigungen aus Expo-Berechtigungen, also die gleiche
Art von Import, wie wir sie für
die Bildauswahl haben, und dort können wir Berechtigungen verwenden und asynchron fragen.
Auch dies ist eine asynchrone Aufgabe, die ein Versprechen zurückgibt, da dies eine Eingabeaufforderung öffnet und bevor
der Benutzer eine Antwort ausgewählt hat, nichts
passiert. Daher haben wir ein Versprechen, das aufgelöst oder abgelehnt wird, sobald der Benutzer bestätigt oder abgelehnt hat.
Hier müssen wir also genauer angeben, welche Berechtigung wir benötigen,
also übergeben wir etwas, um asynchron zu fragen, und das ist eine Konstante, die wir vom Berechtigungsobjekt erhalten, das wir hier importieren.
Mit der Punktnotation hier können wir auf verschiedene Arten von Berechtigungen zugreifen. Hier sind alle diese
großgeschriebenen Namen die verschiedenen Berechtigungen, die Sie
anfordern können. Hier benötigen wir die Kameraberechtigung, da wir auf die Kamera zugreifen möchten.
Wenn Sie auf die Galerie zugreifen möchten, ist dies übrigens die Berechtigung für die Kamerarolle.
Jetzt gehe ich hier zur Kamera
und wie gesagt, dies gibt ein Versprechen zurück. Ich möchte Async
Wait hier verwenden, daher kann ich Async hier vor der Funktion hinzufügen und dann darauf warten und das
Ergebnis erhalten
und in einer Konstanten speichern Die Alternative dazu wäre, dann zu verwenden und dies zu
erfassen, und dort können wir jetzt prüfen, ob das Ergebnis vorliegt. Status ist nicht gleich gewährt, was bedeutet, dass der Benutzer abgelehnt
hat, der Benutzer keine Berechtigungen erteilt
hat. In diesem Fall können wir nicht fortfahren.
Hier werde ich dann tatsächlich eine Warnung auslösen, also eine Warnung
aus React Native importieren und eine Warnung auslösen, in der ich Warnung sage. Warnung, unzureichende Berechtigungen, Sie müssen Kamera-App-Berechtigungen erteilen, um diese App oder eine Ausgabe zu verwenden, die Sie anzeigen möchten,
und dann füge ich hier
eine Schaltfläche hinzu, auf der ich OK sage. Jetzt muss der Benutzer die Berechtigungen in den Systemeinstellungen
ändern, nachdem er sie trotzdem abgelehnt hat. Daher können wir hier keine erneuten Berechtigungen anfordern,
sobald sie abgelehnt wurden.
Hier möchte ich also false zurückgeben, da dies die Funktion zum Überprüfen von Berechtigungen ist, und ich möchte false
zurückgeben, wenn der Benutzer uns keine Berechtigungen erteilt hat. Andernfalls gebe
ich true zurück, da wir jetzt wissen, dass wir
Berechtigungen haben. Übrigens, wenn wir dies aufrufen Funktion mehrmals und der Benutzer hat bereits
in der Vergangenheit Berechtigungen erteilt, wird dem Benutzer diese Eingabeaufforderung nicht erneut angezeigt. Dies gilt übrigens
auch, wenn der Benutzer dies ablehnt. In beiden Fällen wird das Ergebnis automatisch von iOS gespeichert und diese Funktion wird nur Geben Sie true
oder false zurück, je nachdem, ob der Benutzer in der Vergangenheit den Zugriff verweigert oder gewährt hat.
Das Überprüfen von Berechtigungen ist jetzt einfach eine Funktion, die wir im Take Image
Handler aufrufen müssen, bevor wir versuchen, die Kamera zu verwenden.
Daher möchte ich hier auch das asynchrone Warten verwenden, da das Überprüfen von Berechtigungen natürlich eine Funktion ist,
die ein
Versprechen zurückgibt. Daher werde ich dies abwarten und das Ergebnis, das ich in einer Konstanten mit dem Namen "Berechtigung" speichern werde, speichern, da
dies entweder wahr oder falsch ist abhängig davon, ob der Benutzer Berechtigungen erteilt hat oder nicht.
Wenn dies falsch ist, wenn es nicht wahr ist, werde ich einfach hierher zurückkehren, ich werde nicht
weitermachen, ich werde die Kamera nicht öffnen, weil ich das sowieso nicht tun darf, also können wir es einfach nicht weiter,
das
ist die Sache.
Andernfalls können wir fortfahren und jetzt sollten wir auch unter iOS eine Kamera starten können.
Probieren
wir es aus,
speichern wir das und jetzt, da es geändert wurde, deinstalliere ich die Expo hier, um
sicherzustellen, dass die dort erteilten Berechtigungen wieder im Ausgangszustand sind.
Sie müssen dies wahrscheinlich nicht tun, wenn Sie in Ihrer Expo-App nie Berechtigungen erteilt
haben. Wenn Sie jedoch zuvor mit Berechtigungen und nativen Paketen herumgespielt haben, sollten Sie die Expo-App deinstallieren und anschließend neu
installieren, indem Sie Ihre App unter iOS erneut ausführen, indem Sie i drücken in der Konsole dort
unten, um sicherzustellen, dass alle diese Berechtigungen zurückgesetzt werden.
Wenn wir nun zum neuen Wiedergabebildschirm gehen und auf Bild aufnehmen klicken, werde ich gefragt, ob
ich Zugriff auf die Kamera gewähren möchte. Hier kann ich auf OK klicken, und jetzt wird dieser Fehler weiterhin angezeigt.
Der einzige Grund dafür ist, dass, obwohl wir hier versuchen, auf die Kamera zuzugreifen, dies und
das, was ich für dieses Paket weiß, Berechtigungen für die vollständige Kamerarolle erfordert.
Ändern wir dies, um hier nach Berechtigungen für die Kamerarolle zu
fragen. Gehen Sie zurück und klicken Sie auf Bild
aufnehmen. Jetzt frage ich, ob ich den Zugriff auf Fotos zulassen möchte. Wenn ich jetzt auf Ja klicke, ist die Kamera
nicht verfügbar Der Simulator, der jetzt ein anderer Fehler ist und ziemlich klar ist, was das
Problem ist, der iOS-Simulator hat einfach keine Kamera. Also werde ich von nun an auf
Android weitermachen, aber natürlich können Sie dies auf einem echten iPhone
testen, um zu sehen, dass es dort auch funktioniert. Wenn Sie dort Ihren Expo-Barcode mit der Expo-App scannen und die App
dort ausführen, wie Sie sie
zu Beginn des Kurses gesehen haben, können Sie Bilder mit einem echten Telefon aufnehmen, und ich werde am Ende dieses Moduls
auch die fertige App demonstrieren auf iOS- und Android-Geräten, auf realen Geräten.
Im Moment werde ich mich also auf Android konzentrieren und dort konnten wir dies natürlich bereits öffnen.
Ich werde hier noch einmal gefragt, aber jetzt kann ich das öffnen und ein Bild machen. Das ist natürlich schön, aber das Bild so aufzunehmen ist nicht alles,
was ich tun möchte. Ich möchte
auch konfigurieren können, wie ich es aufnehme, und ich möchte es verwenden können.