Comprendere layout perfetti attraverso i pixel sui dispositivi mobili e difficile. Ancora nel caso che React Native lo rende piuttosto semplice adempimento alle sue controparti native, richiede tuttavia quantita lavoro durante acquisire un’app mobilio alla perfezione.
Per questo tutorial cloneremo l’app di appuntamenti piu famosa, Tinder. Impareremo conseguentemente a apprendere un framework UI raccolto controbattere agli elementi nativi, cosicche semplifica lo styling delle app React Native.
Dal situazione in quanto corrente sara semplice un tutorial sul layout, utilizzeremo esposizione, dopo che rende le cose alquanto con l’aggiunta di semplici del chiaro sorpassato react-native-cli . Utilizzeremo di nuovo molti dati fittizi attraverso eleggere la nostra app.
Realizzeremo un complessivo di quattro schermate:Casa, Scelte migliori, Profilo, e Messaggi.
Vuoi imparare React https://besthookupwebsites.org/it/instabang-review/ Native da nulla? Attuale articolo e un sommario dalla nostra biblioteca Premium. Ottieni un’intera collezione di libri React Native circa concetti fondamentali, progetti, suggerimenti e strumenti e altro unitamente Zentica Premium. Iscriviti dunque per soli $ 9 / mese.
Prerequisiti
Verso codesto tutorial, e necessaria una sapere di sostegno di React Native e una certa amicizia unitamente fiera. Avrai anche stento del client esposizione installato sul tuo apparecchiatura trasportabile ovvero di un impostore sopportabile installato sul tuo computer. Le istruzioni circa che compiere questa calcolo possono risiedere trovate Qui.
Devi ed occupare una sapere di inizio di stili sopra React Native. Gli stili mediante React Native sono essenzialmente un’astrazione conforme a quella dei CSS, mediante semplice alcune differenze. Puoi raggiungere un nota di tutte le caratteristica mediante il lamina di rinvio durante lo styling.
Durante il moto di attuale tutorial utilizzeremo yarn . Dato che non hai yarn gia installato, installalo da in questo luogo.
Assicurati ancora di aver in precedenza installato expo-cli sul tuo cervello elettronico.
Dato che non e in precedenza installato, vai prima e installalo:
A causa di assicurarti di abitare sulla stessa scritto, queste sono le versioni utilizzate per codesto tutorial:
- Legame 11.14.0
- npm 6.4.1
- ordinato 1.15.2
- esposizione 2.16.1
Assicurati di aggiornare expo-cli dato che non ti aggiorni da un po ‘, da in quel momento esposizione le versioni sono rapidamente obsolete.
Costruiremo una cosa perche assomigli per corrente:
Qualora vuoi semplice clonare il repository, l’intero codice puo succedere trovato sopra GitHub.
Intavolare
Impostiamo un ingenuo progetto esposizione utilizzando expo-cli :
Ti chiedera conseguentemente di preferire un campione. Dovresti prendere tabs e colpisci accedere .
Conseguentemente ti chiedera di assegnare un appellativo al concezione. modo expo-tinder e colpisci accedere al momento.
Da ultimo, ti chiedera di gravare y attraverso installare le dipendenze per mezzo di yarn ovvero n attraverso installare le dipendenze insieme npm . disegno y .
Corrente avvia una nuovissima app React Native utilizzando expo-cli .
Opporsi agli elementi nativi
React Native Elements e un UI Toolkit multipiattaforma a causa di React Native per mezzo di un design retto verso Android, iOS e Web.
E comprensivo da usare e pienamente innalzato unitamente JavaScript. E e il anteriore kit UI mai realizzato attraverso React Native.
Ci consente di adattare affatto gli stili di tutti i nostri componenti nel prassi con cui desideriamo, in metodo giacche ogni app abbia il suo forma singolare.
Puoi creare facilmente bellissime applicazioni.
Clonazione dell’interfaccia consumatore di Tinder
Abbiamo precisamente fabbricato un disegno denominato expo-tinder .
Attraverso eseguire il intenzione, digita codesto:
stampa io verso attuare il impostore iOS. Attuale eseguira automaticamente il ipocrita iOS e se non e aperto.
pubblicazione un in eseguire l’emulatore Android. Popolare in quanto l’emulatore deve risiedere installato e incominciato proprio davanti di comporre un . In altro modo generera un abbaglio nel finale.
Dovrebbe apparire maniera presente:
Trasporto
La fisionomia preliminare e in passato installata react-navigation verso noi. La navigazione nella scheda spregevole funziona ancora verso impostazione predefinita ragione abbiamo addestrato tabs nella seconda periodo di salone init . Puoi verificarlo toccando Collegamenti e impostazioni.
Il screens/ raccoglitore e avveduto del incluso visualizzato mentre le schede vengono modificate.
Occasione, rimuovi del tutto il contenuto di HomeScreen.js e sostituirli mediante i seguenti:
Attualmente dovresti contattare l’interfaccia utente aggiornata:
Occasione adatteremo le schede durante inizio all’applicazione giacche creeremo. Durante il nostro clone di Tinder, avremo quattro schermate: dimora, Scelte migliori, spaccato, e Messaggi.
Possiamo assassinare del tutto LinksScreen.js e SettingsScreen.js dal screens/ custodia. Richiamo perche la nostra app si interrompe, unitamente una schermata rossa alluvione di errori.
Presente motivo ci siamo collegati ad lui nel file navigation/ classificatore. Largo MainTabNavigator.js nel navigation/ classificatore. Oggi e somigliante per questo:
Rimuovi i riferimenti verso LinksStack e SettingsStack pienamente, ragione non abbiamo bisogno di queste schermate nella nostra app. Dovrebbe sembrare appena codesto:
Vai coraggio e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js internamente il screens/ pratica.
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 , perche avremo bisogno di icone personalizzate nella nostra foglietto di viaggio con calato. Adesso e conforme per attuale:
L’unica affare giacche stiamo facendo in questo momento e aggiungere un file Icon prop cosi possiamo occupare diversi tipi di file Icon anzi di soltanto Ionicons . Attualmente, i diversi tipi supportati sono AntDesign , Entypo , EvilIcons , Feather , FontAwesome , FontAwesome5 , FontAwesome5Brands , Foundation , Ionicons , MaterialCommunityIcons , MaterialIcons , SimpleLineIcons , Octicons e Zocial .
Puoi prendere una diversita di icone diverse dal file esposizione / vector-icons directory. Aggiunge uno patina di consentaneita da ogni parte @ oblador / react-native-vector-icons agire con il sistema di asset fiera.
TabBarIcon.js dovrebbe adesso paragonare per codesto:
Adesso possiamo circolare il file Icon appoggio a quanto dopo TabBarIcon membro in collocare diverse icone.
Dobbiamo cambiare l’implementazione di HomeStack nel MainTabNavigator.js custodia da incorporare insieme il originale TabBarIcon insieme Icon puntello.
Cambiare il HomeStack implementazione mutevole per codesto: