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 prima parte della serie, creerai la seguente pagina di accesso:
La pagina di accesso è comunemente utilizzata come pagina iniziale per le app che richiedono agli utenti di avere un account.
Ecco alcuni esempi di questo tipo di layout 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'; import Login da './src/pages/Login'; Esporta la classe predefinita ReactNativeCommonScreens estende Component render () return (); AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Creare un src / pagine cartella e creare a Login.js file al suo interno.
Avrai anche bisogno del reagiscono-nativo-vector-icons pacchetto. Questo è specificamente utilizzato per rendere l'icona di Facebook per il pulsante di accesso di Facebook.
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. Apri il src / pages / Login.js file e importa le cose che ti serviranno:
import React, Component da 'react'; import StyleSheet, Text, View, TextInput, ScrollView da 'react-native'; icona di importazione da 'react-native-vector-icons / FontAwesome';
A parte i componenti di React predefiniti e il reagiscono-nativo-vector-icons pacchetto, dovrai includere anche tre componenti personalizzati:
contenitore di importazione da '... / components / Container'; pulsante di importazione da '... / components / Button'; etichetta di importazione da '... / components / Label';
Il primo è il Contenitore (src / componenti / Container.js), il cui compito è quello di aggiungere un margine inferiore a tutto ciò che avvolge. Sembra banale, e sì, puoi davvero usarlo vista e aggiungi gli stessi stili ogni volta che vuoi usarlo. Il vantaggio che offre è che non è necessario applicare gli stessi stili a a vista più volte e consente inoltre di riutilizzare il componente ogni volta che è necessario aggiungere un margine inferiore a qualcosa.
import React, Component da 'react'; import StyleSheet, View da 'react-native'; const Container = (props) => return (props.children ); const styles = StyleSheet.create (labelContainer: marginBottom: 20); esportare il contenitore predefinito;
Il Pulsante componente (src / componenti / Button.js), come suggerisce il nome, è usato per creare pulsanti. Se presente, sputa ogni componente figlio aggiunto al suo interno. Altrimenti, emette a Testo componente che mostra il testo all'interno del pulsante. Viene aggiunto anche uno stile predefinito, ma non verrà utilizzato se noDefaultStyles è presente nei puntelli. Anche gli stili di pulsanti unici trasmessi dagli oggetti di scena sono facoltativi.
import React, Component da 'react'; import StyleSheet, Text, TouchableHighlight, da 'react-native'; const Button = (props) => function getContent () if (props.children) return props.children; ritornoProps.label ritorno (getContent () ); const styles = StyleSheet.create (button: alignItems: 'center', justifyContent: 'center', padding: 20,); pulsante predefinito di esportazione;
Infine, c'è il Etichetta componente (src / componenti / Label.js), che è fondamentalmente solo un Testo componente con alcuni stili predefiniti.
import React, Component da 'react'; import StyleSheet, Text, da 'react-native'; const Label = (props) => return (Props.text ); const styles = StyleSheet.create (textLabel: fontSize: 20, fontWeight: 'bold', fontFamily: 'Verdana', marginBottom: 10, color: '# 595856'); esportare l'etichetta predefinita;
Ora puoi passare alla pagina di accesso effettiva. Dentro il render () metodo, avvolgi tutto in a ScrollView componente. Questo è molto importante se vuoi che la tua app sia in grado di soddisfare tutti i tipi di dimensioni del dispositivo e gli orientamenti dello schermo.
Il più delle volte, non importa quanto piccola altezza pensi che il tuo contenuto sta per consumare, ci sarà sempre un dispositivo che non sarà in grado di visualizzarlo completamente. Quindi la necessità di barre di scorrimento per lo scorrimento del contenuto.
Esporta la classe predefinita Login estende Component render () return (... );
Successivamente, inizializza gli stili:
const styles = StyleSheet.create ();
Applicare i seguenti stili al ScrollView. flexDirection è facoltativo, ma è una buona pratica definirlo esplicitamente in modo che i futuri sviluppatori possano sapere esattamente come viene presentato il contenuto principale dell'app semplicemente dando uno sguardo al codice.
scroll: backgroundColor: '# E1D7D8', padding: 30, flexDirection: 'column',
Guardando lo screenshot di prima, il primo pezzo di contenuto che vuoi aggiungere è quello in alto, e quello è il pulsante della password dimenticata. Si noti che il onPress oggetti di scena viene fornito perché il underlayColor non verrà effettivamente applicato se non viene fornita alcuna funzione per quando viene premuto il pulsante.
Gli stili usati per questo sono piuttosto auto-esplicativi tranne per il alignSelf: 'flex-end'. Questo dice a React Native di posizionare l'elemento alla fine della linea corrente. alignSelf è l'equivalente di alignItems per specificare l'allineamento dell'elemento stesso e non i suoi figli. utilizzando flex-end ti consente di ottenere un effetto simile a quello di float: giusto in CSS.
label: color: '# 0d8898', fontSize: 20, alignRight: alignSelf: 'flex-end',
Successivamente ci sono i due campi di testo insieme alle loro etichette.
A questo punto, la pagina dovrebbe ora apparire come questa:
Ecco lo stile per il l'immissione di testo:
textInput: height: 80, fontSize: 30, backgroundColor: '#FFF',
Ora potresti aver iniziato a notare perché il Contenitore componente è importante. Ti permette di incapsulare gli stili di default in modo che non finiscano per ripeterli in ogni file. Questo è un principio di base di React: devi sempre cercare il riutilizzo dei componenti ogni volta che vedi un'opportunità.
Il pulsante per accedere a Facebook è leggermente diverso dai pulsanti creati in precedenza. Questa volta ha del contenuto al suo interno che visualizza un'icona insieme ad un testo. Questi sono aggiunti al posto di etichetta oggetti di scena al fine di personalizzare ulteriormente il contenuto del pulsante.
Una volta che è stato aggiunto, la pagina dovrebbe ora assomigliare a questa:
Aggiungi gli stili per il pulsante di accesso di Facebook:
transparentButton: marginTop: 30, borderColor: '# 3B5699', borderWidth: 2, buttonBlueText: fontSize: 20, color: '# 3B5699', buttonBigText: fontSize: 20, fontWeight: 'bold', inline: flexDirection: 'row',
Non c'è davvero nulla che valga la pena di notare qui tranne styles.inline, che viene usato come classe helper per raggruppare orizzontalmente tutti gli elementi al suo interno. Questo raggiunge un effetto simile a quello dell'uso in HTML per avvolgere il testo che si desidera visualizzare in linea. In CSS, questo può essere ottenuto usando entrambi display: in linea o display: blocco in linea.
Gli ultimi elementi su questo schermo sono i Registrati e Annulla pulsanti. Hanno bisogno di più spazio sopra di loro rispetto agli altri elementi, quindi è meglio avvolgerli in un contenitore (footer) e applicare marginTop ad esso. Questo ha più senso che dichiarare un nuovo stile solo per questi pulsanti.
Infine, aggiungi lo stile per il Registrati e Annulla pulsanti:
buttonWhiteText: fontSize: 20, color: '#FFF',, buttonBlackText: fontSize: 20, color: '# 595856', primaryButton: backgroundColor: '# 34A853', footer: marginTop: 100
Infine, non dimenticare di definire il codice che verrà eseguito quando si preme uno dei pulsanti!
premi () // esegui qualsiasi codice qui
Questo è tutto! In questo tutorial hai creato con successo una pagina di accesso usando la tua conoscenza Flexbox. Lungo il percorso, hai anche imparato a usare una libreria di terze parti chiamata React Native Vector Icons per aggiungere facilmente icone nella tua app. In che modo la mia soluzione è stata paragonata alla tua? Fateci sapere nel forum di discussione qui sotto.
Nel prossimo tutorial di questa serie, imparerai come creare una schermata del calendario. Nel frattempo, dai un'occhiata ad alcuni dei nostri altri tutorial su React Native e Flexbox.
