1
00:00:02,070 --> 00:00:07,410
Tak więc na ekranie listy miejsc chcę wypisać listę miejsc, co nie jest zaskakujące, a do tego znasz

2
00:00:07,550 --> 00:00:09,780
jeden komponent z React Native, który możemy

3
00:00:09,780 --> 00:00:14,010
zaimportować i to jest płaska lista. Płaska lista jest oczywiście idealna

4
00:00:14,040 --> 00:00:15,620
do tworzenia listy.

5
00:00:15,780 --> 00:00:18,570
Więc tutaj wrócę teraz płaską listę

6
00:00:18,900 --> 00:00:21,890
i chcę uzyskać dostęp do moich miejsc.

7
00:00:21,930 --> 00:00:23,970
Są one przechowywane w Redux,

8
00:00:23,970 --> 00:00:30,960
dzięki czemu możemy lub przy pomocy Redux, więc możemy zaimportować React Redux tutaj, a ściślej, z tego pakietu, importujemy

9
00:00:30,960 --> 00:00:37,740
selektor użycia, ponieważ teraz w naszym składniku możemy użyć tego, aby uzyskać dostęp do danych przechowywane w Redux.

10
00:00:37,740 --> 00:00:41,630
Więc tutaj chcę uzyskać dostęp do moich miejsc za

11
00:00:41,640 --> 00:00:47,190
pomocą selektora użycia, to pestka, przekazujemy tę funkcję, która odbiera nasz sklep Redux,

12
00:00:47,190 --> 00:00:53,490
nasz stan Redux przechowywany w sklepie tam i tam Chcę uzyskać dostęp na plasterki miejsc

13
00:00:53,490 --> 00:00:59,880
i tutaj używam miejsc, ponieważ w aplikacji. js, użyłem tutaj miejsc jako identyfikatora, który przenosi nas do wycinka zarządzanego za

14
00:01:00,240 --> 00:01:02,880
pomocą reduktora miejsc, aw tym reduktorze mamy inny klucz miejsc, więc

15
00:01:03,000 --> 00:01:09,870
w końcu tutaj chcę uzyskać dostęp do stanu. miejsca. miejsca i dzięki temu wiemy,

16
00:01:09,870 --> 00:01:12,660
jakiego rodzaju dane chcemy wprowadzić do płaskiej listy.

17
00:01:12,660 --> 00:01:19,800
Teraz ponownie dodam tutaj ekstraktor kluczy, aby poinformować płaską listę, gdzie znaleźć unikalny identyfikator dla każdego elementu

18
00:01:19,800 --> 00:01:23,480
i dla mnie, który jest własnością identyfikatora każdego miejsca

19
00:01:23,490 --> 00:01:29,820
i oczywiście musimy dodać element renderowania, aby uzyskać nasze dane danych pozycji, a następnie wyprowadza

20
00:01:29,820 --> 00:01:32,920
komponent dla każdego elementu, który chcemy wyprowadzić.

21
00:01:33,060 --> 00:01:38,730
W tym celu utworzę nowy komponent w folderze komponentów i

22
00:01:38,790 --> 00:01:47,910
to jest PlaceItem. plik js. Teraz, aby zaoszczędzić trochę czasu, podłączyłem swój PlaceItem. Prześlij plik do tego wykładu i możesz

23
00:01:48,180 --> 00:01:53,040
po prostu zastąpić swoją lub swoją treścią moją, ale oczywiście przeprowadzę cię przez to, co

24
00:01:53,040 --> 00:01:53,790
tam robię.

25
00:01:53,910 --> 00:01:59,520
Jest to podstawowy komponent, ponieważ budowaliśmy go również wiele razy w tym kursie, po prostu mam

26
00:01:59,520 --> 00:02:05,460
tutaj swój własny komponent, który jest w stanie wyprowadzić obraz, ponieważ będziemy go potrzebować później, który następnie

27
00:02:05,520 --> 00:02:09,240
będzie miał widok z dwoma fragmentami tekstu, który będzie usiądź

28
00:02:09,270 --> 00:02:15,930
obok tego obrazu, dzięki stylizacji, którą tam zastosowałem. Podaję tytuł i adres tego miejsca, oczywiście,

29
00:02:15,930 --> 00:02:21,900
że informacji, których jeszcze nie mamy, ale dodamy to w tym module i mamy

30
00:02:21,900 --> 00:02:27,720
dookoła dotykalny komponent nieprzezroczystości, abyśmy mogli naciskać każde miejsce i kiedy wciskamy go, uruchamiamy

31
00:02:27,720 --> 00:02:31,400
funkcję, którą spodziewamy się uzyskać na wybranej prop.

32
00:02:31,440 --> 00:02:36,990
Teraz w mojej stylizacji ustawiłem to tak, aby obraz i ten blok tekstowy siedziały

33
00:02:36,990 --> 00:02:43,230
obok siebie w rzędzie tutaj z rzędem kierunku wygięcia, obraz jest wtedy zaokrąglonym obrazem, więc jest to

34
00:02:43,230 --> 00:02:49,860
zaokrąglony obraz, to koło z pełny kolor tła w przypadku, gdy nie mamy jeszcze obrazu, który oczywiście możesz

35
00:02:49,860 --> 00:02:56,310
również zmienić na na przykład ten szarawy kolor. Następnie mamy pojemnik informacyjny, który jest pojemnikiem

36
00:02:56,310 --> 00:03:01,590
zawierającym dwa fragmenty tekstu, które są teraz ułożone w kolumnie nad sobą, a

37
00:03:02,010 --> 00:03:07,290
następnie mamy tytuł, który jest nieco większy niż adres i tam, w

38
00:03:07,290 --> 00:03:14,210
rzeczywistości również chcę użyć czarny jako kolor tekstu. Takiego ustawienia użyję tutaj i jest to

39
00:03:14,210 --> 00:03:17,330
element miejsca, który możemy teraz zaimportować

40
00:03:17,330 --> 00:03:27,850
na ekran listy miejsc, abyśmy mogli zaimportować element miejsca z komponentów, umieścić element i wyprowadzić go tutaj w postaci elementów renderowanych.

41
00:03:27,850 --> 00:03:34,780
Więc chcę wyprowadzić element umieszczający jako samozamykający się element, a teraz umieść element, ten nowy

42
00:03:34,780 --> 00:03:40,630
element potrzebuje pewnych danych wejściowych. Musimy przekazać wybraną prop, która wskazuje

43
00:03:40,630 --> 00:03:47,560
na funkcję, która powinna zostać wykonana po dotknięciu ikony. Musimy przekazać rekwizyt obrazkowy, rekwizyt tytułowy i adresowy, a więc

44
00:03:47,560 --> 00:03:53,730
cztery rekwizyty, które należy podać. Zróbmy to tutaj. Dla obrazu nie mamy jeszcze

45
00:03:53,740 --> 00:03:59,500
obrazu, więc tutaj przejdę na chwilę do zera. W przypadku tytułu możemy to zrobić, oczywiście,

46
00:03:59,590 --> 00:04:06,010
możemy wskazać na itemData. pozycja. tytuł, ponieważ pojedynczy element jest tylko elementem zgodnym z

47
00:04:06,010 --> 00:04:13,100
naszym modelem miejsca i oczywiście ma on tytuł tytułowy, więc możemy bezpiecznie uzyskać do niego dostęp. W przypadku adresu jeszcze tego nie mamy, więc

48
00:04:13,100 --> 00:04:14,470
ustawię to

49
00:04:14,780 --> 00:04:16,260
na null, a

50
00:04:16,280 --> 00:04:18,440
dla select, oczywiście możemy to

51
00:04:18,440 --> 00:04:19,940
ustawić, tam w

