Więc zacznijmy pracę nad tą aplikacją. W tym celu
mam tutaj zupełnie nową aplikację, znajdziesz
ją dołączoną na wypadek, gdybyś chciał zbudować tę samą aplikację startową.
Ta prosta aplikacja daje nam to tutaj, bardzo brzydką aplikację, w której mamy tekst, który nakłada się
na pasek stanu, na wcięcie.
Teraz moglibyśmy to naprawić za pomocą widoku obszaru zapisywania, jak się dowiedziałeś wcześniej, ale nie będziemy
tego musieli, ponieważ i tak nie zatrzymamy tej zawartości i użyjemy biblioteki innej firmy, która pozwala nam łatwo nawigować między
różnymi ekranami i uzyskiwać ładne animacje po drodze, abyśmy nie
musieli się tym przejmować, a
ta biblioteka innych firm będzie również zarządzać wycięciem na urządzeniu i da nam ten obszar zapisywania od razu po
wyjęciu z pudełka.
Zanim jednak dodamy tę bibliotekę innej firmy, zacznijmy pisać kod, ponieważ możemy nawigować między
ekranami tylko wtedy, gdy mamy wiele ekranów.
W tym celu utworzę tutaj nowy folder ekranów i już również utworzę
folder składników, różnica będzie taka, że w folderze ekranów mamy te składniki
React, które następnie wykorzystujemy jako pełne ekrany zamiast tego w folderze składników będziemy mieć składniki, których
używamy
na naszych ekranach, więc na przykład, gdy mamy tę siatkę kategorii posiłków, kategorii żywności,
wówczas nasz element siatki byłby składnikiem, całą siatką, całymi kategoriami żywności ekran byłby jednak
ekranem i myślę, że ma to sens. Teraz, jak naszkicowałem, zgodnie z planem, w tej aplikacji będziemy potrzebować kilku ekranów, a ja
już utworzę wszystkie pliki i oczywiście wypełnimy je życiem w tym module. Będziemy potrzebować ekranu kategorii i nazwiemy
ekran kategorii plików, aby było naprawdę jasne, co jest w
środku.
To jest ekran, na którym możemy wybrać kategorię taką jak włoski, niemiecki, amerykański, więc gdzie możemy
wybrać kategorię żywności, więc dodamy treść, która to odzwierciedla, dodamy taką siatkę na tym ekranie, na
tym ekranie składnik później.
Teraz, gdy wybieramy kategorię, zobaczymy listę posiłków, które pasują do tej kategorii i nazwiemy ten ekran, który
następnie zobaczymy, do którego przejdziemy, ekran kategorii posiłków, ponieważ jest to ekran, który
się ładuje posiłki dla wybranej kategorii.
To kolejny ekran, którego potrzebujemy i kolejny ekran, do którego będziemy mogli nawigować.
Teraz potrzebujemy również ekranu ulubionych, który zawiera wszystkie nasze ulubione przepisy, nasze ulubione posiłki,
a także potrzebujemy MealDetailScreen, to ekran, który widzimy, jeśli dotkniemy jednego posiłku w wybranej
kategorii lub na ulubiony ekran. To pokazuje nam składniki i
szczegółowe kroki tego posiłku.
Teraz i co najważniejsze, będziemy potrzebować ekranu filtrów, a ten ekran filtrów to ekran, który pozwala nam
ustawić filtry, takie jak wegańskie jedzenie, dzięki czemu widzimy tylko przepisy, które są wegańskie lub wegetariańskie, bezglutenowe lub bez laktozy,
będą to cztery kategorie, które
będę mieć w tej aplikacji, więc są to ekrany. Teraz dodamy składniki tak, jak ich potrzebujemy,
i nie dodamy wszystkich plików z
góry, dzięki czemu mamy bardzo podstawową konfigurację, której potrzebujemy tutaj, chociaż oczywiście wszystkie nasze
ekrany są całkowicie puste. Teraz wypełnimy je krok po kroku większą ilością życia,
ale przynajmniej chcę skonfigurować podstawowy komponent na każdym z tych ekranów.
Zacznę od ekranu kategorii i oczywiście musimy tam zaimportować React z React, ponieważ
zbudujemy komponent React, a także zaimportujemy coś z React Native, ponieważ oczywiście zbudujemy tutaj komponent React
korzystający z niektórych komponentów React Native. Mówiąc ściślej, zacznę tutaj prosto i
zaimportuję widok i tekst z React Native, a następnie utworzę mój komponent, ekran kategorii w
tym przypadku, który przyjmuje rekwizyty lub który może otrzymywać rekwizyty przynajmniej dlatego, że jest to jednak normalny komponent
React i gdzie wyeksportuję to jako mój domyślny komponent. Dodam również arkusz stylów, ponieważ są szanse,
że będziemy go potrzebować, a jeśli nie, nadal możemy go usunąć później.
Więc skonfiguruję tutaj swoje style
z tworzeniem arkusza stylów, w ten sposób.
Jest to więc bardzo podstawowy komponent React, jednak niczego
nie renderuje, więc tutaj wewnątrz funkcji komponentu będziemy musieli coś zwrócić, a czymś jest
jakiś kod jsx, w którym chcę renderować widok, a tam tekst i tutaj mówię ekran kategorii.
Teraz dam też temu widokowi styl, w którym mówię style. ekran, z bardzo podstawowym układem ekranu lub stylem ekranu tutaj,
w którym ustawiam flex na jeden, a następnie uzasadniam zawartość, aby wyśrodkować i wyrównuję elementy do środka,
a jak się dowiedziałeś, zrobi to
jedno, spowoduje wyśrodkowanie zawartości na ekranie, więc ostatecznie wyśrodkuje ten tekst na ekranie.
To jest podstawowy komponent i skopiuję tę zawartość na wszystkie inne ekrany i oczywiście
nie jest to końcowa treść, którą tam będziemy, tylko trochę obojętnych treści, abyśmy mogli
zacząć nawigować między niektórymi z tych ekranów i zobaczyć coś .
Mamy tutaj ekran kategorii posiłków, tutaj jest ten składnik i dlatego musimy go
wyeksportować tutaj i tutaj, dlatego powiem taki ekran kategorii posiłków. Teraz dodam to również do ekranu ulubionych i zmienię nazwę na
ekran ulubionych, a więc oczywiście eksportuję ulubiony
ekran tu i potem,
mogę
powiedzieć ekran ulubionych, skopiować go na ekran
filtrów i zrobić to samo, to jest to.
na ekranie filtrów, zmieniłem jego
nazwę i wyeksportowałem to, a także w naszym tekście mówię o ekranie
filtrów, a na koniec jest to MealDetailScreen.
Więc tutaj mamy MealDetailScreen,
ja też nazwiemy go MealDetailScreen tutaj i wyeksportuję MealDetailScreen.
Dzięki temu mamy wszystko ustawione na tych ekranach, teraz prawie
skończyliśmy wszystkie przygotowania, chcę tylko dodać
specjalne czcionki do tej aplikacji, a następnie przejdziemy od razu do dodania nawigacji.