Zanim przejdziemy do procesu kompilacji lub publikacji, a tym samym dostarczymy go do sklepów z
aplikacjami, kontynuujmy konfigurowanie tego.
Na przykład, istnieją tutaj pewne puste pola, takie jak brakujący opis, który można
dodać, dodając
tutaj klucz opisu z jakimś tekstem, a byłby to opis, który się tutaj pojawi.
Ważne, to nie jest opis, który pojawia się
w sklepach z aplikacjami, to po prostu opis, który pojawia się tutaj i
możesz dowiedzieć się więcej o opisie, wszystkich innych kluczach, które możesz ustawić tutaj na tej stronie.
W końcu można ustawić wiele ustawień.
Teraz interesuje mnie teraz ikona i część ekranu powitalnego, ponieważ jest to ikona, którą ludzie
zobaczą na ekranie głównym,
oczywiście jeszcze nie, ponieważ teraz nie publikujemy aplikacji w App Store, ale to się
zmieni i
ekran powitalny - to właśnie widzą użytkownicy,
gdy ładuje się nasza aplikacja, i oba te elementy zazwyczaj chcesz dostosować.
Teraz expo daje Ci ikonę i ekran powitalny po wyjęciu z pudełka, ale oba są po prostu pustym miejscem zastępczym, prawda,
więc to nie jest zbyt niesamowite, zamiast
tego chcemy udostępnić naszą własną ikonę, nasz własny ekran powitalny tutaj.
Teraz jesteś bardzo elastyczny w kwestii tego, co tu podajesz, ale ogólnie
dobrym pomysłem jest zapewnienie ikony w rozdzielczości 1024 x 1024, więc kwadratową
ikonę jako dane wejściowe, a dla ekranu powitalnego możesz zbudować ekran powitalny jako opisane w oficjalnych dokumentach, w których
można dowiedzieć się więcej o tym, jak zbudować taki ekran powitalny,
jak go zbudować i tak dalej.
Teraz przygotowałem dla ciebie coś, co możesz wykorzystać, a teraz nie powinieneś używać go do rzeczywistego wdrożenia, ponieważ
te zasoby są tylko na ten kurs, a nie do użycia w aplikacji, którą planujesz
wdrożyć i dla tego, co znajdziesz ikony. plik zip.
Teraz, jeśli go rozpakujesz, znajdziesz tam miejsca. Plik png, który możesz oczywiście przeciągnąć i upuścić
w folderze
zasobów, możesz również usunąć ikonę. tam plik png, jeśli chcesz.
Możesz także usunąć splash. plik png, ponieważ w tym załączonym folderze znajduje
się również ikona powitania. plik png, który oczywiście możesz również przeciągnąć i upuścić tutaj.
Teraz to tylko niektóre ikony, które utworzyłem, których możemy używać teraz
i ponownie w aplikacji. plik json, możemy teraz wskazać niestandardowe ikony. Ważne, powinieneś dostarczyć pliki
png, ponieważ robię to tutaj.
Teraz dla ikony możemy wskazać zasoby / miejsca. png, a dla powitania możemy wskazać
ten zasób / splash_icon. png Teraz jako kolor tła możemy użyć ciemnego czarnego
koloru, takiego
jak kod szesnastkowy # 171717, powinien to być kolor szesnastkowy taki jak ten, a tryb zmiany rozmiaru można ustawić
tak, aby zawierał lub zakrywał, okładka zasadniczo rozciągnie ikonę, aby wziąć pełna dostępna szerokość
i wysokość, zawierać będzie zachować rozmiar ikony, wyśrodkować ją i mieć kolor tła za ikoną.
Teraz, jeśli to zrobimy, możemy zobaczyć wynik tego, jeśli po
prostu npm uruchomimy to, więc serwer, jak to robiliśmy wiele razy w tym kursie lub expo, a następnie uruchamiamy to na emulatorze,
Androidzie lub iOS ponownie, gdy I robię to tutaj. Teraz to uruchamia go tam i teraz widzisz, to jest
ekran powitalny, który już robi nowy, z obrazem, który jest nasz duży, ale jest celowy,
abyśmy mogli go wyraźnie zobaczyć, a kolor tła jest nieco inny, więc że
masz również szansę to zobaczyć, oczywiście możesz wybrać ten sam kolor, aby
mieć tutaj płynny ekran powitalny.
Więc to działa i poczekajmy na to, aby
się skończyło, a aplikacja jest uruchomiona, a teraz zobaczysz swoją ikonę tutaj,
jeśli przejdziesz do przełącznika zadań. Widzisz, nie wygląda tak dobrze z tłem,
ale możemy to poprawić,
ale tutaj jest ikona, więc działa, widzimy zarówno ekran powitalny, jak i ikonę, a na iOS
byłoby to samo. Teraz, jak widać,
ikona na Androida nie wygląda tak dobrze.
Powodem tego jest to, że Android w zależności od wersji Androida uruchomionej
na urządzeniu używa różnych ikon, nowsze nowsze wersje Androida używają tak zwanych ikon adaptacyjnych, które są
zaokrąglonymi ikonami, na których ikona znajduje się pośrodku a potem jakiś kolor tła lub
obraz tła, nawet za
nimi, starsze wersje używałyby kwadratowych ikon.
Teraz możesz to zrobić, udostępniając bardziej szczegółową konfigurację dla systemu Android, a także
dla systemu iOS, jeśli chcesz. Zamiast mieć tutaj ten ogólny klucz do ikon, możesz skonfigurować ustawienia specyficzne dla platformy
i jest to również coś, czego nauczyłeś się w oficjalnych dokumentach.
Znajdziesz tam informacje o tym, jak możesz skonfigurować powitanie ikony, to miłe, ale
także o tym, jak możesz skonfigurować iOS w określony sposób,
a tam możesz ustawić ikonę specyficzną dla iOS, jeśli chcesz tego użyć.
Oczywiście to samo dotyczy ekranu powitalnego, więc możesz w zasadzie dodać węzeł iOS do swojej
konfiguracji, mamy już to tutaj, a tam, możesz również dodać ikonę, a następnie także konfigurację powitalną, która wygląda dokładnie lub
która wyglądałoby dokładnie tak, jak tutaj mamy konfigurację roota, ale teraz możesz
w zasadzie zastąpić te ogólne ustawienia poziomu roota i mieć specjalną ikonę dla iOS i
specjalny ekran powitalny dla iOS.
To jest coś, co możesz zrobić, to samo dotyczy Androida i oczywiście znajdziesz to również
w oficjalnych dokumentach.
Możesz dodać klucz Androida tutaj do swojej aplikacji. plik json, a następnie zawiera obiekt, więc
można powiedzieć, że można również skonfigurować ikonę i konfigurację powitalną, tak jak to wyjaśniłem dla iOS, a
teraz te ustawienia zostaną przyjęte dla Androida, iOS,
ponieważ nie ma określonych ustawień w moim przykładzie tutaj nadal używałbym ogólnych
ustawień tam.
Ciekawą rzeczą jest to, że na Androida nie można po prostu ustawić konkretnego ekranu
powitalnego ikony, można także ustawić tutaj ikonę adaptacyjną z konfiguracją ikony adaptacyjnej, która nie jest dostępna dla iOS, ponieważ
ikony adaptacyjne są dostępne wyłącznie dla Androida.
Ikona adaptacyjna pobiera obiekt JavaScript, który można powiedzieć jako wartość konfiguracyjną, a nie ciąg, a obiekt ten
może mieć trzy klucze - obraz pierwszego planu, kolor tła lub obraz tła.
Teraz masz kolor tła lub obraz tła, ale zawsze powinieneś mieć obraz
pierwszego planu.
Teraz możemy dodać obraz pierwszego planu, więc ten klucz tutaj
i kolor tła, który powinien być sześciocyfrowym kodem szesnastkowym, jak widać, i zróbmy to
szybko tutaj, a teraz możemy ustawić kolor tła, powiedzmy, że kod # 171717
i obraz pierwszego planu można teraz ustawić na naszą ikonę, chociaż
w tym celu zaleciłbym użycie konkretnej ikony,
którą również tutaj dołączasz, miejsca-adaptacji. plik png, który można przeciągać i upuszczać w folderze zasobów i który dostosowuje się do miejsc. Plik png może być teraz używany tutaj
jako obraz pierwszego planu, dzięki czemu możemy wskazywać na zasoby, a następnie dostosowywać się do
miejsc. png
Teraz ta ikona, ikona dostosowująca miejsca jest przezroczysta, nadal jest ikoną, ale
ma przezroczyste tło, w przeciwieństwie do innej ikony, dzięki czemu Android
może umieścić ją przed tym kolorem tła lub obrazem tła, który podałeś
i automatycznie za rogami dla ciebie i tak dalej.
Więc jeśli teraz to zapiszemy, a to odbuduje i dla bezpieczeństwa, że to naprawdę bierze to pod uwagę,
zrestartuję tutaj mój serwer expo.
Jeśli teraz uruchomimy to na Androidzie i w tym celu zamknę również klienta expo, a
następnie uruchomię go ponownie
na Androidzie, powinniśmy zobaczyć, że po ponownym uruchomieniu
mamy teraz ładniejszą ikonę, która wygląda nieco lepiej.
Poczekajmy, aż to się
uruchomi, to wciąż ekran powitalny, tak jak go wcześniej konfigurowaliśmy, nie ustawiłem też ekranu powitalnego dla Androida, co
oczywiście możemy, ale tutaj nie zrobiłem,
więc oczywiście otrzymaliśmy to samo ekran powitalny, jak wcześniej w tym module, a jeśli
spojrzysz teraz na ikonę, możesz niestety nadal zobaczyć stary. Nowa zostanie wzięta pod uwagę,
gdy zbudujemy tę aplikację jako samodzielną aplikację i rozpowszechnimy ją w sklepach z aplikacjami.
Ogólnie zaleca się, aby dla Androida ustawić taką ikonę adaptacyjną, ponieważ obejmuje ona
więcej wersji Androida, co oczywiście nie boli. Ustawienie takiej ogólnej ikony również nie jest złym pomysłem i oczywiście możemy
albo
użyć jednej i tej samej ikony zarówno dla iOS, jak i Androida, lub ustawić określone ikony dla
iOS i Androida, jak wspomniano w przypadku Androida, ewentualnie ikonę adaptacyjną. Jeśli chcesz dowiedzieć się więcej o procesie
tworzenia ikon i ekranów powitalnych oraz zarządzania nimi, w załączeniu znajdziesz oficjalne dokumenty
expo, które zagłębiają się w różne dostępne opcje i to, co powinieneś rozważyć.