Guadagnare layout perfetti in i pixel sui dispositivi mobili e pericoloso. Addirittura dato che React Native lo rende piu chiaro riguardo alle sue controparti native, richiede ciononostante tanto fatica in procurarsi un’app suppellettile alla ottimo.
Con presente tutorial cloneremo l’app di appuntamenti piu famosa, Tinder. Impareremo conseguentemente per apprendere un framework UI designato ribellarsi agli elementi nativi, che semplifica lo styling delle app React Native.
Dal momento in quanto attuale sara abbandonato un tutorial sul layout, utilizzeremo Expo, dato che rende le cose tanto piuttosto semplici del chiaro sorpassato react-native-cli . Utilizzeremo di nuovo molti dati fittizi in eleggere la nostra app.
Realizzeremo un complesso di quattro schermate:Casa, Scelte migliori, disegno, e Messaggi.
Vuoi impratichirsi React Native da niente? Presente articolo e un sommario dalla nostra scaffale Premium. Ottieni un’intera antologia di libri React Native su concetti fondamentali, progetti, suggerimenti e strumenti e altro unitamente Zentica Premium. Iscriviti dunque in soli $ 9 / mese.
Prerequisiti
Durante codesto tutorial, e necessaria una coscienza di sostegno di React Native e una certa abitudine insieme rassegna. Avrai addirittura desiderio del client esposizione installato sul tuo apparecchio trasportabile o di un simulatore compatibile installato sul tuo PC. Le istruzioni circa modo fare questa operazione possono essere trovate ora.
Devi ancora avere una comprensione di basamento di stili in React Native. Gli stili con React Native sono imprescindibile un’astrazione somigliante verso quella dei CSS, unitamente abbandonato alcune differenze. Puoi ottenere un registro di tutte le appartenenza durante il lastra di richiamo verso lo styling.
Nel corso di il corso di questo tutorial utilizzeremo yarn . Se non hai yarn precisamente installato, installalo da qua.
Assicurati ed di aver precisamente installato expo-cli sul tuo elaboratore.
Dato che non e precisamente installato, vai forza e installalo:
Verso assicurarti di capitare sulla stessa scritto, queste sono le versioni utilizzate con presente tutorial:
- Cuore 11.14.0
- npm 6.4.1
- filato 1.15.2
- fiera 2.16.1
Assicurati di rinviare expo-cli se non ti aggiorni da un po ‘, da ebbene salone le versioni sono velocemente obsolete.
Costruiremo una cosa perche assomigli verso questo:
Qualora vuoi solo clonare il repository, l’intero etichetta puo essere trovato sopra GitHub.
Intavolare
Impostiamo un tenero piano rassegna utilizzando expo-cli :
Ti chiedera poi di anteporre un linea. Dovresti prendere tabs e colpisci accedere .
Conseguentemente ti chiedera di riconoscere un appellativo al piano. varieta expo-tinder e colpisci accedere attualmente.
Finalmente, ti chiedera di premere y verso collocare le dipendenze mediante yarn ovverosia n in collegare le dipendenze con npm . giornale y .
Presente avvia una nuovissima app React Native utilizzando expo-cli .
Reagire agli elementi nativi
React Native Elements e un UI Toolkit multipiattaforma per React Native insieme un design retto contro Android, iOS e Web.
E facile da servirsi e assolutamente prodotto per mezzo di JavaScript. E addirittura il originario kit UI no realizzato attraverso React Native.
Ci consente di individualizzare affatto gli stili di tutti i nostri componenti nel maniera in cui desideriamo, sopra sistema perche qualsiasi app abbia il adatto portamento eccezionale.
Puoi sviluppare speditamente bellissime applicazioni.
Clonazione dell’interfaccia fruitore di Tinder
Abbiamo gia ideato un disegno denominato expo-tinder .
Durante fare il intenzione, digita attuale:
giornale io verso fare il impostore iOS. Codesto eseguira automaticamente il simulatore iOS ed se non e spazioso.
pubblicazione un per eseguire l’emulatore Android. Cenno giacche l’emulatore deve abitare installato e incamminato in precedenza avanti di digitare un . In altro modo generera un svista nel ultimo.
Dovrebbe mostrarsi modo questo:
Navigazione
La figura preliminare e precisamente installata react-navigation attraverso noi. La cabotaggio nella scheda inferiore funziona ed durante avvio predefinita scopo abbiamo deciso tabs nella seconda stadio di salone init . Puoi verificarlo toccando Collegamenti e impostazioni.
Il screens/ custodia e incaricato del incluso visualizzato laddove le schede vengono modificate.
Allora, rimuovi interamente il raccolto di HomeScreen.js e sostituirli con i seguenti:
Attualmente dovresti sognare l’interfaccia fruitore aggiornata:
Dunque adatteremo le schede per base all’applicazione in quanto creeremo. In il nostro clone di Tinder, avremo quattro schermate: dimora, Scelte migliori, Profilo, e Messaggi.
Possiamo sopprimere completamente LinksScreen.js e SettingsScreen.js dal screens/ custodia. Nota in quanto la nostra app si interrompe, per mezzo di una schermata rossa inondazione di errori.
Codesto perche ci siamo collegati ad egli nel file navigation/ cartella. Esteso MainTabNavigator.js nel navigation/ classificatore. Adesso e paragonabile a questo:
Rimuovi i riferimenti a LinksStack e SettingsStack assolutamente, affinche non abbiamo stento di queste schermate nella nostra app. Dovrebbe apparire maniera attuale:
Vai su e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js dentro 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 forza e https://besthookupwebsites.org/it/menchats-review/ cambiamo components/TabBarIcon.js , dopo che avremo indigenza di icone personalizzate nella nostra scheda di navigazione per diminuito. Oggi e conforme per corrente:
L’unica avvenimento in quanto stiamo facendo in questo luogo e accludere un file Icon prop almeno possiamo avere diversi tipi di file Icon anziche di soltanto Ionicons . Al momento, i diversi tipi supportati sono AntDesign , Entypo , EvilIcons , Feather , FontAwesome , FontAwesome5 , FontAwesome5Brands , Foundation , Ionicons , MaterialCommunityIcons , MaterialIcons , SimpleLineIcons , Octicons e Zocial .
Puoi anteporre una varieta di icone diverse dal file salone / vector-icons directory. Aggiunge singolo casta di tollerabilita circa @ oblador / react-native-vector-icons adoperarsi unitamente il complesso di asset rassegna.
TabBarIcon.js dovrebbe occasione essere simile verso attuale:
Ora possiamo passare il file Icon protezione a quanto addosso TabBarIcon componente verso sistemare diverse icone.
Dobbiamo mutare l’implementazione di HomeStack nel MainTabNavigator.js classificatore da annettere insieme il tenero TabBarIcon complesso Icon sostegno.
Falsare il HomeStack implementazione mutevole per presente: