Realizzare layout perfetti a causa di i pixel sui dispositivi mobili e pericoloso. Ancora nel caso che React Native lo rende piuttosto modesto stima alle sue controparti native, richiede tuttavia molto sforzo durante procurarsi un’app suppellettile alla eccellenza.
Per questo tutorial cloneremo l’app di appuntamenti piuttosto famosa, Tinder. Impareremo quindi verso familiarizzare un framework UI raccolto ribellarsi agli elementi nativi, in quanto semplifica lo styling delle app React Native.
Dal circostanza in quanto codesto sara soltanto un tutorial sul layout, utilizzeremo esposizione, dato che rende le cose molto con l’aggiunta di semplici del sciolto vecchio react-native-cli . Utilizzeremo e molti dati fittizi a causa di sviluppare la nostra app.
Realizzeremo un totale di quattro schermate:Casa, Scelte migliori, bordo, e Messaggi.
Vuoi afferrare React Native da niente? Attuale articolo e un ottenuto dalla nostra scaffale Premium. Ottieni un’intera insieme di libri React Native contro concetti fondamentali, progetti, suggerimenti e strumenti e altro unitamente Zentica Premium. Iscriviti allora per soli $ 9 / mese.
Prerequisiti
Attraverso attuale tutorial, e necessaria una comprensione di inizio di React Native e una certa pratica per mezzo di salone. Avrai addirittura opportunita del client rassegna installato sul tuo macchina arredo ovverosia di un simulatore tollerabile installato sul tuo PC. Le istruzioni sopra come attuare questa impresa possono succedere trovate in questo luogo.
Devi e vestire una comprensione di inizio di stili mediante React Native. Gli stili con React Native sono sostanzialmente un’astrazione conforme verso quella dei CSS, con isolato alcune differenze. Puoi acquistare un catalogo di tutte le caratteristica mediante il lamina di cenno attraverso lo styling.
Nello spazio di il estensione di corrente tutorial utilizzeremo yarn . Qualora non hai yarn appunto installato, installalo da ora.
Assicurati anche di aver proprio installato expo-cli sul tuo PC.
Qualora non e gia installato, vai precedente e installalo:
Verso assicurarti di abitare sulla stessa pagina, queste sono le versioni utilizzate con codesto tutorial:
- Annodatura 11.14.0
- npm 6.4.1
- filato 1.15.2
- esposizione 2.16.1
Assicurati di prorogare expo-cli nel caso che non ti aggiorni da un po ‘, da in quell’istante expo le versioni sono presto obsolete.
Costruiremo una cosa cosicche assomigli a corrente:
Dato che vuoi solo duplicare il repository, l’intero cifrario puo abitare trovato contro GitHub.
Iniziare
Impostiamo un inesperto piano rassegna utilizzando expo-cli :
Ti chiedera conseguentemente di prendere un prototipo. Dovresti prediligere tabs e colpisci accedere .
Dunque ti chiedera di dare un appellativo al concezione. gamma expo-tinder e colpisci accedere ora.
In conclusione, ti chiedera di gravare y durante collocare le dipendenze mediante yarn ovvero n attraverso sistemare le dipendenze con npm . disegno y .
Attuale avvia una nuovissima app React Native utilizzando expo-cli .
Controbattere agli elementi nativi
React Native Elements http://besthookupwebsites.org/it/meetville-review/ e un UI Toolkit multipiattaforma per React Native con un design costante sopra Android, iOS e Web.
E affabile da usare e pienamente affettato mediante JavaScript. E ed il anteriore kit UI mai realizzato verso React Native.
Ci consente di individualizzare affatto gli stili di tutti i nostri componenti nel atteggiamento per cui desideriamo, durante maniera giacche qualunque app abbia il adatto apparenza straordinario.
Puoi fare agevolmente bellissime applicazioni.
Clonazione dell’interfaccia fruitore di Tinder
Abbiamo appunto creato un proponimento nominato expo-tinder .
In eseguire il progetto, digita corrente:
pubblicazione io attraverso compiere il mentitore iOS. Codesto eseguira automaticamente il bugiardo iOS e nel caso che non e aperto.
giornale un verso eseguire l’emulatore Android. Nota giacche l’emulatore deve abitare installato e avviato in passato prima di battere un . In caso contrario generera un equivoco nel finale.
Dovrebbe sembrare che questo:
Viaggio
La figura primo e proprio installata react-navigation verso noi. La navigazione nella scheda subordinato funziona addirittura verso inizio predefinita perche abbiamo scelto tabs nella seconda eta di fiera init . Puoi verificarlo toccando Collegamenti e impostazioni.
Il screens/ raccoglitore e dirigente del raccolto visualizzato mentre le schede vengono modificate.
Ora, rimuovi pienamente il raccolto di HomeScreen.js e sostituirli insieme i seguenti:
Adesso dovresti controllare l’interfaccia fruitore aggiornata:
Dunque adatteremo le schede con principio all’applicazione perche creeremo. Per il nostro clone di Tinder, avremo quattro schermate: domicilio, Scelte migliori, spaccato, e Messaggi.
Possiamo annullare interamente LinksScreen.js e SettingsScreen.js dal screens/ pratica. Popolare in quanto la nostra app si interrompe, mediante una schermata rossa alluvione di errori.
Questo affinche ci siamo collegati ad lui nel file navigation/ custodia. Spazioso MainTabNavigator.js nel navigation/ dossier. Ora e analogo a questo:
Rimuovi i riferimenti a LinksStack e SettingsStack interamente, affinche non abbiamo desiderio di queste schermate nella nostra app. Dovrebbe apparire mezzo questo:
Vai prima e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js internamente il screens/ custodia.
Aggiungi quanto segue all’interno TopPicksScreen.js :
Aggiungi quanto segue all’interno ProfileScreen.js :
Aggiungi quanto segue all’interno MessagesScreen.js :
Andiamo prima e cambiamo components/TabBarIcon.js , giacche avremo privazione di icone personalizzate nella nostra cartellino di navigazione mediante abbassato. Adesso e paragonabile a corrente:
L’unica affare giacche stiamo facendo ora e allegare un file Icon prop percio possiamo ricevere diversi tipi di file Icon anziche di abbandonato Ionicons . Al momento, i diversi tipi supportati sono AntDesign , Entypo , EvilIcons , Feather , FontAwesome , FontAwesome5 , FontAwesome5Brands , Foundation , Ionicons , MaterialCommunityIcons , MaterialIcons , SimpleLineIcons , Octicons e Zocial .
Puoi scegliere una ricchezza di icone diverse dal file fiera / vector-icons directory. Aggiunge unito ceto di accordo attorno @ oblador / react-native-vector-icons lavorare per mezzo di il metodo di asset Expo.
TabBarIcon.js dovrebbe ora assomigliare per questo:
Allora possiamo passare il file Icon puntello a quanto sopra TabBarIcon complesso verso collocare diverse icone.
Dobbiamo mutare l’implementazione di HomeStack nel MainTabNavigator.js classificatore da incorporare con il originale TabBarIcon complesso Icon protezione.
Migliorare il HomeStack implementazione incerto verso presente: