Guten Tag, Einwohner von Chabrowsk. Heute teilen wir Ihnen eine Übersetzung eines Artikels mit, dessen Übersetzung speziell für den ersten Start des
ReactJS / React Native-Developer- Kurses vorbereitet wurde. Gute Lektüre.
Wenn Sie neu in der Welt von React Native sind, wissen Sie, dass es einige Fallstricke gibt, die Sie vermeiden möchten. In einigen Fällen müssen Sie im Voraus eine Auswahl treffen, ohne die geringste Ahnung zu haben, wie oder was sich darauf auswirkt.
Unten habe ich eine Liste der besten praktischen Tipps aus meiner persönlichen Erfahrung zusammengestellt, von denen ich hoffe, dass sie für Sie nützlich sind :)
Verwenden Sie Expo-Kit nur, wenn Sie wirklich wissen, was Sie tun.
Expo ist ein kostenloses Open Source-Tool für React Native. Es ist möglich, dass dies der beste Satz von Tools zum Erstellen von Anwendungen in React Native ist, es hat jedoch auch seine Einschränkungen.
Verwenden Sie Expo:- Wenn Sie nur eine Sandbox erstellen möchten, erstellen Sie kein Repository für Ihre Anwendung. Erstellen Sie einfach eine neue Anwendung mit dem Paket create-react-native-app .
- Wenn Sie vor dem Erstellen einer Anwendung Nachforschungen angestellt haben und festgestellt haben, dass alle von den von Expo angebotenen Lösungen alle Anforderungen erfüllt werden können.
- Wenn Sie keinen Mac OS-Computer haben, aber dennoch iPhone-Anwendungen erstellen möchten. Dies ist die einzige Alternative zum Erstellen von ausführbaren IPA-Dateien.
Verwenden Sie Expo nicht:- Wenn Sie React Native noch nicht kennen und der Meinung sind, dass dies die einzige Möglichkeit ist, eine Anwendung zu erstellen. Überprüfen Sie zunächst, ob es Ihren Anforderungen entspricht.
- Wenn Sie RN-Pakete von Drittanbietern mit nativen Benutzermodulen verwenden möchten. Expo unterstützt diese Funktionalität nicht. In diesem Fall müssen Sie das (Auswurf-) Expo-Kit extrahieren. Wenn Sie anfänglich eine Reihe von Tools extrahieren möchten, sollten Sie diese meiner Meinung nach überhaupt nicht verwenden. Das Extraktionsverfahren erschwert die Erstellung der Anwendung im Vergleich dazu, wenn Sie sie überhaupt nicht verwendet haben.
Im Allgemeinen denke ich, dass Expo ein großartiges Tool ist, und ich verwende
Expo Snack selbst, um React Native-Code zu teilen. Im Moment kann es jedoch nur zum Erstellen bestimmter Arten von Anwendungen nützlich sein.
So strukturieren Sie Ordner und Dateien Ihrer Anwendung
Das Organisieren einer Anwendung in React Native unterscheidet sich nicht vom Organisieren einer Anwendung in React. Wenn Sie damit vertraut sind, halten Sie sich einfach an dieselbe Logik. Ist dies jedoch nicht der Fall, ist die unten beschriebene Logik hilfreich:
- Fügen Sie den Ordner zum Stammverzeichnis hinzu und nennen Sie ihn "App".
- Erstellen Sie Ordner in der „App“:
assets - Darin befinden sich bis zu drei Ordner mit Schriftarten, Symbolen und Bildern.
components - Hier platzieren Sie alle gemeinsam genutzten React-Komponenten. Normalerweise sind dies die Komponenten, die wir als "Dummy" bezeichnen, da sie keine Statuslogik haben und innerhalb der Anwendung problemlos wiederverwendet werden können.
views - Dies sind unsere Anwendungsbildschirme, mit denen wir von einem zum anderen wechseln. Hier werden auch Reaktionskomponenten gespeichert, die wir Container nennen, weil sie ihren eigenen Status speichern.
modules - Dort werden Teile gespeichert, die keine entsprechende Ansicht (JCX) haben. Typische Beispiele sind das Farbmodul (enthält alle Anwendungsfarben) und das Dienstprogrammmodul (enthält Dienstprogrammfunktionen, die wiederverwendet werden können).
services - Hier sind die Funktionen, die API-Aufrufe umschließen.
i18n - Die Übersetzung wird hier für Benutzer mit verschiedenen Sprachen und Gebietsschemas gespeichert.
Alle Anwendungen erfordern eine bestimmte Art von Konfiguration, daher erstelle ich normalerweise eine Datei mit dem Namen
config.js und speichere sie dort. Wenn die Konfigurationsdatei zu viele Zeilen enthält, können Sie einen separaten Konfigurationsordner erstellen und in mehrere Dateien aufteilen.
Wenn Sie über eine Statusverwaltungsbibliothek verfügen, benötigen Sie auch Ordner für deren Komponenten. Bei Redux werden 2 oder mehr Ordner verwendet, einer für
actions und einer für
reducers . Wenn Sie keine externen Pakete verwenden und die React Context API bevorzugen, können Sie Ihre eigenen Anbieter erstellen, die im Modulordner oder im neuen
providers abgelegt werden können.
Wir wählen die Navigationsbibliothek nach Ihren Wünschen aus
Leider hat RN noch keine vollständige Lösung oder zumindest keinen würdigen Ersatz für die alte Navigator-Komponente. Daher konzentrieren wir uns jetzt darauf, wie die Community dieses Problem löst. Wenn Sie also ein Projekt erstellen und wissen möchten, welche Navigationsbibliothek Sie verwenden sollen, ist dieser Abschnitt nur für Sie bestimmt.
Im Allgemeinen gibt es zwei Arten von Navigationsbibliotheken: JavaScript-Navigatoren und native Navigatoren. Die ersten sind in JavaScript geschrieben, während die nativen Bibliotheken in nativen Modulen entsprechend der Plattform (Android, iOS) geschrieben und mit JavaScript-Modulen verbunden sind, um in den Code geworfen zu werden. Die ersteren sind viel einfacher einzurichten, während die letzteren viel effizienter sind. Nehmen Sie sich Zeit, um herauszufinden, welcher Typ am besten zu Ihnen passt, und wählen Sie dann aus so vielen Bibliotheken dieses Typs aus.
Spencer Carly hat großartige Arbeit geleistet und aktuelle Navigationsoptionen in der React Native-Welt entwickelt. Sie können seinen
Artikel zu diesem Thema lesen. Die derzeit beliebtesten Lösungen sind
React Navigation als JavaScript-Lösung und
React Native Navigation als native Lösung.
Verwenden Sie zur Vereinfachung die CSS-in-JS-Wrapper-Bibliothek
In React Native wird CSS in JavaScript geschrieben. Hier haben wir keine Wahl. Anstatt die
StyleSheet.create- Methode und den CSS-Code in reinem JavaScript zu verwenden, verwende ich persönlich die
Styled Components- Bibliothek. Gestaltete Komponenten machen CSS wieder klar und machen JSX semantischer.
Ich habe kürzlich einen Artikel darüber geschrieben, warum ich Styled Components in
React Native- Anwendungen bevorzuge. Sie können ihn lesen, um das Thema besser zu verstehen.
Entscheiden Sie im Voraus, wie Ihre Anwendung auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen skaliert werden soll.
Höchstwahrscheinlich entwickeln Sie eine Anwendung für mehr als ein Gerät und eine Bildschirmgröße. Jetzt gibt es zwei Ansätze für Design und Anwendungsentwicklung.
Sie können je nach Bildschirmgröße eine andere UX / UI wählen. Für die meisten Arten von Anwendungen ist dies wahrscheinlich die beste Option, erfordert jedoch viel Aufwand, da Sie mehrere Bildschirmoptionen entwickeln und implementieren müssen. Bildschirmgrößen können mithilfe der
Dimensions-API ermittelt werden. Auf der anderen Seite können Sie ein Paket eines Drittanbieters verwenden, das
standardmäßig einige Tools enthält, z. B. die
React Native Responsive-Benutzeroberfläche .
Oder Sie können dieselbe Benutzeroberfläche / UX verwenden, die für alle Bildschirmgrößen proportional skaliert wird. Dies ist die beste Option, wenn Sie beispielsweise ein Spiel entwickeln. Auch hier können Sie ein Paket eines Drittanbieters verwenden, z. B.
React Native Responsive Screen .
Haftungsausschluss: Ich bin der Schöpfer des React Native Responsive Screen- Pakets.
Seien Sie vorsichtig mit Animationen
Animation ist für mobile Anwendungen von entscheidender Bedeutung, aber die Leistung von React Native ist schlecht.
Zum Schutz vor Fehlern müssen Sie die Animation auf dem Gerät testen, da der Emulator nicht das richtige Feedback liefert. Sie müssen auch
useNativeDriver (mit true) verwenden, wo immer dies möglich ist, da dies zu einer besseren Leistung
useNativeDriver .
Wenn Sie weitere Tipps zur Erzielung einer besseren Leistung wünschen, lesen Sie meinen vorherigen
Artikel .
Denken Sie auch daran
- React Native enthält keine DOM-Elemente. Stattdessen arbeiten wir mit nativen Elementen.
- Über CSS:
- Nicht alle Funktionen werden unterstützt, zumindest noch nicht. Weitere Informationen finden Sie in der Dokumentation: Eigenschaften des Ansichtsstils, Eigenschaften des Bildstils, Eigenschaften des Textstils .
- Kurzschrift-Eigenschaften funktionieren nicht immer gut, daher ist es besser, bestimmte zu verwenden (z. B. Rand-unten, Rand-oben, Rand-links, Rand-rechts anstelle von Rand).
- Nicht alle Eigenschaften unterstützen Prozentsätze. Zum Beispiel Folgendes: Rand, Randbreite und Randradius. Wenn jemand versucht, Prozentwerte zu verwenden, ignoriert RN diese entweder oder die Anwendung stürzt im Prinzip ab.
- RN unterstützt Flex out of the box. Untersuchen Sie es und verwenden Sie es gegebenenfalls. Dies ist der beste CSS-Verbündete!
Das ist alles. Erfahren Sie hier mehr über den Kurs.