Aus dem Kurs: React Native Grundkurs

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.

Header mit Animationen anlegen

Header mit Animationen anlegen – Tutorial zu React Native

Aus dem Kurs: React Native Grundkurs

Gratismonat starten Für Ihr Team erwerben

Header mit Animationen anlegen

“

Um unsere App etwas attraktiver für den Benutzer zu machen, wollen wir mit Animationen arbeiten. Der ideale Ort für eine Animation ist beispielsweise der Header. Ich zeige Ihnen nun in diesem Video, wie Sie mithilfe von Lottie Ihren Header animieren können. Zunächst einmal beginnen wir damit, die Bibliothek lottie-react-native in unserem Projekt zu installieren. lottie-react-native ist nichts anderes als eine Wrapper-Komponente für React Native, die Lottie für iOS und Android benutzt, um Animationen aus Adobe After Effects darzustellen. Wir öffnen also ein Terminal innerhalb unseres Projektes und benutzen den Befehl yarn add lottie-react-native. Diese Bibliothek enthält bereits Ihre TypeScript-Definitionen, daher ist es nicht nötig, weitere Types zu installieren. Da es sich hierbei um ein Package handelt, das native Abhängigkeiten beinhaltet, also Code für jeweils iOS und Android, sollte im Emulator die App neu initialisiert werden. Dies können wir über den Android-Befehl der…

Inhalt