Accentsconagua
Share
In questa serie, imparerai come utilizzare React Native per creare layout di pagina comunemente usati nelle app mobili. I layout che creerai non saranno funzionali, ma l'obiettivo principale di questa serie è quello di sporcarti le mani nel disporre i contenuti nelle tue app React Native.
Se sei nuovo nello sviluppo di app o stili React Native in generale, consulta il mio precedente tutorial:
Per seguire questa serie, ti sfido a provare a ricreare ogni schermo da solo, prima di leggere le mie istruzioni passo passo nel tutorial. Non trarrai molto beneficio da questo tutorial solo leggendolo! Prova prima prima di cercare le risposte qui. Se riesci a renderlo simile alla schermata originale, confronta la tua implementazione con la mia. Quindi decidi tu stesso quale è meglio!
In questa seconda parte della serie, creerai la seguente pagina del calendario:
Le app di calendario vengono utilizzate per tenere traccia degli eventi e degli appuntamenti aggiunti dall'utente. Troverai diverse varianti in natura, ma la maggior parte di esse avrà gli stessi elementi di un calendario fisico: il mese e l'anno corrente, i giorni del mese e gli eventi o gli appuntamenti aggiunti dall'utente.
Ecco alcuni esempi di questo tipo di layout:
Il primo passo, ovviamente, è quello di creare un nuovo progetto React Native:
reagire-native init react-native-common-screens
Una volta impostato il progetto, apri il index.android.js file e sostituire il codice predefinito con il seguente:
import React, Component da 'react'; importare AppRegistry da 'react-native'; importare il calendario da './src/pages/Calendar'; Esporta la classe predefinita ReactNativeCommonScreens estende Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Creare un src / pagine cartella e creare a calendar.js file al suo interno.
Avrai anche bisogno del reagiscono-nativo-vector-icons pacchetto. Questo è specificamente utilizzato per le icone di navigazione e altre icone che saranno necessarie nella pagina.
npm install --save react-native-vector-icons
Apri il Android / app / build.gradle file e aggiungi un riferimento al pacchetto:
dipendenze // resto delle dipendenze sono qui nel progetto di compilazione più in alto (': react-native-vector-icons') // aggiungi questoFai lo stesso con il Android / settings.gradle file aggiungendo quanto segue in basso:
include ': react-native-vector-icons' project (': react-native-vector-icons'). projectDir = new File (rootProject.projectDir, '... / node_modules / react-native-vector-icons / android')Aperto Android / app / src / main / java / com / reagire-native-comuni-schermi / MainApplication.java e importa il pacchetto:
import java.util.Arrays; import java.util.List; import com.oblador.vectoricons.VectorIconsPackage; //Aggiungi questo
Infine, inizializza il pacchetto:
@Override Elenco protettogetPackages () return Arrays. asList (new MainReactPackage (), nuovo VectorIconsPackage () // aggiungi questo);
Ok, ora che hai provato a codificare il layout da solo (no imbrogli, giusto?), Ti mostrerò come ho realizzato la mia implementazione.
All'inizio pensavo che sarebbe stato il più difficile da implementare, ma credetemi, non è poi così complicato finché conoscete già le basi. Ci sono un paio di opportunità qui per usare il codice JavaScript per aiutare con il rendering.
Inizia includendo tutti i componenti e i pacchetti di cui avrai bisogno:
import React, Component da 'react'; import StyleSheet, Text, View, ScrollView da 'react-native'; icona di importazione da 'react-native-vector-icons / FontAwesome'; import range da 'lodash'; pulsante di importazione da '... / components / Button';
Questa volta c'è un nuovo pacchetto che non hai ancora installato, e questo è lodash. Non avrai davvero bisogno dell'intera biblioteca di lodash, solo del gamma funzione. Questo viene utilizzato per generare una serie di numeri in base a un intervallo specifico. È possibile installare solo questa funzione eseguendo installazione npm --save lodash.range sul tuo terminale.
Aggiungi il codice boilerplate per la creazione di pagine:
export default class Calendar extends Component render () return (... ); const styles = StyleSheet.create (container: flex: 1);
L'intestazione contiene tre elementi: il pulsante per tornare alla pagina precedente, il titolo della pagina corrente e il testo che mostra una rappresentazione umana della data attualmente selezionata.
Calendario Oggi
intestazione ha un flexDirection di riga in modo che ciascuno header_item è impilato orizzontalmente. Lo stesso flettere il valore viene assegnato a ciascuno di essi in modo che consumino quantità uguali di spazio. text_center e text_right sono usati per allineare il testo all'interno di quelli header_items al centro e a destra. Questo è fatto perché di default sono allineati sul lato sinistro del loro contenitore.
header: backgroundColor: '# 329BCB', flexDirection: 'row', padding: 20, header_item: flex: 1, header_button: flexDirection: 'row', text_center: textAlign: 'center', text_right : textAlign: 'right', header_text: color: '#fff', fontSize: 20, bold_text: fontWeight: 'bold',
Una volta che gli stili sono stati aggiunti, dovrebbe ora assomigliare a questo:
Il prossimo è il calendario attuale, che è diviso in tre parti: l'intestazione, i giorni della settimana e i giorni di calendario:
... ... ...
L'intestazione del calendario consente all'utente di modificare l'anno e il mese.
Ci sono almeno due modi in cui questo può essere implementato. Il primo metodo consiste nel trattare ogni elemento come un singolo oggetto e applicarlo justifyContent: 'spazio-tra' al suo contenitore. Il secondo metodo consiste nel raggruppare tutti gli elementi che hanno a che fare con l'anno e raggruppare quelli che hanno a che fare con il mese.
Il secondo metodo è quello che viene applicato di seguito. Semanticamente, questo ha molto più senso perché il pulsante per navigare indietro di un anno, l'anno stesso e il pulsante per navigare in avanti sono tutti correlati, quindi puoi trattarli come una cosa singola mettendoli nello stesso contenitore. Lo stesso vale per i controlli del mese.
2013 novembre
Da lì, puoi applicare la stessa tecnica a quei due gruppi di componenti nella stessa riga. Per aggiungere spazi tra i due pulsanti (avanti e indietro) e l'etichetta, usiamo justifyContent: 'spazio-tra'. Noi usiamo alignItems: 'center' per spingere tutti gli elementi al suo interno verso il centro. Infine, aggiungiamo il padding sinistro e destro per aggiungere più spazio tra i due gruppi.
calendar_header: flexDirection: 'row', calendar_header_item: flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, paddingRight: 40, paddingLeft: 40, calendar_header_text: fontWeight: 'bold', fontSize: 20,
Prossimi sono i giorni della settimana. Usiamo una funzione per renderle perché è meglio usare del codice JavaScript per rendere tutti gli elementi.
this.renderWeekDays ()
Quindi invece di avere sette vista o Testo componenti rendering ogni giorno della settimana, si può semplicemente avere un array contenente i giorni della settimana. È quindi possibile iterare in quei giorni utilizzando il Array.map () funzione. Per ogni iterazione, rendere a Testo componente che mostra il giorno.
renderWeekDays () let weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; return weekdays.map ((day) => return (Day.toUpperCase () ); );
Si noti che nel codice sopra, il toUpperCase () la funzione viene utilizzata per convertire tutte le lettere di ogni giorno in maiuscolo. Reagire Nativo non viene con il text-transform Proprietà CSS, quindi questo è l'unico modo per ottenere lettere maiuscole oltre a utilizzare manualmente le stringhe maiuscole.
Ecco lo stile per l'intestazione del calendario:
calendar_weekdays_text: flex: 1, color: '# C0C0C0', textAlign: 'center',
I giorni di calendario utilizza anche una funzione per il rendering dei giorni:
this.renderWeeks ()
Il renderWeeks () la funzione usa il gamma() funzione in lodash per generare una matrice contenente i giorni dall'ultimo mese e i giorni del mese corrente. Questi due array vengono quindi uniti.
Tuttavia, non è possibile utilizzare direttamente la matrice risultante come origine dati per i giorni di calendario. Questo perché se si scorre semplicemente gli elementi e si genera a Testo componente per ogni giorno, non ci sarà alcuna distinzione tra ogni settimana. Sai già che per rendere ogni giorno del calendario in linea, devi applicare flexDirection: 'row' al suo contenitore. Quindi applicarlo a un singolo contenitore comporterebbe l'inserimento di tutti i giorni di calendario in un'unica riga.
Ciò significa che è necessario disporre di un contenitore separato per ogni settimana. La domanda è come. Ancora una volta, ci sono almeno due modi per farlo.
Il primo metodo consiste nell'avere una memoria variabile quanti giorni sono attualmente emessi e quindi aggiungere un'istruzione condizionale che renderà un'apertura 0 e una chiusura ogni volta che lo è 7. Una volta è 7, resettarlo a 0. Questo è il metodo più diretto.
Ma userò un metodo diverso qui. Sotto, il getWeeksArray () la funzione è utilizzata per implementarlo. Questa funzione accetta l'array di giorni e li raggruppa in array contenenti sette giorni ciascuno. Da lì, puoi scorrere tutti gli array per rendere il contenitore della settimana. Quindi, per ciascuna iterazione, si eseguono nuovamente i giorni all'interno della settimana per visualizzare i giorni. Questo è ciò che renderDays () la funzione fa.
renderWeeks () let past_month_days = range (27, 31); let this_month_days = range (1, 30); let days = past_month_days.concat (past_month_days, this_month_days); let grouped_days = this.getWeeksArray (days); return grouped_days.map ((week_days, index) => return (this.renderDays (days_days) ); );
Ecco il getWeeksArray () funzione:
getWeeksArray (days) var weeks_r = []; var seven_days = []; var count = 0; days.for Any ((day) => count + = 1; seven_days.push (day); if (count == 7) weeks_r.push (seven_days) count = 0; seven_days = [];); ritorno settimane_r;
Ed ecco il renderDays () funzione:
renderDays (week_days) return week_days.map ((day, index) => return ( ); );
Aggiungi lo stile per ogni settimana (week_days) e giorno (giorno e day_text):
week_days: flexDirection: 'row', day: flex: 1, backgroundColor: '# F5F5F5', padding: 17, margin: 2, day_text: textAlign: 'center', color: '# A9A9A9', fontSize : 25,
Segue la nota aggiunta dall'utente per il giorno attualmente selezionato e la data e l'ora selezionate. Ancora una volta, è meglio raggruppare gli elementi in base al loro scopo piuttosto che come vengono inseriti nella pagina. Certamente tutti questi elementi sono correlati, quindi li inseriremo nello stesso contenitore. Ma a ben guardare, inizierai a vedere che puoi raggrupparli ulteriormente: la nota effettiva e la data selezionata. Con questo in mente, ecco il markup con cui ti ritroverai:
In sella alla mia bici in giro per il quartiere. 20:23 14 GIOVEDI
La data selezionata occupa meno spazio della nota, quindi devi applicarne una più grande flettere valore alle note. flex: 3 e flex: 1 sono usati in questo caso, il che significa che le note consumano 3/4 dello spazio disponibile e la data selezionata consuma 1/4. Puoi anche usare i decimali (0.75 e 0.25) se questo ha più senso per te. L'importante è scegliere uno standard e attenersi ad esso. alignItems: 'flex-end' è usato su notes_selected_date in modo che tutti i suoi figli siano allineati a destra. Questo è necessario perché di default sono allineati a sinistra.
note: marginTop: 10, padding: 20, borderColor: '# F5F5F5', borderTopWidth: 1, borderBottomWidth: 1, flexDirection: 'row', backgroundColor: '#FAFAFA', note_notes: flex: 3, notes_text: fontSize: 18, notes_selected_date: flex: 1, alignItems: 'flex-end', flexDirection: 'column', small_text: fontSize: 15, big_text: fontSize: 50, fontWeight: 'bold', in linea: flexDirection: 'row',
Infine, aggiungiamo i log, che sono molto simili a quelli del tutorial precedente, quindi lo lascerò a voi per capire come viene realizzato il layout!
Crea una nuova voce Giovedì 14 novembre
Ecco gli stili:
logs: flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 20, borderColor: '# F5F5F5', borderBottomWidth: 1, log_text: fontSize: 25, log_subtext: fontSize: 18
Questo è tutto! In questo tutorial hai creato una pagina del calendario. Abbiamo creato un buon layout di calendario per un'app e ti ho mostrato come utilizzare il codice JavaScript per compensare alcune delle limitazioni di Flexbox.
Come hai visto, avevamo bisogno di un modo per limitare il numero di giorni consecutivi a soli sette giorni. Flexbox non ha un modo per specificarlo, quindi abbiamo usato JavaScript per ricostruire l'array originale di giorni in modo tale da essere divisi in gruppi contenenti sette giorni ciascuno. Da lì, tutto ciò che dovevamo fare era avvolgere ogni gruppo dentro a vista e quindi applicare flexDirection: 'row' per rendere ciascuno di loro rendere nella propria fila.
In un prossimo tutorial, imparerai come implementare il layout comunemente usato nelle pagine della galleria. Nel frattempo, dai un'occhiata ad alcuni dei nostri altri tutorial su React Native e Flexbox.