52
00:04:19,970 --> 00:04:25,070
końcu chcę przejść do nowej strony. Więc możemy to zrobić za pomocą anonimowej funkcji wbudowanej tutaj lub

53
00:04:25,070 --> 00:04:26,750
za pomocą funkcji nazwanej przechowywanej w osobnej

54
00:04:27,200 --> 00:04:28,300
stałej, cokolwiek chcesz,

55
00:04:28,610 --> 00:04:35,440
zrobię to inline i tam będę mógł użyć rekwizytów. nawigacja. nawiguj i przejdź do ekranu szczegółów miejsca

56
00:04:35,450 --> 00:04:40,580
z identyfikatorem szczegółów miejsca, który oczywiście w moim nawigatorze jest tym identyfikatorem tu i

57
00:04:43,380 --> 00:04:43,950
tam

58
00:04:43,980 --> 00:04:50,610
Chcę również przekazać dodatkowe dane, jakieś parametry, więc przekażę drugi argument, aby nawigować i tam to dwie informacje, które

59
00:04:50,610 --> 00:04:52,860
chcę przekazać, to tytuł miejsca i

60
00:04:52,860 --> 00:04:57,680
oczywiście jest to itemData. pozycja. tytuł, więc dokładnie

61
00:04:57,750 --> 00:05:01,770
ta sama rzecz, którą karmię tutaj w tytule prop, a także

62
00:05:01,770 --> 00:05:06,650
identyfikator miejsca, którym jest itemData. pozycja. id i już

63
00:05:06,720 --> 00:05:08,890
mamy ten identyfikator, więc to

64
00:05:08,910 --> 00:05:14,640
już coś generujemy, gdy dodajemy nowe miejsce. Dzięki temu mamy przedmiot miejsca, który przenosi

65
00:05:14,640 --> 00:05:19,800
nas do ekranu szczegółów miejsca, a ponieważ mamy już podstawowy szkielet na tym

66
00:05:19,950 --> 00:05:21,890
ekranie, powinniśmy to zobaczyć.

67
00:05:21,960 --> 00:05:28,170
Jedną rzeczą, którą dodam do ekranu szczegółów miejsca, jest jednak konfiguracja opcji nawigacji, w której

68
00:05:28,170 --> 00:05:34,950
potrzebuję tej funkcji dynamicznej, która następnie zwraca obiekt konfiguracji, ponieważ tam chcę ustawić tytuł nagłówka na

69
00:05:34,950 --> 00:05:41,040
podstawie parametrów, które otrzymuję, ponieważ na liście miejsc screen, przekazuję tytuł miejsca i parametr

70
00:05:41,040 --> 00:05:47,070
identyfikatora miejsca do tego nowego ekranu. Umieść tytuł to, co chcę wyodrębnić i ustawić tutaj

71
00:05:47,070 --> 00:05:47,890
w nagłówku,

72
00:05:47,940 --> 00:05:56,040
dzięki czemu mogę ustawić tytuł nagłówka na navData. nawigacja. getParam umieść tytuł,

73
00:05:56,070 --> 00:06:02,910
abyśmy mieli ten tytuł w nagłówku. A teraz, spróbujmy, zapiszmy

74
00:06:02,910 --> 00:06:11,230
wszystko i dodajmy nowe miejsce, test. Kliknij zapisz miejsce, jesteśmy cofnięci i widzimy, że jeśli go dotknę, przejdziemy

75
00:06:11,230 --> 00:06:18,100
do ekranu szczegółów, w którym widzimy to w nagłówku. Spróbujmy też na Androidzie z testem,

76
00:06:18,700 --> 00:06:26,070
zapisz to, kliknij na niego i wszystko działa. To podstawowy przepływ tego, ale

77
00:06:26,070 --> 00:06:30,300
oczywiście nie zrobiliśmy jeszcze jednej funkcji natywnej.

78
00:06:30,570 --> 00:06:34,710
Teraz nadszedł czas, abyśmy to zrobili i chcę zacząć od aparatu.