Accentsconagua
Share
In questa serie, stai imparando come utilizzare React Native per creare layout di pagina comunemente usati nelle app mobili. I layout che stai creando non saranno funzionali, invece, 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 questo terzo post della serie, creerai la seguente pagina della galleria fotografica:
Le gallerie sono spesso utilizzate per visualizzare una raccolta di contenuti correlati in modo tale da presentare solo le informazioni necessarie. Il più delle volte questo include una foto, un titolo e altre informazioni pertinenti.
Ecco alcuni esempi di questo tipo di layout utilizzato in natura:
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 la galleria da './src/pages/Gallery'; Esporta la classe predefinita ReactNativeCommonScreens estende Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Creare un src / pagine cartella e creare a Gallery.js file al suo interno.
Avrai anche bisogno del reagiscono-nativo-vector-icons pacchetto. Questo è specificamente utilizzato per le icone nel footer.
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.
A differenza delle due pagine precedenti, la pagina della galleria ha bisogno di alcune immagini che serviranno da contenuto principale. Puoi andare su Google e cercare immagini o scaricare le immagini dal repository GitHub. Tutte le immagini che ho usato sono etichettate per essere riutilizzate dai rispettivi proprietari, quindi puoi usarle liberamente se vuoi. Una volta che hai le immagini, salvale all'interno src / images directory. A causa del modo in cui verranno disposte le immagini, tutte dovrebbero avere dimensioni uguali.
Inizia creando il file (src / pages / Gallery.js) e aggiungere il codice boilerplate:
import React, Component da 'react'; import StyleSheet, View, ScrollView, Image, da 'react-native'; icona di importazione da 'react-native-vector-icons / FontAwesome'; pulsante di importazione da '... / components / Button'; Esporta la classe predefinita Galleria Estende Component ...
Questa pagina ha bisogno di a costruttore() funzione in cui si definiscono i percorsi delle immagini che si desidera utilizzare. In React Native, il modo in cui ti riferisci alle immagini che si trovano nella tua directory di lavoro è richiedendole proprio come faresti con un modulo JavaScript. È anche importante notare che non è possibile avere percorsi di immagine generati dinamicamente, quindi è necessario fornire manualmente il percorso effettivo.
costruttore (oggetti di scena) super (oggetti di scena); this.state = photos: [label: 'beach', src: require ('... /images/beach.jpg'), label: 'bridge', src: require ('... /images/bridge.jpg '), label:' fields ', src: require (' ... /images/fields.jpg '), label:' mountains ', src: require (' ... /images/mountains.jpg '), label: 'sunflower', src: require ('... /images/sunflower.jpg'), label: 'sunset', src: require ('... /images/sunset.jpg'), label: ' lake ', src: require (' ... /images/lake.jpg '), label:' nature ', src: require (' ... /images/nature.jpg '), label:' pink ', src : require ('... /images/pink.jpg'), label: 'rails', src: require ('... /images/rails.jpg'),]; Non è necessario definirli nello stato poiché i valori non cambieranno. È possibile definirli in un file separato, importarlo, assegnarlo a una variabile e quindi utilizzarlo direttamente. Ma per semplicità, ho deciso di mettere tutto nello stato.
Dentro il render () metodo, hai intenzione di rompere la tendenza di avvolgere tutto dentro a ScrollView componente, perché il componente tab nella parte più bassa dello schermo dovrebbe avere una posizione fissa. Ciò significa che anche se le foto superano l'altezza disponibile, le schede dovrebbero rimanere al loro posto. Per ottenere ciò, utilizzare a vista componente per avvolgere tutto e solo avvolgere la raccolta di foto in a ScrollView. Questo ti consente di applicare lo scroll solo al contenitore della raccolta di foto:
render () return (this.renderGallery () );
Ora puoi iniziare a vedere uno schema qui. Ogni volta che è necessario utilizzare il codice JavaScript all'interno del render () funzione, dovresti creare una funzione separata per contenere quel codice, invece di metterlo direttamente dentro render () funzione. Questo lo mantiene asciutto e pulito.
Ora passiamo allo stile. Sebbene a ScrollView non è usato per avvolgere tutto questa volta, è importante notare che devi ancora fornire flex: 1 al contenitore principale in modo che consumi l'intero spazio disponibile.
contenitore: flex: 1, flexDirection: 'column', gallery: flexDirection: 'column', tabs: flexDirection: 'row', backgroundColor: '# 333', padding: 20, scheda: flex: 1, icona: textAlign: 'center',
Il renderGallery () la funzione è molto simile al renderWeeks () funzione che abbiamo usato nel tutorial precedente, che abbiamo utilizzato per il rendering di una pagina del calendario. Se vuoi un ripasso su come funziona, vai avanti e leggi il tutorial precedente sulle pagine del calendario. Quello che devi sapere è questo resizeMode è applicato al Immagine. In questo caso, è impostato su copertina, che rende l'immagine occupare l'intero spazio disponibile del suo contenitore, pur mantenendo le sue proporzioni. Questo fa sì che l'immagine si gonfia leggermente per i dispositivi con schermi più grandi se l'immagine originale è più piccola.
renderGallery () var count = 0; var previous_item = "; var pairs = this.getPairsArray (this.state.photos); return pairs.map ((item, index) => return (); );
Ecco il getPairsArray () funzione:
getPairsArray (foto) var pairs_r = []; var pairs = []; var count = 0; photos.forEach ((item) => count + = 1; pairs.push (item); if (count == 2) pairs_r.push (pairs) count = 0; pairs = [];); return pairs_r;
Infine, ecco lo stile per ogni riga (articolo) e foto (foto). Notare l'uso di flex: 1 sulla foto reale. Questo è fatto perché il Immagine il componente stesso è il suo contenitore. Vuoi che il contenitore stesso occupi metà dello spazio disponibile per ogni riga, ecco perché a flettere la proprietà dovrebbe essere assegnata. Se questo non viene fatto, verranno consumate solo le dimensioni necessarie per la foto e il file resizeMode che hai aggiunto prima non avrà nemmeno un effetto.
articolo: flex: 1, flexDirection: 'row',, photo: flex: 1
Questo è tutto! In questo tutorial hai imparato come implementare il layout per una pagina della galleria. Ci siamo concentrati su come gestire le immagini quando si tratta di creare le tue app React Native. Spesso devi usare una combinazione di flettere e resizeMode per far fluire le immagini nel modo in cui le vuoi. In che modo la mia soluzione è stata paragonata alla tua? Fateci sapere nel forum di discussione qui sotto.
In un prossimo tutorial, imparerai come implementare il layout comunemente usato nelle app di notizie. Nel frattempo, dai un'occhiata ad alcuni dei nostri altri tutorial su React Native e Flexbox!
