1
00:00:02,310 --> 00:00:05,400
Powiedzmy, że chcemy użyć obrazu z Internetu,

2
00:00:05,400 --> 00:00:12,950
a do tego możesz po prostu wybrać go tutaj, zrobię to za pomocą wyszukiwania grafiki Google, powiedzmy to i

3
00:00:12,950 --> 00:00:16,640
chcemy użyć tego obrazu w naszej grze na ekranie.

4
00:00:16,670 --> 00:00:20,870
Wcześniej używaliśmy tej składni wymagającej do załadowania lokalnego obrazu, teraz

5
00:00:20,870 --> 00:00:23,650
ta składnia nie będzie już właściwa.

6
00:00:23,650 --> 00:00:26,900
Więc powielę ten wiersz i skomentuję go, dla

7
00:00:26,900 --> 00:00:35,900
obrazu internetowego, zamiast tego przekazujesz obiekt do źródła, a na tym obiekcie przekazujesz rekwizyt URI, a rekwizyt URI zawiera ciąg,

8
00:00:35,900 --> 00:00:39,080
który jest twoim linkiem do obrazu.

9
00:00:39,080 --> 00:00:45,080
Więc twój link do obrazu jest przekazywany do prop URI w tym obiekcie, który przekazałeś do źródła.

10
00:00:45,080 --> 00:00:50,480
Jeśli to zrobisz, spowoduje to załadowanie obrazu z Internetu, ale jest jedna ważna rzecz, o której musisz wiedzieć.

11
00:00:51,170 --> 00:00:52,430
W przypadku obrazu,

12
00:00:52,430 --> 00:00:54,230
który został załadowany lokalnie, wspomniałem,

13
00:00:54,260 --> 00:01:00,250
że React Native jest w stanie określić jego szerokość i wysokość i używa go jako domyślnego.

14
00:01:00,410 --> 00:01:06,320
Dlatego w przypadku obrazu ładowanego lokalnie nie musisz ustawiać szerokości i wysokości obrazu, robimy to tutaj, ponieważ chcemy zastąpić

15
00:01:06,350 --> 00:01:10,120
domyślną szerokość i wysokość, ale jeśli masz obraz, który ma już idealny

16
00:01:10,250 --> 00:01:15,380
rozmiar, nie musisz ustawiać szerokości i wysokości. W przypadku obrazów z Internetu program React Native

17
00:01:15,380 --> 00:01:16,790
nie jest w

18
00:01:16,790 --> 00:01:22,130
stanie określić szerokości i wysokości obrazu przed jego załadowaniem, ponieważ nie jest częścią aplikacji, pochodzi z

19
00:01:22,130 --> 00:01:24,290
Internetu, program React Native pobiera go

20
00:01:24,320 --> 00:01:30,110
i jest to trochę niespodzianka szerokość i wysokość to. Dlatego w przypadku obrazów sieciowych, więc

21
00:01:30,110 --> 00:01:32,140
w przypadku obrazów,

22
00:01:32,150 --> 00:01:38,810
które pobierasz za pomocą łącza, zawsze musisz ustawić szerokość i wysokość na obiekcie

23
00:01:38,840 --> 00:01:43,840
obrazu, tutaj na komponencie obrazu. W przypadku lokalnych obrazów dodanych

24
00:01:43,880 --> 00:01:48,040
z wymaganiem możesz to zrobić, ponieważ robimy to, aby go

25
00:01:48,110 --> 00:01:51,020
zastąpić, ale nie musisz, to ważne różnicowanie.

26
00:01:51,060 --> 00:01:58,230
Być może zauważyłeś również, że w przypadku obrazów internetowych załadowany obraz zanikał, gdy został załadowany po raz pierwszy,

27
00:01:58,230 --> 00:02:03,100
i jest to przyjemny efekt fabryczny React Native dodaje automatycznie obrazy sieciowe.

28
00:02:03,310 --> 00:02:09,330
Pobiera ten obraz i podczas oczekiwania na zakończenie pobierania, w zasadzie nic nie pokazuje, nie może

29
00:02:09,330 --> 00:02:14,880
jeszcze wyświetlić obrazu, ale gdy obraz jest załadowany, nie tylko go tam wkłada, ale

30
00:02:14,910 --> 00:02:18,940
powoli zanika, w którym jest ładniejsze przejście dla załadowanego obrazu.

31
00:02:18,990 --> 00:02:24,340
To fajny efekt i możesz również kontrolować to z czasem trwania zanikania, możesz ustawić

32
00:02:24,360 --> 00:02:27,390
to na wartość, a domyślnie jest to

33
00:02:27,390 --> 00:02:33,360
300, czyli 300 ms, ale możesz ustawić inną wartość milisekundy, na przykład 1000 ms, co byłoby

34
00:02:33,360 --> 00:02:39,450
jedną sekundą dla obraz zanika i tak dalej. Po pierwszym załadowaniu obraz jest buforowany,

35
00:02:39,450 --> 00:02:44,610
dlatego kolejne użycie tego samego obrazu nastąpiło niemal natychmiast, ponieważ zostało

36
00:02:44,610 --> 00:02:45,760
już pobrane.

37
00:02:45,780 --> 00:02:49,320
Oto jak korzystać z obrazów sieciowych i o których należy pamiętać.