Fare layout perfetti attraverso i pixel sui dispositivi mobili e faticoso. Ed dato che React Native lo rende ancora facile ossequio alle sue controparti native, richiede comunque parecchio lavoro in prendere un’app mobilio alla massimo.
Con codesto tutorial cloneremo l’app di appuntamenti ancora famosa, Tinder. Impareremo dunque per riconoscere un framework UI attirato Reagire agli elementi nativi, cosicche semplifica lo styling delle app React Native.
Dal periodo in quanto codesto sara abbandonato un tutorial sul layout, utilizzeremo Expo, giacche rende le cose alquanto oltre a semplici del sciolto superato react-native-cli . Utilizzeremo e molti dati fittizi per suscitare la nostra app.
Realizzeremo un assoluto di quattro schermate:Casa, Scelte migliori, contorno, e Messaggi.
Vuoi afferrare React Native da nulla? Presente parte e un estratto dalla nostra scaffale Premium. Ottieni un’intera raccolta di libri React Native riguardo a concetti fondamentali, progetti, suggerimenti e strumenti e aggiunto insieme Zentica Premium. Iscriviti occasione durante soli $ 9 / mese.
Prerequisiti
In questo tutorial, e necessaria una istruzione di supporto di React Native e una certa pratica insieme rassegna. Avrai anche desiderio del client fiera installato sul tuo dispositivo arredo ovverosia di un simulatore conciliabile installato sul tuo calcolatore elettronico. Le istruzioni circa maniera adempiere questa impresa possono abitare trovate Qui.
Devi ed ricevere una coscienza di principio di stili durante React Native. Gli stili per React Native sono principalmente un’astrazione simile per quella dei CSS, mediante semplice alcune differenze. Puoi acquisire un registro di tutte le appartenenza con il lastra di cenno a causa di lo styling.
Nel corso di il trattato di presente tutorial utilizzeremo yarn . Dato che non hai yarn in passato installato, installalo da ora.
Assicurati ancora di aver in precedenza installato expo-cli sul tuo elaboratore.
Nel caso che non e gia installato, vai coraggio e installalo:
A causa di assicurarti https://www.besthookupwebsites.org/it/misstravel-review di abitare sulla stessa scritto, queste sono le versioni utilizzate sopra questo tutorial:
- Cuore 11.14.0
- npm 6.4.1
- filato 1.15.2
- salone 2.16.1
Assicurati di preparare expo-cli qualora non ti aggiorni da un po ‘, da allora rassegna le versioni sono presto obsolete.
Costruiremo alcune cose giacche assomigli a corrente:
Qualora vuoi abbandonato clonare il repository, l’intero manoscritto puo risiedere trovato circa GitHub.
Intavolare
Impostiamo un inesperto piano salone utilizzando expo-cli :
Ti chiedera poi di scegliere un disegno. Dovresti preferire tabs e colpisci accedere .
Poi ti chiedera di dare un appellativo al concezione. modo expo-tinder e colpisci accedere ancora.
In conclusione, ti chiedera di schiacciare y durante collocare le dipendenze insieme yarn ovvero n verso collegare le dipendenze mediante npm . disegno y .
Presente avvia una nuovissima app React Native utilizzando expo-cli .
Ribellarsi agli elementi nativi
React Native Elements e un UI Toolkit multipiattaforma attraverso React Native unitamente un design compatto su Android, iOS e Web.
E comprensivo da impiegare e affatto affettato unitamente JavaScript. E ed il iniziale kit UI in nessun caso realizzato in React Native.
Ci consente di individualizzare affatto gli stili di tutti i nostri componenti nel prassi con cui desideriamo, con maniera affinche qualsivoglia app abbia il suo punto di vista unico.
Puoi fare perfettamente bellissime applicazioni.
Clonazione dell’interfaccia fruitore di Tinder
Abbiamo in precedenza concepito un proponimento definito expo-tinder .
In fare il progetto, digita attuale:
pubblicazione io verso adempiere il ipocrita iOS. Attuale eseguira istintivamente il impostore iOS di nuovo qualora non e esteso.
stampa un durante attuare l’emulatore Android. Popolare giacche l’emulatore deve capitare installato e incominciato in passato avanti di scrivere un . Diversamente generera un fallo nel ultimo.
Dovrebbe mostrarsi mezzo corrente:
Trasporto
La configurazione iniziale e precisamente installata react-navigation verso noi. La viaggio nella cartoncino inferiore funziona anche verso impostazione predefinita affinche abbiamo esperto tabs nella seconda periodo di salone init . Puoi verificarlo toccando Collegamenti e impostazioni.
Il screens/ raccoglitore e incaricato del incluso visualizzato dal momento che le schede vengono modificate.
Adesso, rimuovi affatto il posato di HomeScreen.js e sostituirli unitamente i seguenti:
Allora dovresti controllare l’interfaccia consumatore aggiornata:
Ora adatteremo le schede in inizio all’applicazione cosicche creeremo. In il nostro clone di Tinder, avremo quattro schermate: domicilio, Scelte migliori, fianco, e Messaggi.
Possiamo uccidere pienamente LinksScreen.js e SettingsScreen.js dal screens/ raccoglitore. Aspetto affinche la nostra app si interrompe, insieme una schermata rossa inondazione di errori.
Corrente motivo ci siamo collegati ad esso nel file navigation/ raccoglitore. Ampio MainTabNavigator.js nel navigation/ dossier. Ora e similare a codesto:
Rimuovi i riferimenti per LinksStack e SettingsStack completamente, ragione non abbiamo stento di queste schermate nella nostra app. Dovrebbe parere mezzo corrente:
Vai su e crea TopPicksScreen.js , ProfileScreen.js e MessagesScreen.js all’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 , perche avremo stento di icone personalizzate nella nostra foglietto di trasporto sopra diminuito. Al presente e somigliante per questo:
L’unica atto che stiamo facendo in questo luogo e allegare un file Icon prop almeno possiamo ricevere diversi tipi di file Icon anzi di solo Ionicons . Ora, 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 expo / vector-icons directory. Aggiunge ciascuno strato di tollerabilita circa @ oblador / react-native-vector-icons agire per mezzo di il sistema di asset esposizione.
TabBarIcon.js dovrebbe ora paragonare verso questo:
Ora possiamo snodarsi il file Icon protezione verso quanto su TabBarIcon componente durante sistemare diverse icone.
Dobbiamo correggere l’implementazione di HomeStack nel MainTabNavigator.js classificatore da unire mediante il inesperto TabBarIcon complesso Icon appoggio.
Cambiare il HomeStack implementazione variabile per corrente: