Tak więc dla tego dołączonego modułu ponownie znajdziesz prosty projekt początkowy.
Tam masz aplikację. plik js z pustym
widokiem, więc nie dzieje się tam zbyt wiele.
Dostajesz folder stałych z podstawowym kolorem, który dla ciebie skonfigurowałem i to wszystko.
Poza tym nie ma tu nic ciekawego, jest to bardzo
podstawowa aplikacja, której teraz użyjemy do zbudowania tej aplikacji, którą właśnie naszkicowałem.
Teraz oczywiście możesz absolutnie iść do przodu i samodzielnie
zbudować podstawy, więc te trzy różne ekrany, których w końcu potrzebujemy, lub cztery różne ekrany, jeden dla
wszystkich miejsc, jeden dla szczegółów miejsca, jeden dla stworzenia nowego miejsce i jeden dla mapy pełnoekranowej,
którą również chcemy pokazać, możesz to absolutnie zrobić i samodzielnie zbudować szkielet podstawowy dla tych
ekranów, skonfigurować podstawową nawigację, ponieważ są to oczywiście wszystkie rzeczy, które zrobiliśmy już wiele razy
W tym kursie.
Zacznę też od następnych wykładów na wypadek, gdybyś chciał pójść dalej lub porównać
swoje rozwiązanie z kopalnią, a potem zagłębimy się w
treść tego modułu, dowiemy się, jak dodać możliwości natywnych urządzeń . Zacznijmy zatem od podstaw.
Dodam nowy ekran folderów z czterema ekranami, które chcę mieć. Byłby to plik
ekranu listy miejsc, plik ekranu szczegółów miejsca, nowy plik ekranu miejsca, a także ekran mapy, na którym możemy zobaczyć cały ekran map,
a ja wypełnię je treścią w tym module, ale są to
cztery podstawowe ekrany, których potrzebuję.
Dodam również folder nawigacyjny, abyśmy mogli tam skonfigurować nawigację i tutaj
skonfiguruję mój PlacesNavigator. plik js. Teraz w podanym przeze mnie projekcie początkowym
nawigacja React i
wszystkie jego zależności są już zainstalowane, więc jeśli go używasz, nie
musisz go ręcznie instalować, w przeciwnym razie, jeśli używasz własnego projektu początkowego, upewnij się, że zainstaluj
React navigation z npm install React navigation, a także upewnij się, że zainstalowałeś tutaj te dodatkowe zależności, aby
upewnić się, że React navigation działa z expo.
Tak więc po zainstalowaniu możemy oczywiście ustawić nawigację tutaj w nawigatorze miejsc, a do tego
tutaj zaimportuję z nawigacji React, a importuję oczywiście funkcję tworzenia
nawigatora stosu, więc utwórz nawigator stosu i utwórz
również kontener aplikacji, który również musimy wykonać, ponieważ będziemy musieli zrobić jedno i
drugie - utwórz nawigator stosów i skonfiguruj kontener aplikacji później.
Teraz musimy również zaimportować ekrany, z którymi chcemy pracować, a byłby to ekran listy miejsc, który
zaimportuję z folderu ekranów i tam jest ekran listy miejsc. Będziemy również potrzebować ekranu szczegółów miejsca,
ekranu szczegółów miejsca, który jest importowany z ekranów ekranu szczegółów miejsca, a
także, oczywiście, pozostałych dwóch ekranów.
Więc otrzymaliśmy nowy ekran miejsca z ekranów, nowy ekran miejsca i wreszcie, musimy również zaimportować tutaj nasz ekran
mapy z folderu ekranów, a następnie byłby to ekran mapy.
Teraz możemy skonfigurować tutaj nawigator stosu, a ja będę przechowywać ten nawigator miejsc w sposób ciągły,
a jak się tego nauczyłeś, mapujemy identyfikatory na
nasze ekrany, więc może mamy identyfikator miejsc zamapowany na ekranie listy miejsc , mamy
przypisany identyfikator szczegółów miejsca
do ekranu szczegółów miejsca, mamy także nowy identyfikator miejsca zmapowany na nowy ekran miejsca i na
koniec, być może, mapowany na ekran mapy. Dzięki temu możemy ustawić tutaj domyślne opcje nawigacji, więc
przekażę drugi argument i oczywiście ustawienie to jest całkowicie opcjonalne, ale w związku z tym
dodam domyślne opcje nawigacji do każdego ekranu i chcę zdefiniować moje styl nagłówka tutaj i upewnij się, że używamy koloru
tła w zależności od tego, czy działamy na Androidzie, czy nie.
Dlatego zaimportuję ten interfejs API platformy z React Native i będę również potrzebował mojego koloru, więc zaimportuję
również kolory ze stałych / kolorów, to również jest wymagane, ponieważ dzięki temu możemy teraz sprawdzić, czy system operacyjny platformy
to Android a jeśli tak, możemy upewnić się, że kolor tła nagłówka jest naszym
kolorem podstawowym, w przeciwnym
razie nie ustawię żadnego koloru, chcę użyć domyślnego przezroczystego wyglądu, którego używa iOS, a tutaj również
ustawić kolor odcienia nagłówka dla tekst tam, ponownie sprawdzam platformę, ponieważ jeśli platforma jest
Androidem, ponieważ mamy solidne tło, ustawię kolor odcienia na biały, dla iOS zrobię coś
przeciwnego, tam ustawię go na mój kolor podstawowy. Teraz to tutaj, nie mam niestandardowych czcionek w tym
projekcie, oczywiście możesz je dodać, jeśli chcesz. Dzięki tej konfiguracji możemy wyeksportować nasz kontener aplikacji, który musimy
w związku z tym utworzyć za pomocą Utwórz kontener aplikacji i przekazać tutaj nawigator miejsc. Teraz jest to konfiguracja nawigacji, oczywiście
w aplikacji.
plik js możemy teraz z niego korzystać.
Więc tutaj powinniśmy zaimportować nawigatora miejsc z folderu nawigacji, nawigatora miejsc, dlatego nie potrzebujemy już importu widoku
tutaj i możemy po prostu zwrócić nawigator miejsc. Ponieważ nie ładuję żadnych niestandardowych czcionek, nie muszę
też robić tej aplikacji ładującej rzeczy, które zrobiliśmy wcześniej lub
w innych modułach, tutaj mogę po prostu zwrócić to od samego początku.
Teraz na tych ekranach tutaj, na ekranie listy miejsc, zaimportuję React z React, zaimportuję kilka rzeczy z React
Native, prawdopodobnie widok, tekst i arkusz
stylów,
a następnie możemy sprawdzić, czy potrzebujemy czegoś innego później z React Native, a następnie ustaw tutaj
stałą, ekran listy miejsc jest normalnym składnikiem React, który otrzymuje rekwizyty i którego koniec zwraca pewną treść,
tutaj po prostu zwrócę widok z tekstem ekranu listy
miejsc, więc tylko niektóre zawartość fikcyjna na razie, a także skonfiguruj tutaj
arkusz stylów za pomocą arkusza stylów. utwórz i ostatecznie
wyeksportuj ekran listy miejsc.
Będzie to szkielet podstawowy, którego możemy użyć do każdego
widoku, więc upuszczę go w każdym widoku i po prostu dostosuję tę nazwę tutaj.
Mamy tutaj ekran szczegółów miejsca, którego chcę użyć, a następnie skopiuj go również na nowym ekranie miejsca
i zastąp tę nazwę tutaj we wszystkich trzech
miejscach, a także upuść to na ekranie mapy, aby mieć to tutaj jako
no i oczywiście dodamy prawdziwą treść do tego modułu.
Więc to są utworzone ekrany, jeśli
teraz to zapiszemy i uruchomisz to z npm start lub expo start i uruchomisz na
swoim ulubionym emulatorze lub emulatorach, po zakończeniu budowy powinniśmy zobaczyć ekran listy miejsc na
końcu, jak to.
Oczywiście nie mamy tutaj tytułu nagłówka, więc upewnijmy się, że go ustawimy, także na Androidzie,
przechodząc do ekranu listy miejsc, a tam możemy dodać opcje nawigacji na ekranie listy miejsc i ustawić go na obiekt
statyczny tutaj, w którym możemy dodać tytuł nagłówka wszystkich miejsc lub coś w tym stylu, a wraz z tym oczywiście, gdy
to się ponownie załaduje, zobaczymy ten tytuł tutaj na ekranie listy miejsc.
To podstawowa konfiguracja ekranu, której będziemy potrzebować w tym module tutaj. Dzięki temu, zanim zagłębimy się głębiej w
treść innych ekranów, upewnijmy się, że
w nagłówku mamy również przycisk plus, który przeniesie nas do
nowego ekranu miejsca, ponieważ wtedy możemy zacząć od dotknięcia w natywne funkcje urządzenia
i dodawanie miejsc.
Teraz oczywiście wiesz, jak dodać przycisk do nagłówka nawigatora, wszystko, co musisz zrobić, to zainstalować nowy pakiet
z npm install --save, a to jest pakiet nagłówka przycisków reagowania, którego użyliśmy kilka razy w trakcie
tego kursu i użyję go dokładnie tak samo, jak użyłem go w
pozostałej części kursu.
Stworzę więc folder komponentów, w którym mogę skonfigurować własny
komponent przycisku nagłówka, aby mieć ten wstępnie skonfigurowany komponent przycisku wielokrotnego użytku, aw tym komponencie importuję przycisk
nagłówka z właśnie zainstalowanego pakietu przycisków nagłówka React. Zaimportuj Ionicony z expo / vector-icons, pakietu, który możesz chcieć
zainstalować na wypadek, gdybyś dostał tutaj błędy przy
instalacji npm - zapisz, a także zaimportuj stałą kolorów z folderu constans, a tam, plik kolorów, a następnie tutaj mam zwykły przycisk
niestandardowego nagłówka, który odbiera rekwizyty, które zwracają trochę jsx, a tutaj
chcę zwrócić przycisk nagłówka, który importujemy, ale teraz skonfigurujemy go zgodnie z
naszymi wymaganiami.
Po pierwsze, przesyłając do niej wszystkie rekwizyty, a następnie możemy ustawić komponent ikony na
jonowy, aby
był używany, ustaw rozmiar ikony może na 23, ponieważ myślę, że do tej pory działał
całkiem dobrze i
ustawiłem kolor, a teraz ja Będę potrzebować jeszcze jednego importu, będę musiał zaimportować platformę z React Native, ponieważ teraz chcę
sprawdzić platformę tutaj, a jeśli
platforma jest Androidem, będziemy mieli solidne tło, więc chcę użyć bieli jako kolor ikony,
w przeciwnym razie używam mojego podstawowego koloru.
Teraz wystarczy tylko wyeksportować ten niestandardowy przycisk nagłówka tutaj i teraz możemy zacząć używać
go na ekranie listy miejsc. Tam, tak jak poprzednio,
importuję dwa inne pakiety z przycisków reaguj-nawigacja-nagłówek, dwie inne rzeczy z tego pakietu, i to będą moje przyciski
nagłówka i element, oba muszą zostać zaimportowane, a ponadto możemy również zaimportować nasz własny niestandardowy
przycisk nagłówka teraz z folderu składników i tam z tego pliku przycisku
nagłówka, nad którym właśnie pracowaliśmy. Ale po zaimportowaniu możemy zmienić nasze
opcje nawigacji tutaj na dynamiczne, w których mamy tę funkcję, która daje nam dane nawigacyjne
i która następnie ostatecznie zwraca ten obiekt konfiguracyjny, ponieważ pozwoli nam to również powiązać przycisk z jakąś
funkcją, która otrzymujemy za pomocą parametrów trasy, ponieważ tutaj chcę dodać nagłówek w prawo, aby dodać moje przyciski
nagłówka i oczywiście jest to również wzór, który robiliśmy wiele razy w tym
kursie, dodaliśmy takie przyciski nagłówka i mamy tam element. Na komponencie przycisków nagłówka możemy ustawić komponent przycisku
nagłówka i wskazać tutaj nasz niestandardowy komponent przycisku nagłówka, a na elemencie ustawiamy teraz tytuł, np. Dodaj
miejsce i ustawiamy tutaj nazwę ikony, która zależy od platformy,
więc dlatego faktycznie zaimportuję ten interfejs API platformy z React Native i możemy teraz sprawdzić, czy system operacyjny
platformy to Android, jeśli tak jest, to chcę ustawić to na md add, w przeciwnym razie na ios
add, który dodaje przycisk plus dla konkretna platforma, więc zgodnie
ze specyficznym wyglądem tej platformy. Musimy również dodać funkcję onPress, a
jeśli to klikniemy, po prostu chcę tutaj nawigować za pomocą metody navigate i dlatego musimy mieć
tę dynamiczną funkcję tutaj, aby uzyskać dostęp do danych nawigacyjnych, a następnie nawigacji,
nawiguj do nowego miejsca, a nowym miejscem tutaj jest oczywiście mój identyfikator w nawigatorze miejsc na ekranie nowego miejsca.
Dzięki temu mamy możliwość przejścia do tego ekranu, a zatem jeśli to uratujemy, powinniśmy być w
stanie to zrobić.
Oczywiście pojawia się błąd, ponieważ w moim komponencie przycisku nagłówka, ponieważ mam tam komponent React, importowanie React
z React nie wydaje się najgorszym pomysłem, więc szybko naprawmy to tutaj w
komponencie przycisku nagłówka, ale teraz z tym , ponieważ ładuje się ponownie, mamy ten przycisk plus
i możemy przejść do ekranu nowych miejsc, do nowego ekranu miejsc, oczywiście także tutaj na Androidzie.
Teraz na tym nowym ekranie miejsca możemy dodać opcje nawigacji, aby ustawić tytuł, nowe
opcje nawigacji ekranu miejsca, ustawić na chwilę jakiś obiekt statyczny, ponieważ w tej chwili nie
potrzebujemy tej funkcji, nie nie potrzebuję dostępu do danych nawigacyjnych, wystarczy ustawić tytuł nagłówka, aby dodać miejsce, a
jeśli to zapiszemy, oczywiście, jeśli tam przejdziemy, zobaczymy ten tytuł w nagłówku.
To jest ta podstawowa konfiguracja tutaj, teraz
możemy pracować nad ekranem dodawania miejsca, aby upewnić się, że możemy dodać miejsce.