Ora con i nostri caratteri personalizzati aggiunti, ora siamo in grado di usarli nella nostra
applicazione e voglio usarli in tutti i luoghi in cui visualizziamo alcuni testi, come qui con te selezionato,
qui indovinano gli avversari e quindi anche nella pagina di riepilogo, questo sarà
anche un obiettivo qui in questa applicazione e in aggiunta a ciò, quando un gioco è finito, non solo voglio
usare il nostro carattere personalizzato qui su questo gioco su una pagina ma voglio anche mostrare un'immagine, un gioco finito immagine
qui, quindi questa è
la prossima cosa su cui voglio lavorare.
Il primo passo è sostituire questo testo qui con il testo del corpo per usare il carattere, quindi importare il testo del corpo dalla cartella
dei componenti e lì, dal testo del corpo e quindi sostituire tutti questi componenti del testo qui con il testo del corpo, semplicemente
in modo che quando un gioco è finita, usiamo il nostro carattere personalizzato, questo
è l'obiettivo qui.
Ma è come ho appena detto
solo una cosa, la cosa principale che dovrebbe accadere qui è che anche qui abbiamo un'immagine.
Quindi supponiamo di avere il nostro gioco sul titolo in realtà, quindi usiamo il testo del titolo qui forse ora che ci penso,
il testo
del titolo invece del testo del corpo ma che sotto questo
titolo, quindi sotto il gioco è finito, mostriamo un Immagine.
Quindi qui, voglio usare un componente che in realtà ci consente di visualizzare un'immagine e React Native
ha un tale componente, ha un componente immagine. Possiamo usare l'immagine qui come un normale componente nel nostro codice
jsx proprio così, è un componente a chiusura automatica, un'immagine ha un prop importante e che è il prop
di origine e il prop di origine come suggerisce il nome deve essere impostato per puntare a un'immagine e ora ci sono
due tipi di immagini che puoi usare: immagini locali che spedisci come parte della tua app, quindi che includi nel
tuo codice sorgente, nel tuo pacchetto di app alla fine o nelle immagini di rete e avremo un guarda entrambi.
Ora iniziamo con un'immagine locale e per questo, in allegato trovi questi successi. file png che puoi trascinare nella tua cartella delle risorse,
quindi non nella cartella dei caratteri lì
ma solo nelle risorse o crei una sottocartella delle immagini se vuoi, non importa,
lo
avrò qui
solo nelle risorse , è questo successo. file png e questo è il file
che voglio usare qui, quindi l'immagine che voglio rendere qui. Ora, per renderlo qui, usiamo una sintassi speciale che potrebbe
sembrare strana la prima volta che la vedi. Hai usato questa funzione richiesta che è integrata in
Javascript o che è supportata da React Native in Javascript, diciamo, dove passi una stringa come argomento e questa
è la stringa che punta sull'immagine e questo dovrebbe essere un percorso relativo, quindi
qui da siamo
nella cartella degli schermi, dobbiamo salire di un livello, quindi nella cartella delle risorse e quindi
qui, possiamo puntare al successo. png,
proprio così.
Ora questo dice a React Native che vogliamo usare questa immagine qui e dietro
le quinte, permette a React Native di caricarla efficacemente e anche di dare un'occhiata all'immagine
e, ad
esempio, determinare la sua larghezza e altezza, ecco perché usiamo questa strana richiede sintassi e dobbiamo caricare immagini locali come questa.
Ora con quello
per vedere il risultato, modificherò l'app. js file temporaneamente per assicurarci di visualizzare sempre il gioco
sullo schermo lì, semplicemente per non dover sempre passare attraverso l'intero schermo solo per verificare che sia aggiornato, che sia cambiato.
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
di round e il numero utente, di nuovo lo sto facendo solo in modo da iniziare
con il gioco sullo schermo qui e vedere cosa ci dà questo. E possiamo vedere cosa ci dà
questo, alla fine ci dà un'immagine a schermo intero, un'immagine davvero grande.
Il motivo è che l'immagine che ti ho dato è
piuttosto grande, questo successo. il file png non è un
file piccolo, è un'immagine abbastanza grande per quanto riguarda i pixel, la sua larghezza e la sua altezza.
E come ho detto quando lo usi come richiesto, la cosa buona è che React Native dà un'occhiata al file di immagine,
ne determina la larghezza e l'altezza e usa qui la stessa larghezza e altezza,
il che significa che visualizziamo questa enorme immagine qui sull'applicazione e il rovescio della medaglia è semplicemente che questo non si adatta
più allo schermo o occupa l'intero schermo perché è un file troppo grande.
Se avessimo un'immagine più piccola, questo non sarebbe un problema, quindi occuperebbe solo una parte
dello schermo ma poiché è un'immagine grande, occupa l'intero schermo.