1
00:00:02,180 --> 00:00:06,770
Teraz oczywiście używam widoku przewijania i nauczyłeś się, że FlatList jest lepszy, jeśli masz

2
00:00:06,770 --> 00:00:10,160
listę, na której nie wiesz, ile elementów tam będziesz.

3
00:00:10,190 --> 00:00:16,490
Teraz w naszej grze widok przewijania będzie w porządku, ponieważ tak, nie wiemy, ile

4
00:00:16,490 --> 00:00:24,320
to będzie przedmiotów i teoretycznie, dla bardzo słabego zgadywania, będziemy mieli około 100 przedmiotów, ale stanie się to prawie

5
00:00:24,380 --> 00:00:34,020
nigdy i dlatego zazwyczaj ta lista nie może zawierać więcej niż 10, 15, 20 elementów, a zatem najprawdopodobniej nigdy nie spowoduje to żadnych

6
00:00:34,110 --> 00:00:38,480
problemów z wydajnością, a korzystanie z widoku przewijania tutaj jest

7
00:00:38,520 --> 00:00:45,210
absolutnie w porządku, ponieważ tak, jest to lista zawierająca wiele elementów, który przekroczy nasze granice ekranu,

8
00:00:45,450 --> 00:00:52,140
ale rzadko będzie to lista zawierająca wiele przedmiotów, nigdy nie będzie to lista zawierająca więcej niż

9
00:00:52,140 --> 00:00:56,370
100 przedmiotów ze względu na sposób działania naszej gry.

10
00:00:56,370 --> 00:01:01,770
Widok przewijania byłby tutaj odpowiedni, ale jeśli nadal chcesz używać FlatList, pozwól, że

11
00:01:01,800 --> 00:01:03,050
ci to pokażę.

12
00:01:03,060 --> 00:01:08,460
W tym celu możemy dodać FlatList tutaj, co oczywiście oznacza, że musimy zaimportować

13
00:01:08,460 --> 00:01:13,020
FlatList z React Native, więc tutaj zaimportuję FlatList w ten sposób,

14
00:01:13,020 --> 00:01:19,590
a po zaimportowaniu FlatList dowiedziałeś się, że FlatList pobiera rekwizyt danych, który wskazuje na dane, które

15
00:01:19,670 --> 00:01:22,630
chcesz wprowadzić, aw naszym przypadku tutaj, byłaby

16
00:01:22,680 --> 00:01:31,710
to nasza tablica zgadnięć z przeszłości, a następnie masz propozycję renderowania elementu, która pozwala na wyprowadzenie elementów dla każdego elementu w danych,

17
00:01:31,860 --> 00:01:37,350
które podajesz, więc wyślij komponenty dla każdego elementu w danych i tutaj mogę wskazać

18
00:01:37,350 --> 00:01:38,250
element

19
00:01:38,250 --> 00:01:42,870
listy renderowania, który powinien zostać wywołany. Teraz to nie

20
00:01:42,870 --> 00:01:48,390
zadziała z kilku powodów. Po pierwsze, element listy renderowania oczekuje

21
00:01:48,750 --> 00:01:55,620
dwóch wartości, ale element renderowany tutaj na FlatList przesyła tylko jeden element, a są to dane elementu,

22
00:01:55,620 --> 00:01:59,950
które przechowują informacje o indeksie i przedmiocie, który mamy wydrukować.

23
00:01:59,970 --> 00:02:03,510
Inną rzeczą, która spowoduje nam problemy, jest klucz.

24
00:02:03,540 --> 00:02:10,710
Być może pamiętasz, że FlatList spodziewa się uzyskać obiekty w przekazywanej tablicy, w której każdy obiekt ma właściwość

25
00:02:10,740 --> 00:02:16,130
klucza, którą może wyodrębnić i wykorzystać jako klucz do wydajnego ponownego renderowania.

26
00:02:16,140 --> 00:02:21,880
Teraz nie mamy tutaj tablicy obiektów, mamy tablicę liczb i to nie zadziała.

27
00:02:21,960 --> 00:02:28,680
Teraz możemy dodać tutaj ekstraktor kluczy do FlatList, aby zastąpić jego domyślny, ekstraktor kluczy przyjmuje funkcję, która

28
00:02:28,770 --> 00:02:35,070
w końcu dostaje nasz przedmiot, a następnie musimy powiedzieć FlatList, gdzie znaleźć nasz klucz i domyślnie

29
00:02:35,070 --> 00:02:38,170
szuka elementu. klucz lub na przedmiot. id, tutaj

30
00:02:38,280 --> 00:02:41,860
chcemy powiedzieć, że sam przedmiot jest kluczem.

31
00:02:42,090 --> 00:02:46,580
Teraz FlatList chce jednak klucza, który jest ciągiem, a nie liczbą, w

32
00:02:46,590 --> 00:02:48,510
przeciwnym razie otrzyma ostrzeżenie.

33
00:02:48,510 --> 00:02:54,480
Więc następną rzeczą, którą musimy zrobić, to domysły z przeszłości, którymi zarządzamy, powinny być łańcuchami i nie stanowi to problemu,

34
00:02:54,480 --> 00:02:58,800
ponieważ i tak używamy ich tylko do drukowania ich na ekranie, więc nie obchodzi

35
00:02:58,800 --> 00:03:03,750
nas, czy są one technicznie przechowywane jako liczba lub ciąg znaków, a zatem tutaj, gdy dodamy

36
00:03:03,750 --> 00:03:09,630
nowe przypuszczenie, możemy po prostu wywołać metodę toString, która jest wbudowaną metodą JavaScript na liczbę, aby przekonwertować ją na

37
00:03:09,630 --> 00:03:16,490
typ ciągu i zrobić to samo dla wartości początkowej kierunek. Tutaj, gdzie dodaję moje początkowe przypuszczenie, również zadzwoń

38
00:03:16,500 --> 00:03:19,140
doString, a teraz mamy ciągi

39
00:03:19,140 --> 00:03:26,030
znaków, które mogą być zatem używane jako liczby. Teraz, jak powiedziałem, renderuj element listy oczekuje jednak niewłaściwych

40
00:03:26,030 --> 00:03:31,940
argumentów, numOfRound nie będzie działać w ten sposób, wartość też nie będzie działać w ten

41
00:03:31,940 --> 00:03:34,430
sposób, zamiast tego otrzymujemy dane

42
00:03:34,550 --> 00:03:42,440
elementu i nadal możemy spodziewać się dodatkowego argumentu, należy tego jednak oczekiwać jako pierwszego argumentu, ponieważ możemy teraz po prostu zejść

43
00:03:42,740 --> 00:03:49,280
w dół, aby renderować element tutaj na FlatList i powiązać argumenty, które należy przekazać, abyśmy mogli dodać

44
00:03:49,460 --> 00:03:55,330
dodatkowe argumenty oprócz domyślnego argumentu, który zostanie przekazany. Teraz bind oczekuje tego jako pierwszego argumentu, więc ustawimy, do

45
00:03:55,350 --> 00:04:00,210
czego powinno się odwoływać w funkcji, którą wywołujemy, nie obchodzi nas to, więc po prostu dodam to

46
00:04:00,210 --> 00:04:00,920
do tego,

47
00:04:00,920 --> 00:04:03,720
możesz również ustawić na zero, to nie ma znaczenia

48
00:04:03,750 --> 00:04:10,350
Drugi argument, który tu dodamy, będzie pierwszym argumentem odebranym przez tę funkcję

49
00:04:10,350 --> 00:04:14,830
i powinien to być nasz okrągły numer, który

50
00:04:14,860 --> 00:04:21,510
powinien być pastGuesses. długość. Wcześniej odliczałem indeks tutaj, ale to już

51
00:04:21,510 --> 00:04:23,640
nie działa, ponieważ nie mam już dostępu

52
00:04:23,640 --> 00:04:27,430
do indeksu, nie mapujemy ręcznie. Więc po prostu podam

53
00:04:27,700 --> 00:04:34,170
tam długość, a dobrą rzeczą jest to, że mogę uzyskać indeks wewnątrz renderowanego elementu z danych elementu.

54
00:04:34,170 --> 00:04:39,780
Ten domyślny argument zostanie również przekazany przez React, a domyślny argument zostanie automatycznie przekazany do

55
00:04:39,840 --> 00:04:40,960
ostatniego argumentu.

56
00:04:41,010 --> 00:04:43,890
Tak więc pierwszymi argumentami będą argumenty ustawione

57
00:04:43,890 --> 00:04:45,840
w opcjach, w tym

58
00:04:45,830 --> 00:04:52,620
przypadku jest to tylko jeden argument, nasza liczba rund lub nasza długość tablicy, a następnie wszelkie argumenty

59
00:04:52,620 --> 00:04:58,500
domyślne, które zostałyby przekazane normalnie, zostaną dodane jako dodatkowe argumenty na końcu listy argumentów tutaj.

60
00:04:58,500 --> 00:05:01,500
Tutaj, liczba rund również nie

61
00:05:01,500 --> 00:05:07,530
jest już odpowiednią nazwą, zamiast tego jest to długość listy, która brzmi jak

62
00:05:07,580 --> 00:05:13,970
lepsza nazwa, ponieważ to właśnie otrzymujemy, ale tutaj możemy obliczyć naszą liczbę rund za

63
00:05:13,970 --> 00:05:20,120
pomocą długości listy, a następnie odejmując itemData. indeks, ponieważ dane pozycji, które automatycznie otrzymujesz przez React Native, to

64
00:05:20,120 --> 00:05:27,440
obiekt, który ma również właściwość index, która jest indeksem wysyłanego elementu, a także dostajesz itemData. przedmiot i to jest sam

65
00:05:27,920 --> 00:05:31,740
przedmiot, który w naszym przypadku jest przypuszczeniem.

66
00:05:32,000 --> 00:05:37,700
Teraz nie musimy już tutaj dodawać klucza, ponieważ kluczowanie to zostanie wykonane przez

67
00:05:37,700 --> 00:05:41,740
React Native dzięki FlatList. To było dużo pracy,

68
00:05:41,750 --> 00:05:43,940
teraz powinniśmy móc ponownie wypisać listę.

69
00:05:43,940 --> 00:05:46,590
Więc zachowajmy to i spróbujmy tutaj

70
00:05:46,590 --> 00:05:48,860
i wydaje się, że

71
00:05:49,320 --> 00:05:55,440
to działa, ale oczywiście straciliśmy teraz pozycjonowanie. Wcześniej dodaliśmy styl kontenera zawartości, listę stylów tutaj

72
00:05:55,440 --> 00:05:58,300
do widoku przewijania, dobrą rzeczą jest

73
00:05:58,320 --> 00:06:04,200
to, że możesz to zrobić również na FlatList. Chociaż możesz dodać styl tak jak w

74
00:06:04,200 --> 00:06:10,320
widoku przewijania, ten styl pozwala na przykład dodać margines wokół listy, ale nie pozwala wyrównać zawartości

75
00:06:10,320 --> 00:06:12,510
wewnątrz listy. W tym

76
00:06:12,510 --> 00:06:16,900
celu użyj również stylu kontenera zawartości, który jest obsługiwany przez FlatList, dlatego

77
00:06:16,980 --> 00:06:22,200
też tutaj możemy również wskazać listę stylów i dlatego powinno to teraz działać tak, jak

78
00:06:22,200 --> 00:06:23,750
wcześniej działał nasz widok przewijania.

79
00:06:23,760 --> 00:06:32,650
Spróbujmy, a zobaczysz, że zaczynamy od dołu i możemy teraz dodawać przedmioty.

80
00:06:32,650 --> 00:06:35,390
Zobaczmy teraz, czy przewijanie działa również tak,

81
00:06:36,050 --> 00:06:39,820
jak powinno, tak, możemy zobaczyć najnowszy element i najstarszy element i

82
00:06:39,950 --> 00:06:43,400
tak, coś jest nie tak z pozycjonowaniem elementów na liście,

83
00:06:43,420 --> 00:06:49,010
i wrócę do tego, ale ogólnie to działa. Przetestujmy to również na Androidzie, więc

84
00:06:49,010 --> 00:06:50,130
zacznijmy zgadywać i

85
00:06:50,150 --> 00:06:54,610
mamy nadzieję, że nie rozwiążemy tego zbyt wcześnie, nie, to

86
00:06:54,630 --> 00:06:55,740
działa

87
00:06:55,740 --> 00:07:02,200
i tutaj możemy również przewijać, jak widać. Więc to działa również z FlatList,

88
00:07:02,200 --> 00:07:08,160
a teraz co z tym dziwnym rozkładem treści tutaj na naszych elementach listy?

89
00:07:08,170 --> 00:07:15,070
Zauważysz, że same elementy listy są większe niż wcześniej.

90
00:07:15,160 --> 00:07:21,010
Treść jest dystrybuowana tak, jakby element listy skończył się tutaj i to rzeczywiście jest problem.

91
00:07:21,010 --> 00:07:27,910
Mamy szerokość 60% elementu listy i nasza treść to respektuje, ale nasze granice

92
00:07:27,910 --> 00:07:29,510
nie są dziwne.

93
00:07:29,590 --> 00:07:34,870
Aby naprawić to dziwne zachowanie FlatList, możesz przejść do kontenera listy

94
00:07:34,870 --> 00:07:41,110
zawierającego ogólną listę i ustawić szerokość na pożądaną szerokość listy na końcu, na

95
00:07:41,860 --> 00:07:45,810
przykład 60% i nadać elementom listy szerokość 100%.

96
00:07:45,820 --> 00:07:52,300
Więc teraz ogólny kontener listy jest mniejszy, jest mniej szeroki, a zatem elementy listy zakładają tę szerokość i mają

97
00:07:52,300 --> 00:07:53,850
tę samą szerokość, a

98
00:07:53,950 --> 00:07:58,840
ponieważ rzadko trzeba używać przypadku, w którym kontener listy musi być szerszy niż elementy

99
00:07:59,230 --> 00:08:04,150
listy, ponieważ czym innym byłby tam, w pojemniku z listą, powinno to być dobre rozwiązanie.

100
00:08:04,180 --> 00:08:11,300
Teraz, jeśli to zrobisz, zauważysz, że szerokość wygląda lepiej, ale w rzeczywistości problem z pozycjonowaniem jest teraz.

101
00:08:11,320 --> 00:08:17,080
Ponieważ teraz kontrolujemy szerokość na zewnętrznym kontenerze listy, możemy pozbyć się wyrównywania

102
00:08:17,080 --> 00:08:20,740
elementów na środku tutaj na samej liście,

103
00:08:20,740 --> 00:08:25,760
więc lista, nie zapominaj, była stylem dodanym do stylu kontenera zawartości.

104
00:08:25,810 --> 00:08:30,810
Trzymamy tam styl, ale usunąłem wyrównywanie elementów na środku, ponieważ teraz nie

105
00:08:31,060 --> 00:08:35,050
ma nic do wyśrodkowania, szerokość jest ustawiona na kontenerze listy,

106
00:08:35,050 --> 00:08:41,890
a nie na elementach listy, więc dzięki temu, że mają 100%, są one automatycznie wyśrodkowane, ponieważ biorą

107
00:08:41,890 --> 00:08:45,070
tak czy inaczej, a więc teraz, jeśli

108
00:08:45,070 --> 00:08:52,420
spróbujemy jeszcze raz, wydaje się, że działa to znacznie lepiej, a elementy listy są tak ułożone, jak powinny.

109
00:08:52,420 --> 00:08:57,940
Więc jeśli mamy tutaj coś innego, co może potrwać nieco dłużej, tak, dobrze wygląda,

110
00:08:57,940 --> 00:09:04,230
to tutaj widzimy, że otrzymujemy takie samo zachowanie, jak poprzednio, uzyskujemy ładny styl, a także pracowaliśmy nad

111
00:09:04,240 --> 00:09:09,760
tym innym zachowaniem, które daje nam FlatList. Spróbujmy również tutaj na Androida i zacznijmy nową

112
00:09:09,760 --> 00:09:10,930
grę, och, to

113
00:09:12,670 --> 00:09:14,290
nie będzie długa gra,

114
00:09:16,120 --> 00:09:17,020
wystarczająco długa,

115
00:09:17,020 --> 00:09:19,800
więc tam też wszystko działa tak, jak powinno.

116
00:09:19,960 --> 00:09:25,780
I tak możesz to zrobić za pomocą FlatList, ponieważ widzisz, że działa trochę inaczej, musimy

117
00:09:25,780 --> 00:09:27,600
obejść jego różne zachowanie,

118
00:09:27,610 --> 00:09:33,550
jeśli chodzi o dostosowanie szerokości elementów listy, ale w końcu to ostatecznie działa również i dlatego

119
00:09:34,090 --> 00:09:40,330
nauczyłeś się teraz, jak układać swoje rzeczy za pomocą FlatList, z widokiem przewijania, co jest specjalnego

120
00:09:40,330 --> 00:09:46,990
w tych widokach listy lub ogólnie w tych przewijalnych widokach i jak nadal możesz układać swoje rzeczy tak,

121
00:09:46,990 --> 00:09:47,970
jak chcesz.