Clonage Tinder à l'aide d'éléments et d'expo indigènes React

Ce tutoriel vous guide à travers la construction d'un clone Tinder à l'aide d'éléments natifs React et d'expo, en se concentrant sur la création de dispositions parfaites de pixel pour mobile. Nous allons construire quatre écrans clés: Accueil, meilleurs choix, profil et messages.

Caractéristiques de clé:

• Tire en tirant des éléments indigènes React pour le style rationalisé en plate-forme (Android, iOS, Web).
• Utilisation de l'expo pour la configuration et l'exécution de projet simplifiées.
• implémentation de navigation personnalisée et d'une barre d'onglet à l'aide de la navigation React.
• employant react-native-deck-swiper pour le balayage de la carte de style Tinder.
• Gérer efficacement les actifs et les dépendances avec le fil.

Prérequis:

Les connaissances de base des natifs et de l'expo sont supposées. Vous aurez besoin du client EXPO sur votre appareil mobile ou un simulateur, ainsi que le fil et expo-cli installés. Le tutoriel utilise le nœud 11.14.0, le NPM 6.4.1, le YARN 1.15.2 et l'Expo 2.16.1 (mise à jour au besoin).

Configuration du projet:

1. Créer un nouveau projet d'exposition: expo init expo-tinder (Choisissez le modèle "Tabs").
2. Installez les dépendances: yarn install

Réagir les éléments natifs intégration:

Installer React Native Elements: yarn add react-native-elements

Construire l'interface utilisateur:

Le tutoriel détaille la création de chaque écran, y compris:

• Écran d'accueil: utilise react-native-deck-swiper pour les cartes à glissement (Card composant). Les données factices sont chargées à partir de constants/Pics.js.

• Écran de choix supérieur: Affiche une grille déficieuse de cartes de profil à l'aide du composant react-native-elements Tile. Données provenant de constants/Pics.js.

• Écran des messages: présente une liste de messages utilisant le composant react-native-elements ListItem. Données de constants/Messages.js.

• Écran de profil: Affiche un profil utilisateur avec l'image, les détails et les liens de médias sociaux. Utilise des composants react-native-elements et un style personnalisé.

Le tutoriel fournit des extraits de code pour chaque écran, ainsi que des explications et des détails de style. N'oubliez pas d'inclure les images d'actifs nécessaires du référentiel GitHub.

Configuration de la navigation:

Le tutoriel modifie la navigation par défaut de l'onglet (MainTabNavigator.js) pour inclure les quatre écrans, la personnalisation des icônes à l'aide d'un composant personnalisé TabBarIcon et la suppression des en-têtes par défaut à l'aide de headerMode: 'none'. SafeAreaView est utilisé pour assurer un rendu approprié dans les zones sûres de l'appareil.

Le code complet est disponible sur GitHub. Le didacticiel se termine par les FAQ couvrant la personnalisation de l'interface utilisateur, les ajouts de fonctionnalités, l'intégration de la base de feu, le déploiement, l'optimisation des performances, la sécurité, la monétisation, la gestion des données, les tests et les mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!