1 00:00:02,410 --> 00:00:07,890 Quindi, tornando al codice, abbiamo iniziato con il lancio di alcune viste qui e, ovviamente, in questo momento, questo non funzionerà, 2 00:00:07,900 --> 00:00:13,930 questo si spezzerà o non renderà nulla di significativo sullo schermo. In quella prima vista nidificata qui, in questo blocco, 3 00:00:13,930 --> 00:00:14,920 sono andato 4 00:00:14,920 --> 00:00:21,330 ad avere un input di testo e un pulsante. Convenientemente, entrambi sono forniti da React Native, qui abbiamo un 5 00:00:21,330 --> 00:00:27,390 input di testo e abbiamo anche un componente pulsante. Quindi possiamo importare sia l'input di testo che consente 6 00:00:27,390 --> 00:00:33,510 all'utente di inserire testo e pulsante e quindi qui in quella vista, in quella prima vista nidificata, aggiungerò 7 00:00:33,510 --> 00:00:40,890 un input di testo come tag autochiudente perché non c'è nulla che potremmo passare tra l'apertura e tag di chiusura e per 8 00:00:40,890 --> 00:00:42,440 il pulsante, potresti pensare 9 00:00:42,450 --> 00:00:47,430 di usare un pulsante come questo ma in realtà, non è così che funziona questo 10 00:00:47,430 --> 00:00:47,960 pulsante 11 00:00:47,970 --> 00:00:53,620 React Native, invece è un pulsante a chiusura automatica e imposti una proprietà del titolo per definire 12 00:00:53,840 --> 00:01:00,150 quale testo rendere lì e qui, potremmo dire aggiungere. Ora abbiamo un input di testo e un 13 00:01:00,360 --> 00:01:08,230 pulsante lì e se salviamo questo e questo si ricarica, vediamo il pulsante qui ma non vediamo l'input di testo, giusto? 14 00:01:08,490 --> 00:01:11,070 Quindi non funziona come previsto. 15 00:01:11,070 --> 00:01:16,850 La ragione di ciò è che l'immissione di testo sarà nascosta qui sotto la barra di stato. 16 00:01:16,920 --> 00:01:22,740 Quindi ora è il momento in cui dovremmo iniziare con l'aggiunta di un po 'di layout, una 17 00:01:22,770 --> 00:01:25,410 certa struttura a questa pagina perché solo 18 00:01:25,410 --> 00:01:30,990 l'aggiunta di componenti da soli non farà il trucco, un'app React Native si basa sull'uso dei 19 00:01:31,080 --> 00:01:40,190 componenti e quindi sull'aggiunta del layout giusto, il giusto struttura ai tuoi componenti. Quindi qui ad esempio, avrebbe senso aggiungere un po 'di padding generale attorno a quella vista, 20 00:01:40,190 --> 00:01:46,310 quindi su questa vista dall'alto, quindi il padding è fondamentalmente una certa distanza dal bordo di quella vista che è fondamentalmente il 21 00:01:46,760 --> 00:01:48,870 frame del dispositivo nel nostro caso qui 22 00:01:48,920 --> 00:01:54,890 da quando sono parlando della vista più in alto al contenuto della vista, quindi un po 'di spazio tra i bordi 23 00:01:54,980 --> 00:02:00,650 della vista più in alto, della vista circostante e del contenuto nella vista e per questo, possiamo aggiungere la 24 00:02:00,650 --> 00:02:02,660 proprietà dello stile qui nella vista. 25 00:02:02,660 --> 00:02:09,530 La maggior parte dei componenti di React Native supporta la proprietà style, la vista funziona e lì, si utilizza questa associazione 26 00:02:10,070 --> 00:02:15,800 di contenuti dinamici qui che si conosce anche dal normale React con le singole parentesi graffe e 27 00:02:15,800 --> 00:02:21,590 lo stile si aspetta ora un oggetto Javascript. Quindi aggiungiamo un'altra coppia di parentesi graffe qui e 28 00:02:21,590 --> 00:02:25,530 ora un errore comune è che pensi che questa sia una sintassi speciale 29 00:02:25,670 --> 00:02:31,390 che richiede doppie parentesi graffe, in effetti è la normale sintassi React con parentesi graffe simili dove poi il 30 00:02:31,400 --> 00:02:34,640 valore dinamico che stai passando allo stile sembra essere un oggetto 31 00:02:34,640 --> 00:02:40,310 Javascript, quindi abbiamo un'altra coppia di parentesi graffe. E in questo oggetto ora puoi avere coppie 32 00:02:40,310 --> 00:02:46,610 chiave-valore in cui le chiavi sono i nomi delle tue proprietà di stile e i valori sono i valori per queste 33 00:02:47,420 --> 00:02:51,740 proprietà di stile e questi nomi di proprietà di stile sono influenzati dai CSS. 34 00:02:51,770 --> 00:02:58,250 Quindi qui, ciò che puoi fare è aggiungere il padding, che esiste anche in React Native e un elenco 35 00:02:58,250 --> 00:03:04,130 completo di proprietà di stile supportate può sempre essere trovato andando al componente che stai usando, 36 00:03:04,130 --> 00:03:10,850 come la vista qui e quindi facendo clic su sulla proprietà dello stile e qui se fai clic sugli stili 37 00:03:10,850 --> 00:03:17,750 di visualizzazione, vedrai un elenco di tutte le proprietà fornite che puoi utilizzare e vedrai alcune proprietà speciali per la 38 00:03:17,750 --> 00:03:24,410 vista qui e quindi alcuni oggetti di scena generali come oggetti di layout e lì, troverai l'imbottitura per esempio. 39 00:03:24,480 --> 00:03:30,640 Quindi è così che puoi scoprire cosa è supportato ma vedrai anche molti esempi in questo corso. 40 00:03:30,650 --> 00:03:36,080 Quindi qui aggiungo il riempimento e il valore ora può essere solo un numero che sarà pixel indipendenti dal 41 00:03:36,290 --> 00:03:41,300 dispositivo, quindi un valore di pixel che sembra sempre buono indipendentemente dalle dimensioni del dispositivo che hai. 42 00:03:41,330 --> 00:03:46,990 Quindi qui, potremmo aggiungere 10 e se lo facciamo, ora vediamo che il pulsante è un po 'più 43 00:03:47,050 --> 00:03:51,860 in basso, forse aggiungiamo 30 qui in modo da poter vedere una differenza più grande 44 00:03:52,090 --> 00:03:56,050 e ora funziona e ora se tocchi sopra il pulsante, non vedi 45 00:03:56,050 --> 00:04:01,230 davvero un input qui ma vedi che la mia tastiera virtuale si è aperta su Android, 46 00:04:01,240 --> 00:04:03,790 su iOS non si apre di default ma 47 00:04:03,970 --> 00:04:11,410 lì puoi anche toccare qui e se dovessi toccare abbastanza spesso o se vai a hardware, quella tastiera attiva o disattiva la tastiera del 48 00:04:11,410 --> 00:04:13,780 software, dovrebbe aprirsi anche lì, quindi qui 49 00:04:13,780 --> 00:04:15,180 abbiamo anche un input. 50 00:04:15,190 --> 00:04:19,840 Quindi ora possiamo vedere quell'input perché ora non è più dietro quella barra di stato. 51 00:04:19,840 --> 00:04:27,040 Quindi aggiungere quell'imbottitura probabilmente aveva senso perché ora, ci siamo assicurati che il nostro layout fosse all'interno del 52 00:04:27,040 --> 00:04:28,660 nostro schermo qui. 53 00:04:28,660 --> 00:04:31,980 Ora ci sono altri strumenti per assicurarsi che abbiamo abbastanza padding 54 00:04:32,170 --> 00:04:36,460 anche qui, ma per ora, impostiamo manualmente il padding e forse impostiamo un valore di 30. 55 00:04:36,880 --> 00:04:39,760 Quindi stavamo iniziando con il layout, ora 56 00:04:39,760 --> 00:04:43,650 torniamo a questo componente e assicuriamoci di poter vedere qualcosa, possiamo 57 00:04:43,660 --> 00:04:48,120 vedere che c'è un input di testo e non dobbiamo solo indovinarlo. 58 00:04:48,550 --> 00:04:54,070 Per questo, possiamo andare all'input di testo e lì ad esempio aggiungere il segnaposto prop e proprio come 59 00:04:54,070 --> 00:04:55,800 prima per scoprire cosa puoi 60 00:04:55,810 --> 00:05:02,990 impostare, puoi sempre andare ai documenti ufficiali, in questo caso ai documenti di input di testo e lì, trovi una descrizione su come 61 00:05:03,000 --> 00:05:04,930 usarlo e alcuni esempi ma se 62 00:05:05,070 --> 00:05:10,770 scorri verso il basso, troverai anche tutti gli oggetti di scena che puoi impostare e lì, ad esempio, scopri 63 00:05:11,130 --> 00:05:16,410 che puoi impostare un oggetto segnaposto, che è quel testo fittizio che viene visualizzato prima che l'utente 64 00:05:16,410 --> 00:05:17,640 inserisca del testo. 65 00:05:17,640 --> 00:05:23,580 Quindi qui, questo richiede una stringa e qui potremmo inserire l'obiettivo del corso perché dovresti essere in grado 66 00:05:23,580 --> 00:05:24,940 di impostare l'obiettivo 67 00:05:25,040 --> 00:05:28,970 del corso qui e se lo fai, vedi sia su Android che 68 00:05:28,980 --> 00:05:31,510 su iOS c'è questo testo dell'obiettivo del corso. 69 00:05:31,510 --> 00:05:33,590 Ora ancora, potrebbe essere un po 70 00:05:33,600 --> 00:05:39,180 'meglio, potrebbe essere un po' più chiaro che ci sia un input di testo e quindi 71 00:05:39,210 --> 00:05:40,170 qui, aggiungerò 72 00:05:40,170 --> 00:05:48,170 uno stile, un altro stile in linea e qui imposterò il colore di fondo del bordo di nero, nero ora è una stringa, tali 73 00:05:48,180 --> 00:05:53,940 scorciatoie di colore sono supportate in React Native e un elenco completo di tutti i colori disponibili 74 00:05:54,870 --> 00:06:01,860 è allegato a questa lezione qui e posso anche vedere che una larghezza inferiore del bordo diciamo 1 e che cosa 75 00:06:01,860 --> 00:06:07,770 fa è che dovrebbe impostare un fondo rasentiamo questo input in modo che ora, se torniamo indietro, 76 00:06:07,770 --> 00:06:13,710 lo sottolineiamo qui, possiamo vederlo chiaramente su iOS e poiché non c'è ancora molto spazio su iOS, permettimi 77 00:06:13,710 --> 00:06:17,520 di aumentare questa imbottitura qui a 50, forse, sì, sembra meglio. 78 00:06:17,540 --> 00:06:22,630 Quindi ora abbiamo quel bordo sotto il nostro input e questo chiarisce che c'è un input qui. 79 00:06:22,810 --> 00:06:26,380 Ovviamente non sei limitato a impostare solo un bordo in basso, puoi 80 00:06:26,380 --> 00:06:28,640 anche impostare un bordo generale lasciando 81 00:06:28,660 --> 00:06:32,140 qui il fondo, un colore del bordo e una larghezza del 82 00:06:32,530 --> 00:06:36,180 bordo e se lo facessi, allora questo sarebbe circondato da un confine. 83 00:06:36,190 --> 00:06:42,250 Ora una nota importante per quanto riguarda questi nomi di stile qui, i nomi delle proprietà dello stile, ovviamente vedi 84 00:06:42,250 --> 00:06:49,390 che è la larghezza del bordo, il colore del bordo scritto in questo modo, nei CSS normali, avresti avuto il colore del bordo e 85 00:06:49,750 --> 00:06:55,870 che avrebbe applicato il colore del bordo ma che avrebbe essere un nome di proprietà non valido in Javascript, motivo per 86 00:06:55,870 --> 00:06:57,670 cui questo non è supportato. 87 00:06:57,670 --> 00:07:03,280 Ora in realtà, un nome di proprietà valido in Javascript sarebbe se lo racchiudessi tra virgolette, 88 00:07:03,520 --> 00:07:10,240 ma anche questo non è supportato in React Native, quindi queste sintassi alternative, ad esempio questa sintassi funzionerebbe in Javascript 89 00:07:10,240 --> 00:07:18,010 se applichi uno stile all'elemento HTML web , queste sintassi non sono supportate in React Native però, lì devi davvero usare questa sintassi 90 00:07:18,010 --> 00:07:23,320 del caso cammello dove per esempio scrivi un colore del bordo come questo o in 91 00:07:23,320 --> 00:07:29,740 breve, devi usare i nomi delle proprietà che trovi anche nei documenti ufficiali, lì non ci sono nomi alternativi 92 00:07:29,740 --> 00:07:37,030 per queste proprietà di stile e ora possiamo anche aggiungere un padding qui diciamo 10 in modo da avere una certa spaziatura 93 00:07:37,600 --> 00:07:43,570 tra il bordo e la parte reale in cui entriamo in qualcosa e direi che questo sembra già 94 00:07:43,720 --> 00:07:49,540 molto meglio e noi può vedere chiaramente che qui abbiamo un input in cui gli utenti possono 95 00:07:49,540 --> 00:07:50,530 inserire qualcosa.