Accentsconagua
Share
Bentornati in questa serie, in cui apprendi 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 ultimo tutorial della serie, creerai la seguente pagina di feed di notizie:
I layout dei feed di notizie vengono utilizzati per presentare le informazioni in modo che possano essere facilmente scansionate. Il più delle volte è presentato in un formato elenco con il titolo, estratto e opzionalmente un'immagine di anteprima che rappresenta ogni notizia.
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 notizie da './src/pages/News'; Esporta la classe predefinita ReactNativeCommonScreens estende Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Creare un src / pagine cartella e creare a News.js file al suo interno.
Avrai anche bisogno del reagiscono-nativo-vector-icons pacchetto. Questo è specificamente utilizzato per l'icona posteriore nell'intestazione.
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 (non barare, giusto?) Ti mostrerò come ho realizzato la mia implementazione.
Devi aver notato la tendenza ormai. Li ho sistemati secondo difficoltà - o almeno secondo quanto ho trovato difficile! Quindi questo schermo finale è fondamentalmente il grande capo tra gli altri schermi che hai creato finora. Non preoccuparti, però, dato che ti guiderò passo dopo passo.
Avrai bisogno di alcune immagini per l'immagine di anteprima di ogni notizia. Ho aggiunto alcune immagini nel repository che puoi usare se vuoi.
Inizia aggiungendo il codice boilerplate:
import React, Component da 'react'; import StyleSheet, Text, View, ScrollView, Image da 'react-native'; icona di importazione da 'react-native-vector-icons / FontAwesome'; pulsante di importazione da '... / components / Button'; import NewsItem da '... / components / NewsItem';
Questa volta c'è un nuovo componente chiamato NewsItem (src / componenti / NewsItem). Come suggerisce il nome, è usato per rendere ogni notizia. Ci torneremo più tardi, ma prima diamo un'occhiata al costruttore() funzione. Proprio come la schermata della galleria in precedenza, questo utilizza lo stato per memorizzare l'origine dati per le notizie. I titoli e i riassunti provengono dal New York Times, ma le immagini provengono da Google Immagini (e sono etichettate per essere riutilizzate dai rispettivi proprietari).
costruttore (oggetti di scena) super (oggetti di scena); this.state = news_items: [pretext: 'Grey Matter', titolo: 'Art Makes You Smart', riassunto: 'Le visite al museo aumentano i punteggi dei test, generano responsabilità sociale e aumentano l'apprezzamento delle arti da parte degli studenti.', immagine: require ('... /images/pink.jpg'),, pretext: ", titolo: 'Tensione e difetti prima del crash del sito web di salute', riassunto: 'Interviste e documenti offrono nuovi dettagli su come il lancio del presidente Obama \' s programma di firma trasformato in una grande umiliazione. ', image: require (' ... /images/beach.jpg '), pretext: ", titolo: '36 Hours in Charleston, SC', riassunto: 'Le folle sono più sottili e le temperature sono miti durante l'inverno in questo ... ', immagine: require (' ... /images/rails.jpg '),]; Il contenuto è diviso in tre parti: l'intestazione, il testo dell'istruzione e le notizie. L'intestazione è molto simile all'intestazione della schermata del calendario precedente; l'unica differenza è che invece di tre, ci sono solo due elementi visibili. (Se vuoi fare un ripasso su come è stata fatta la schermata del calendario, vai avanti e leggi questo tutorial.)
Dico "visibile" perché ci sono in realtà tre elementi: l'ultimo è appena nascosto! Ciò consente un facile centraggio del testo nel mezzo. Se hai solo due elementi nell'intestazione, è difficile capire come dividere lo spazio tra i due elementi e avere ancora quello centrale che appare centrato. Ma se hai tre elementi, ognuno può avere lo stesso flettere valore, e puoi semplicemente usarlo textAlign posizionare il testo o alignItems posizionare vista componenti.
render () return (); La maggior parte delle e-mail SWIPE ACROSS SEZIONI this.renderNews ()
Il renderNews () la funzione è quella che scorre attraverso tutte le notizie nello stato e le rende usando il NewsItem componente.
renderNews () return this.state.news_items.map ((news, index) => return);
Il prossimo è il codice per il NewsItem componente. Inizia aggiungendo il codice del componente React boilerplate. Come hai visto prima, questo componente accetta il chiave, indice, e notizia come i suoi oggetti di scena. Hai davvero bisogno del indice e notizia. chiave è solo il modo React Native di identificare in modo univoco ogni riga in una lista. Devi fornirlo ogni volta che lo usi Array.map per il rendering; altrimenti, si lamenterà.
Quando si usano componenti funzionali, gli oggetti di scena vengono passati come un singolo argomento. Sotto, i singoli oggetti di scena vengono estratti usando un compito destrutturante, quindi notizie, indice fondamentalmente estrae il notizia e indice proprietà dai puntelli. Da lì puoi ottenere il numero da rendere.
import React, Component da 'react'; import StyleSheet, Text, View, Image da 'react-native'; pulsante di importazione da './Button'; const NewsItem = (news, index) => let number = (index + 1) .toString (); ritorno (… );
Se guardi lo screenshot di prima, puoi vedere che ogni notizia può essere divisa in due gruppi: uno che visualizza il testo delle notizie (numero, titolo e estratto) e uno che visualizza l'immagine della funzione.
Questo risolve il problema con l'immagine caratteristica poiché è solo un elemento. Ma per il testo delle notizie, devi ancora dividerlo ulteriormente. Come avrai notato, il numero è nella stessa posizione anche se il titolo ha un pretesto (ad esempio "Materia grigia"). Il pretesto ha anche uno stile diverso dal titolo e il numero.
Utilizzando questa conoscenza, è possibile dedurre che il numero, il pretesto e il titolo non dovrebbero essere raggruppati in un unico contenitore. Inoltre, il pretesto, il titolo e l'estratto sembrano come se fossero impilati verticalmente in modo da poterli inserire in un singolo contenitore. Solo il numero dovrebbe essere portato fuori. Con quello, arriverai con il seguente markup:
Il getPretext () la funzione ti consente di eseguire il rendering condizionatamente a Testo componente solo quando una notizia ha un pretesto.
function getPretext (news) if (news.pretext) return (News.pretext );
Ecco il onPress funzione. Tutto ciò che fa è avvisare il titolo delle notizie, ma in una vera app questo dovrebbe passare all'articolo vero e proprio:
funzione onPress (news) alert (news.title);
A questo punto, la pagina sarà ora simile a questa:
Ora, aggiungi i seguenti stili alla pagina Notizie:
const styles = StyleSheet.create (container: flex: 1, header: flexDirection: 'row', backgroundColor: '#FFF', padding: 20, justifyContent: 'space-between', borderBottomColor: '# E1E1E1' , borderBottomWidth: 1, header_button: flex: 1,, spazio bianco: flex: 1, back_button: flexDirection: 'row', alignItems: 'center', back_button_label: color: '# 397CA9', fontSize : 20,, istruzione: alignSelf: 'center', marginTop: 5, instruction_text: color: '# A3A3A3', header_text: flex: 1, alignSelf: 'center', header_text_label: fontSize: 20 , textAlign: 'center', news_container: flex: 1, flexDirection: 'column',);
Non ti guiderò più su ciò che fa ogni riga di codice, dal momento che in pratica applica gli stessi concetti appresi nelle precedenti esercitazioni di questa serie. Ecco come apparirà la pagina una volta applicati gli stili di cui sopra:
Successivamente, aggiungi gli stili per ogni notizia. Ogni news_item ha un flexDirection di riga in modo che il testo delle notizie e l'immagine in primo piano siano tutti su un'unica riga. news_text occupa i due terzi dello spazio disponibile, mentre news_photo occupa lo spazio rimanente.
const styles = StyleSheet.create (news_item: flex: 1, flexDirection: 'row', paddingRight: 20, paddingLeft: 20, paddingTop: 30, paddingBottom: 30, borderBottomWidth: 1, borderBottomColor: '# E4E4E4', news_text : flex: 2, flexDirection: 'row', padding: 10,);
Successivamente, è necessario aggiungere lo stile per risolvere il problema con il testo che si sovrappone all'immagine di anteprima. Puoi farlo assegnando a flettere valore per i bambini del news_text. UN flettere il valore è già stato assegnato a news_text, ma dal momento che a vista è stato utilizzato al suo interno, è necessario anche assegnare un flettere valore a quelli in modo che non vadano oltre i limiti del loro genitore vista.
Assegneremo un valore flessibile di 0.5 al numero, mentre TEXT_CONTAINER avrà un valore di 3. Con questi valori, il TEXT_CONTAINER occuperà sei volte tanto spazio quanto il numero.
numero: flex: 0.5,, text_container: flex: 3,
Ora tutto ciò che devi fare è aggiungere i tocchi finali per modellare il testo:
pretext: color: '# 3F3F3F', fontSize: 20, titolo: fontSize: 28, fontWeight: 'bold', colore: '# 000', fontFamily: 'georgia', foto_foto: flex: 1, justifyContent : 'center', alignItems: 'center', foto: width: 120, height: 120
E non dimenticare di esportare il componente!
esporta predefinito NewsItem;
Questo è tutto! In questa parte finale di questa serie, hai imparato come implementare il layout comunemente usato nelle pagine di notizie. Questo tutorial ha riunito tutte le cose che hai imparato nelle parti precedenti della serie. Hai usato entrambi flexDirection: 'row' e flexDirection: 'column' per completare gli stili per ogni notizia. Hai anche usato le tue conoscenze per allineare le immagini per l'immagine di anteprima.
Se hai provato a implementare questi layout da solo, non è riuscito, e poi hai provato di nuovo, dovresti già avere competenze sufficienti per implementare qualsiasi tipo di layout. Puoi applicare le cose che hai imparato qui per implementare anche i layout complessi che vedi comunemente nelle app popolari. Se vuoi fare più pratica, prova a ricreare i layout che vedi nelle app più popolari come Facebook o YouTube.
In che modo la mia soluzione è stata paragonata alla tua? Fateci sapere nel forum di discussione qui sotto. E nel frattempo, dai un'occhiata ad altri nostri tutorial su React Native e Flexbox.
