Clonazione di Tinder usando React Native Elements ed rassegna
Intuire layout perfetti per i pixel sui dispositivi mobili e dubbio. Di nuovo nel caso che React Native lo rende piuttosto semplice adempimento alle sue controparti native, richiede malgrado alquanto fatica verso raggiungere un’app suppellettile alla completezza.
Durante corrente tutorial cloneremo l’app di appuntamenti piu famosa, Tinder. Impareremo dunque a riconoscere un framework UI chiamato opporsi agli elementi nativi, in quanto semplifica lo styling delle app React Native.
Dal situazione perche attuale sara solitario un tutorial sul layout, utilizzeremo salone, dato che rende le cose assai piu semplici del agevole anziano react-native-cli . Utilizzeremo anche molti dati fittizi durante fare la nostra app.
Realizzeremo un assoluto di quattro schermate:Casa, Scelte migliori, contorno, e Messaggi.
Vuoi apprendere React Native da niente? Attuale articolo e un tolto dalla nostra scansia Premium. Ottieni un’intera raccolta di libri React Native contro concetti fondamentali, progetti, suggerimenti e strumenti e estraneo insieme Zentica Premium. Iscriviti occasione durante soli $ 9 / mese.
Prerequisiti
In presente tutorial, e necessaria una coscienza di inizio di React Native e una certa amicizia insieme salone. Avrai addirittura desiderio del client rassegna installato sul tuo apparecchio arredo oppure di un simulatore tollerabile installato sul tuo PC. Le istruzioni verso che effettuare questa impresa possono capitare trovate Qui.
Devi addirittura portare una amico di supporto di stili mediante React Native. Gli stili sopra React Native sono soprattutto un’astrazione somigliante verso quella dei CSS, per mezzo di semplice alcune differenze. Puoi ottenere un lista di tutte le bene sopra il prospetto di richiamo attraverso lo styling.
Intanto che il trattato di corrente tutorial utilizzeremo yarn . Se non hai yarn gia installato, installalo da in questo momento.
Assicurati e di aver in precedenza installato expo-cli sul tuo PC.
Nel caso che non e proprio installato, vai forza e installalo:
Verso assicurarti di essere sulla stessa pagina, queste sono le versioni utilizzate con corrente tutorial:
- Nodo 11.14.0
- npm 6.4.1
- incessante 1.15.2
- rassegna 2.16.1
Assicurati di prorogare expo-cli dato che non ti aggiorni da un po ‘, da ebbene salone le versioni sono celermente obsolete.
Costruiremo una cosa giacche assomigli a corrente:
Nel caso che vuoi isolato clonare il repository, l’intero legge puo avere luogo trovato riguardo a GitHub.
Avviare
Impostiamo un inesperto progetto rassegna utilizzando expo-cli :
Ti chiedera quindi di scegliere un disegno. Dovresti designare tabs e colpisci accedere .
Quindi ti chiedera di concedere un nome al piano. modo expo-tinder e colpisci accedere arpione.
Infine, ti chiedera di premere y attraverso collegare le dipendenze unitamente yarn ovvero n durante collocare le dipendenze per mezzo di npm . giornale y .
Corrente avvia una nuovissima app React Native utilizzando expo-cli .
Opporsi agli elementi nativi
React Native Elements e un UI Toolkit multipiattaforma attraverso React Native per mezzo di un design compatto circa Android, iOS e Web.
E agevole da impiegare e interamente costruito unitamente JavaScript. E anche il originario kit UI per niente realizzato durante React Native.
Ci consente di caratterizzare interamente gli stili di tutti i nostri componenti nel metodo durante cui desideriamo, con sistema cosicche qualsivoglia app abbia il adatto forma unico.
Puoi creare speditamente bellissime applicazioni.
Clonazione dell’interfaccia fruitore di Tinder
Abbiamo in precedenza fatto un concezione denominato expo-tinder .
Durante adempiere il proponimento, digita attuale:
giornale io in adempiere il simulatore iOS. Codesto eseguira istintivamente il simulatore iOS addirittura nell’eventualita che non e spazioso.
stampa un attraverso effettuare l’emulatore Android. Segno cosicche l’emulatore deve risiedere installato e prospero in passato anzi di digitare un . Altrimenti generera un errore nel estremo.
Dovrebbe valutare maniera corrente:
Cabotaggio
La fisionomia introduttivo e in precedenza installata react-navigation in noi. La cabotaggio nella biglietto secondo funziona ancora in schema predefinita motivo abbiamo deciso tabs nella seconda fase di esposizione init . Puoi verificarlo toccando Collegamenti e impostazioni.
Il screens/ cartella e incaricato del contenuto visualizzato quando le schede vengono modificate.
Adesso, rimuovi pienamente il moderato di HomeScreen.js e sostituirli per mezzo di i seguenti:
Occasione dovresti sognare l’interfaccia fruitore aggiornata:
Occasione adatteremo le schede sopra principio all’applicazione affinche creeremo. A causa di il nostro clone di Tinder, avremo quattro schermate: domicilio, Scelte migliori, fianco, e Messaggi.
Possiamo uccidere del tutto LinksScreen.js e SettingsScreen.js dal screens/ pratica. Cenno che la nostra app si interrompe, insieme una schermata rossa piena di errori.
Corrente scopo ci siamo collegati ad egli nel file navigation/ dossier. Ampio MainTabNavigator.js nel navigation/ custodia. Attualmente e somigliante verso questo:
Rimuovi i riferimenti verso LinksStack e SettingsStack del tutto, ragione non abbiamo opportunita di queste schermate nella nostra app. Dovrebbe stimare che corrente:
Vai prima e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js interno il screens/ raccoglitore.
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 , dato che avremo opportunita di icone personalizzate nella nostra scheda di trasporto durante basso. Adesso e analogo a presente:
L’unica atto giacche stiamo facendo in questo luogo e aggiungere un file Icon prop tanto possiamo occupare diversi tipi di file Icon piuttosto di solitario Ionicons . Oggi, i diversi tipi supportati sono AntDesign , Entypo , EvilIcons , Feather , FontAwesome , FontAwesome5 , FontAwesome5Brands , Foundation , Ionicons , MaterialCommunityIcons , MaterialIcons , SimpleLineIcons , Octicons e Zocial .
Puoi preferire una diversita di icone diverse dal file rassegna / vector-icons directory. Aggiunge ciascuno rivestimento di tollerabilita circa @ oblador / react-native-vector-icons lavorare con il impianto di asset rassegna.
TabBarIcon.js dovrebbe adesso parere verso attuale:
Attualmente possiamo percorrere il file Icon sostegno per quanto al di sopra TabBarIcon membro durante assalire diverse icone.
Dobbiamo correggere l’implementazione di HomeStack nel MainTabNavigator.js raccoglitore da annettere unitamente il inesperto TabBarIcon partecipante Icon sostegno.
Correggere il HomeStack implementazione mutevole per attuale: