Quindi, in una nuova schermata del luogo, voglio essere in grado di aggiungere un luogo e
per questo, prima di tutto aggiungerò il componente di input di testo che ovviamente non ha nulla a
che fare con le funzionalità del dispositivo nativo ma ne abbiamo semplicemente bisogno perché in lì, ora possiamo aggiungere un tale input di testo che consente
all'utente di inserire il titolo e quindi, aggiungerò anche un componente di testo qui dove dico titolo, che
dovrebbe fungere da
etichetta per questo input di testo qui e nel complesso, I voglio anche una vista di scorrimento qui per avvolgere tutti i miei contenuti perché
non so quale dispositivo verrà utilizzato dall'utente ma aggiungeremo più di un semplice titolo, aggiungeremo anche un selettore
di immagini e un selettore di luoghi in tutto questo modulo e quindi poter scorrere questa pagina è davvero importante.
Quindi ora abbiamo quell'etichetta del titolo e l'input di testo che gli appartiene che per ora non farà
nulla ma che consentirà presto all'utente di inserire un titolo.
Voglio anche assicurarmi che ovviamente questo modulo possa essere inviato, quindi
quello che voglio anche fare è aggiungere un componente pulsante qui e dopo aver inserito il testo qui, avrò il mio pulsante
dove dico Salva posto per esempio, aggiungi un colore qui e impostalo su Colori. primario e per questo, devi assicurarti di importare i
colori costanti qui e onPress in seguito invierà questo modulo, per
il momento non sto facendo nulla qui.
Naturalmente è anche possibile configurare l'inserimento di testo, anche se la maggior parte della configurazione di base va bene qui, non
ho bisogno di cambiare il tipo di tastiera e così via, ma alcuni stili sarebbero belli e questo
è vero per l'intera pagina.
Quindi, per questa vista qui, ad esempio, voglio aggiungere uno stile di modulo qui, quindi un identificatore di stile del modulo in modo da
poter dare uno stile al modulo generale. Per il titolo
qui, aggiungerò uno stile di etichetta e per l'inserimento del testo, voglio anche aggiungere i miei stili e userò
l'identificativo di testo qui. Detto questo, passiamo al foglio di stile
e assicuriamoci di aggiungere un po 'di stile qui. Per la forma generale, aggiungerò un margine
in tutte le direzioni di 30 in modo che non si trovi direttamente sui bordi dello schermo.
Per l'etichetta, voglio
impostare una dimensione del carattere di diciamo 18 e anche aggiungere un margine in fondo a 15 in modo da avere una
certa spaziatura tra l'etichetta e l'input di testo e sull'input di testo stesso,
bene per essere in grado di vederlo, aggiungerò un bordo inferiore e imposterò il suo colore su questo
grigio chiaro qui con questo codice esadecimale di #ccc e una larghezza inferiore del bordo qui di 1 e quindi avrò anche un margine
sul fondo, quindi per il contenuto sotto di esso, il pulsante ora di 15 e quello che aggiungerò
anche qui è un po 'di imbottitura verticale, solo quattro e un po' di
imbottitura orizzontale, solo due. Se lo salvo, diamo un'occhiata.
Se vado alla schermata dei nuovi luoghi, questo è quello che ho e questo non sembra
troppo malandato, anche su Android, questo è qualcosa su cui possiamo lavorare e questo è qualcosa su cui possiamo costruire.
Ora, ovviamente, questo input non sta
facendo nulla, ovviamente voglio catturare ciò che l'utente ha inserito e per mantenerlo semplice, qui non aggiungerò una validazione
super complessa o qualcosa del
genere, invece catturerò solo il valore e basta. Ovviamente puoi aggiungere la validazione, puoi aggiungere un
riduttore come
abbiamo fatto nel modulo di input dell'utente in cui hai imparato come gestire forme più
complesse in tutti i modi, anche in questo caso lo terrò molto semplice e, quindi, importerò l'uso hook di stato da React
qui in modo che io possa semplicemente catturare i miei valori qui.
Quindi qui avrò il mio valore del titolo e imposterò la funzione del valore del titolo e userò lo stato per inizializzarlo
su una stringa vuota e poi aggiungerò una funzione qui,
il gestore di modifica del titolo, che riceve il testo inserito dall'utente e dove l Quindi imposterò
il mio valore del titolo su quel testo e qui, ovviamente, potresti aggiungere la convalida, ma ancora una volta per mantenerlo semplice, non lo
farò.
È il gestore di modifica del titolo che ora dovrebbe essere associato al prop di modifica del testo qui, sull'input
di testo,
quindi lì indicherò il gestore di modifica del titolo e legherò ovviamente il valore di quell'input al mio valore del titolo
perché è qui che memorizzo l'input dell'utente e con
ciò abbiamo un input dell'utente completamente funzionale qui dove acquisisco anche i valori. Ora, con quello, siamo in grado di ottenere
il titolo, abbiamo anche un
posto di salvataggio.
Ogni volta che premiamo questo pulsante, voglio
salvarlo, quindi avrò il mio gestore del luogo di salvataggio, che è una funzione che voglio associare a
questo pulsante di
salvataggio, quindi qui invece di avere questa funzione anonima vuota, indicherò di salvare posiziona il gestore su questo pulsante
di salvataggio del luogo e lì dentro, ora voglio assicurarmi che questo posto venga
salvato e per questo, userò di nuovo Redux.
Quindi installerò Redux con npm install --save redux e anche React Redux e installerò anche Redux Thunk in modo
che possiamo usare anche quello.
Per ora non ne ho bisogno perché non sto parlando con un server, ma più tardi
una volta aggiunte le funzionalità del dispositivo nativo, vedrai che lì abbiamo anche alcune
funzionalità asincrone e dove potremmo voler aspettare il loro completamento prima effettivamente spediamo un'azione che è
esattamente dove Redux Thunk può aiutarci. Quindi, con questi tre pacchetti installati, ora possiamo configurare Redux.