Clonazione di Tinder usando React Native Elements ed esposizione

Intuire layout perfetti in i pixel sui dispositivi mobili e dubbio. Ed qualora React Native lo rende con l’aggiunta di modesto ossequio alle sue controparti native, richiede malgrado parecchio fatica in acquisire un’app amovibile alla massimo.

Con corrente tutorial cloneremo l’app di appuntamenti piuttosto famosa, Tinder. Impareremo poi per apprendere un framework UI attirato ribattere agli elementi nativi, affinche semplifica lo styling delle app React Native.

Dal situazione che corrente sara semplice un tutorial sul layout, utilizzeremo fiera, perche rende le cose quantita ancora semplici del semplice attempato react-native-cli . Utilizzeremo anche molti dati fittizi per produrre la nostra app.

Realizzeremo un completo di quattro schermate:Casa, Scelte migliori, disegno, e Messaggi.

Vuoi imparare React Native da zero? Questo scritto e un riassunto dalla nostra scansia Premium. Ottieni un’intera collezione di libri React Native riguardo a concetti consigli furfling fondamentali, progetti, suggerimenti e strumenti e diverso unitamente Zentica Premium. Iscriviti adesso per soli $ 9 / mese.

Prerequisiti

A causa di codesto tutorial, e necessaria una comprensione di principio di React Native e una certa amicizia insieme rassegna. Avrai di nuovo opportunita del client esposizione installato sul tuo strumento suppellettile o di un impostore sopportabile installato sul tuo calcolatore elettronico. Le istruzioni contro maniera adempiere questa calcolo possono risiedere trovate qua.

Devi di nuovo vestire una amico di inizio di stili durante React Native. Gli stili con React Native sono essenzialmente un’astrazione simile per quella dei CSS, unitamente abbandonato alcune differenze. Puoi ottenere un elenco di tutte le bene mediante il lastra di richiamo durante lo styling.

Durante il trattato di corrente tutorial utilizzeremo yarn . Dato che non hai yarn in precedenza installato, installalo da ora.

Assicurati ancora di aver in precedenza installato expo-cli sul tuo elaboratore.

Se non e proprio installato, vai su e installalo:

Verso assicurarti di avere luogo sulla stessa facciata, queste sono le versioni utilizzate per corrente tutorial:

• Nodo 11.14.0
• npm 6.4.1
• filato 1.15.2
• esposizione 2.16.1

Assicurati di preparare expo-cli se non ti aggiorni da un po ‘, da ebbene esposizione le versioni sono presto obsolete.

Costruiremo una cosa cosicche assomigli verso presente:

Nell’eventualita che vuoi solitario clonare il repository, l’intero codice puo capitare trovato sopra GitHub.

Intavolare

Impostiamo un ingenuo concezione esposizione utilizzando expo-cli :

Ti chiedera dunque di preferire un disegno. Dovresti prendere tabs e colpisci accedere .

Percio ti chiedera di accordare un fama al intenzione. varieta expo-tinder e colpisci accedere adesso.

Da ultimo, ti chiedera di pigiare y durante collegare le dipendenze con yarn oppure n per collocare le dipendenze con npm . disegno y .

Questo avvia una nuovissima app React Native utilizzando expo-cli .

Opporsi agli elementi nativi

React Native Elements e un UI Toolkit multipiattaforma in React Native per mezzo di un design costante verso Android, iOS e Web.

E facile da impiegare e affatto fatto mediante JavaScript. E ed il originario kit UI in nessun caso realizzato durante React Native.

Ci consente di adattare affatto gli stili di tutti i nostri componenti nel maniera sopra cui desideriamo, con atteggiamento perche qualsiasi app abbia il conveniente prospettiva straordinario.

Puoi creare perfettamente bellissime applicazioni.

Clonazione dell’interfaccia utente di Tinder

Abbiamo appunto generato un proponimento qualificato expo-tinder .

Verso eseguire il disegno, digita corrente:

giornale io a causa di eseguire il impostore iOS. Codesto eseguira meccanicamente il impostore iOS ancora nell’eventualita che non e spazioso.

editoria un in compiere l’emulatore Android. Richiamo che l’emulatore deve succedere installato e iniziato gia inizialmente di battere un . Altrimenti generera un fallo nel ultimo.

Dovrebbe apparire modo questo:

Cabotaggio

La fisionomia cifra e appunto installata react-navigation per noi. La trasporto nella scheda inferiore funziona ed a causa di abbozzo predefinita perche abbiamo deciso tabs nella seconda epoca di fiera init . Puoi verificarlo toccando Collegamenti e impostazioni.

Il screens/ cartella e consapevole del moderato visualizzato quando le schede vengono modificate.

Adesso, rimuovi assolutamente il posato di HomeScreen.js e sostituirli insieme i seguenti:

Occasione dovresti assistere l’interfaccia utente aggiornata:

Adesso adatteremo le schede in sostegno all’applicazione giacche creeremo. Attraverso il nostro clone di Tinder, avremo quattro schermate: residenza, Scelte migliori, contorno, e Messaggi.

Possiamo sopprimere pienamente LinksScreen.js e SettingsScreen.js dal screens/ raccoglitore. Nota perche la nostra app si interrompe, mediante una schermata rossa piena di errori.

Presente fine ci siamo collegati ad lui nel file navigation/ pratica. Esteso MainTabNavigator.js nel navigation/ pratica. Al momento e analogo a codesto:

Rimuovi i riferimenti verso LinksStack e SettingsStack del tutto, perche non abbiamo indigenza di queste schermate nella nostra app. Dovrebbe mostrarsi modo attuale:

Vai coraggio e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js interno il screens/ dossier.

Aggiungi quanto segue all’interno TopPicksScreen.js :

Aggiungi quanto segue all’interno ProfileScreen.js :

Aggiungi quanto segue all’interno MessagesScreen.js :

Andiamo su e cambiamo components/TabBarIcon.js , dopo che avremo desiderio di icone personalizzate nella nostra scheda di trasporto sopra diminuito. Al presente e similare verso questo:

L’unica bene in quanto stiamo facendo in questo luogo e accludere un file Icon prop percio possiamo sentire diversi tipi di file Icon invece di solo Ionicons . Al presente, i diversi tipi supportati sono AntDesign , Entypo , EvilIcons , Feather , FontAwesome , FontAwesome5 , FontAwesome5Brands , Foundation , Ionicons , MaterialCommunityIcons , MaterialIcons , SimpleLineIcons , Octicons e Zocial .

Puoi anteporre una diversita di icone diverse dal file salone / vector-icons directory. Aggiunge unito casta di conciliabilita da ogni parte @ oblador / react-native-vector-icons occuparsi con il compagine di asset salone.

TabBarIcon.js dovrebbe attualmente sembrare a attuale:

Occasione possiamo snodarsi il file Icon protezione per quanto addosso TabBarIcon partecipante in aumentare diverse icone.

Dobbiamo migliorare l’implementazione di HomeStack nel MainTabNavigator.js dossier da includere unitamente il nuovo TabBarIcon membro Icon puntello.

Migliorare il HomeStack implementazione instabile per codesto: