1
00:00:02,150 --> 00:00:06,950
Ora con i nostri caratteri personalizzati aggiunti, ora siamo in grado di usarli nella nostra

2
00:00:06,950 --> 00:00:12,740
applicazione e voglio usarli in tutti i luoghi in cui visualizziamo alcuni testi, come qui con te selezionato,

3
00:00:13,130 --> 00:00:17,410
qui indovinano gli avversari e quindi anche nella pagina di riepilogo, questo sarà

4
00:00:17,410 --> 00:00:24,010
anche un obiettivo qui in questa applicazione e in aggiunta a ciò, quando un gioco è finito, non solo voglio

5
00:00:24,020 --> 00:00:30,770
usare il nostro carattere personalizzato qui su questo gioco su una pagina ma voglio anche mostrare un'immagine, un gioco finito immagine

6
00:00:30,830 --> 00:00:32,460
qui, quindi questa è

7
00:00:32,510 --> 00:00:34,830
la prossima cosa su cui voglio lavorare.

8
00:00:34,850 --> 00:00:42,770
Il primo passo è sostituire questo testo qui con il testo del corpo per usare il carattere, quindi importare il testo del corpo dalla cartella

9
00:00:42,770 --> 00:00:49,970
dei componenti e lì, dal testo del corpo e quindi sostituire tutti questi componenti del testo qui con il testo del corpo, semplicemente

10
00:00:49,970 --> 00:00:54,200
in modo che quando un gioco è finita, usiamo il nostro carattere personalizzato, questo

11
00:00:54,200 --> 00:00:55,450
è l'obiettivo qui.

12
00:00:55,730 --> 00:00:57,950
Ma è come ho appena detto

13
00:00:57,950 --> 00:01:03,200
solo una cosa, la cosa principale che dovrebbe accadere qui è che anche qui abbiamo un'immagine.

14
00:01:03,260 --> 00:01:11,360
Quindi supponiamo di avere il nostro gioco sul titolo in realtà, quindi usiamo il testo del titolo qui forse ora che ci penso,

15
00:01:11,360 --> 00:01:12,350
il testo

16
00:01:12,530 --> 00:01:16,460
del titolo invece del testo del corpo ma che sotto questo

17
00:01:16,460 --> 00:01:19,830
titolo, quindi sotto il gioco è finito, mostriamo un Immagine.

18
00:01:19,880 --> 00:01:27,740
Quindi qui, voglio usare un componente che in realtà ci consente di visualizzare un'immagine e React Native

19
00:01:27,800 --> 00:01:36,470
ha un tale componente, ha un componente immagine. Possiamo usare l'immagine qui come un normale componente nel nostro codice

20
00:01:36,470 --> 00:01:43,490
jsx proprio così, è un componente a chiusura automatica, un'immagine ha un prop importante e che è il prop

21
00:01:43,490 --> 00:01:51,170
di origine e il prop di origine come suggerisce il nome deve essere impostato per puntare a un'immagine e ora ci sono

22
00:01:51,170 --> 00:01:58,430
due tipi di immagini che puoi usare: immagini locali che spedisci come parte della tua app, quindi che includi nel

23
00:01:58,430 --> 00:02:05,600
tuo codice sorgente, nel tuo pacchetto di app alla fine o nelle immagini di rete e avremo un guarda entrambi.

24
00:02:05,610 --> 00:02:14,280
Ora iniziamo con un'immagine locale e per questo, in allegato trovi questi successi. file png che puoi trascinare nella tua cartella delle risorse,

25
00:02:14,280 --> 00:02:17,000
quindi non nella cartella dei caratteri lì

26
00:02:17,370 --> 00:02:23,430
ma solo nelle risorse o crei una sottocartella delle immagini se vuoi, non importa,

27
00:02:23,430 --> 00:02:24,240
lo

28
00:02:24,270 --> 00:02:25,150
avrò qui

29
00:02:25,170 --> 00:02:31,550
solo nelle risorse , è questo successo. file png e questo è il file

30
00:02:31,560 --> 00:02:39,480
che voglio usare qui, quindi l'immagine che voglio rendere qui. Ora, per renderlo qui, usiamo una sintassi speciale che potrebbe

31
00:02:39,660 --> 00:02:46,040
sembrare strana la prima volta che la vedi. Hai usato questa funzione richiesta che è integrata in

32
00:02:46,050 --> 00:02:52,440
Javascript o che è supportata da React Native in Javascript, diciamo, dove passi una stringa come argomento e questa

33
00:02:53,010 --> 00:02:57,840
è la stringa che punta sull'immagine e questo dovrebbe essere un percorso relativo, quindi

34
00:02:57,840 --> 00:02:59,240
qui da siamo

35
00:02:59,250 --> 00:03:04,530
nella cartella degli schermi, dobbiamo salire di un livello, quindi nella cartella delle risorse e quindi

36
00:03:04,530 --> 00:03:07,450
qui, possiamo puntare al successo. png,

37
00:03:07,470 --> 00:03:09,090
proprio così.

38
00:03:09,150 --> 00:03:14,490
Ora questo dice a React Native che vogliamo usare questa immagine qui e dietro

39
00:03:14,490 --> 00:03:20,190
le quinte, permette a React Native di caricarla efficacemente e anche di dare un'occhiata all'immagine

40
00:03:20,430 --> 00:03:21,340
e, ad

41
00:03:21,360 --> 00:03:28,830
esempio, determinare la sua larghezza e altezza, ecco perché usiamo questa strana richiede sintassi e dobbiamo caricare immagini locali come questa.

42
00:03:30,010 --> 00:03:32,280
Ora con quello

43
00:03:32,410 --> 00:03:39,400
per vedere il risultato, modificherò l'app. js file temporaneamente per assicurarci di visualizzare sempre il gioco

44
00:03:39,400 --> 00:03:46,060
sullo schermo lì, semplicemente per non dover sempre passare attraverso l'intero schermo solo per verificare che sia aggiornato, che sia cambiato.

45
00:03:46,660 --> 00:03:53,590
Quindi il gioco sullo schermo è quello che userò temporaneamente come il mio contenuto principale qui fin dall'inizio e semplicemente passerò alcuni numeri fittizi per il numero

46
00:03:53,590 --> 00:03:57,850
di round e il numero utente, di nuovo lo sto facendo solo in modo da iniziare

47
00:03:57,880 --> 00:04:04,390
con il gioco sullo schermo qui e vedere cosa ci dà questo. E possiamo vedere cosa ci dà

48
00:04:04,480 --> 00:04:10,730
questo, alla fine ci dà un'immagine a schermo intero, un'immagine davvero grande.

49
00:04:10,780 --> 00:04:14,140
Il motivo è che l'immagine che ti ho dato è

50
00:04:14,200 --> 00:04:17,590
piuttosto grande, questo successo. il file png non è un

51
00:04:17,710 --> 00:04:22,040
file piccolo, è un'immagine abbastanza grande per quanto riguarda i pixel, la sua larghezza e la sua altezza.

52
00:04:22,210 --> 00:04:29,320
E come ho detto quando lo usi come richiesto, la cosa buona è che React Native dà un'occhiata al file di immagine,

53
00:04:29,320 --> 00:04:34,020
ne determina la larghezza e l'altezza e usa qui la stessa larghezza e altezza,

54
00:04:34,020 --> 00:04:41,050
il che significa che visualizziamo questa enorme immagine qui sull'applicazione e il rovescio della medaglia è semplicemente che questo non si adatta

55
00:04:41,050 --> 00:04:45,450
più allo schermo o occupa l'intero schermo perché è un file troppo grande.

56
00:04:45,550 --> 00:04:50,440
Se avessimo un'immagine più piccola, questo non sarebbe un problema, quindi occuperebbe solo una parte

57
00:04:50,440 --> 00:04:54,160
dello schermo ma poiché è un'immagine grande, occupa l'intero schermo.