Klonieren von Tinder mit React Native Elements und Expo

Dieses Tutorial führt Sie durch den Bau eines Zunder-Klons mit React Native Elements und Expo, wobei Sie sich darauf konzentrieren, Pixel-Perfekt-Layouts für Mobile zu erstellen. Wir erstellen vier Schlüsselbildschirme: Startseite, Top -Picks, Profil und Nachrichten.

Schlüsselmerkmale:

• Reagieren native Elemente für optimierte plattformübergreifende Styling (Android, iOS, Web).
• Verwenden von Expo für vereinfachte Projekt -Setup und -ausführung.
• Implementieren der benutzerdefinierten Navigation und einer Registerkartenleiste mit React Navigation.
• für die Tinder-Karten-Kartenwischung react-native-deck-swiper.
• Vermögen und Abhängigkeiten effizient mit Garn verwalten.

Voraussetzungen:

Basic React Native- und Expo -Wissen werden angenommen. Sie benötigen den Expo -Client auf Ihrem mobilen Gerät oder einem Simulator sowie Garn und expo-cli installiert. Das Tutorial verwendet Knoten 11.14.0, NPM 6.4.1, Garn 1.15.2 und Expo 2.16.1 (nach Bedarf aktualisieren).

Projekt -Setup:

1. Erstellen Sie ein neues Expo -Projekt: expo init expo-tinder (Wählen Sie die "Registerkarten" -Stemplate).
2. Abhängigkeiten installieren: yarn install

Reagieren native Elemente Integration:

reag -native Elemente installieren: yarn add react-native-elements

Erstellen Sie die Benutzeroberfläche:

Die Tutorial beschreibt die Erstellung jedes Bildschirms, einschließlich:

• Startbildschirm: Verwendet react-native-deck-swiper für wischbare Karten (Card Komponente). Dummydaten werden aus constants/Pics.js.

  geladen

• Top Picks Bildschirm: Zeigt ein scrollierbares Gitter von Profilkarten mit react-native-elements 's Tile -Komponente an. Daten aus constants/Pics.js.

  bezogen

• Nachrichtenbildschirm: enthält eine Liste von Nachrichten mithilfe react-native-elements 's ListItem Komponente. Daten von constants/Messages.js.

• Profilbildschirm: zeigt ein Benutzerprofil mit Bild-, Detail- und Social -Media -Links an. Verwendet react-native-elements Komponenten und benutzerdefiniertes Styling.

Das Tutorial enthält Code -Snippets für jeden Bildschirm sowie Erklärungen und Styling -Details. Denken Sie daran, die erforderlichen Asset -Bilder aus dem Github -Repository einzubeziehen.

Navigationssetup:

Das Tutorial verändert die Standardnavigation (MainTabNavigator.js) um die vier Bildschirme, das Anpassen von Symbolen mithilfe einer benutzerdefinierten TabBarIcon -Komponente und Entfernen von Standard -Headern mit headerMode: 'none'. SafeAreaView wird verwendet, um eine ordnungsgemäße Renderung in den sicheren Bereichen der Geräte zu gewährleisten.

Der vollständige Code ist auf GitHub verfügbar. Das Tutorial schließt mit FAQs, die die UI -Anpassung, die Feature -Ergänzungen, die Integration von Firebase, die Bereitstellung, die Leistungsoptimierung, die Sicherheit, die Monetarisierung, die Datenbearbeitung, das Testen und Updates abdecken.

.

Das obige ist der detaillierte Inhalt vonKlonieren von Tinder mit React Native Elements und Expo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!