Dodawanie ekranu powitalnego do aplikacji React Native na iOS i Android

Umieszczenie aplikacji React Native w sklepach wymaga czegoś więcej niż samego jej stworzenia. Przed przeglądem potrzebne są ikony, opisy oraz ekran powitalny, a to właśnie przy ekranie powitalnym wchodzi w grę kod natywny. Poniższe kroki dotyczą platform iOS i Android w ich odpowiednich IDE, z niewielką ilością kodu natywnego. Instrukcje pochodzą z okresu react-native-splash-screen (wersja 3.0.6 oraz react-native link), więc nowsze wersje React Native mogą radzić sobie z łączeniem w inny sposób.

Projekty stworzone za pomocą Expo lub Create React Native App nie wymagają niczego z tego, ponieważ ich własna dokumentacja omawia ekrany powitalne w zaledwie kilku linijkach.

Dobrym punktem wyjścia jest nowy projekt, na przykład react-native init SplashExample. Umieść go pod kontrolą źródeł przed jakimikolwiek zmianami. Dzięki temu błędy można łatwo cofnąć, a także precyzyjnie zobaczyć, które pliki są dotykane przez ekran powitalny.

Projektowanie zasobów

Starszy podejście polegało na użyciu jednego dużego obrazu jako ekranu startowego, który źle się skalował przy rosnącej liczbie rozdzielczości ekranów. Lepszy plan zakłada użycie prostego kwadratowego obrazu przypominającego ikonę aplikacji, z dwóch powodów.

1. Stwarza wrażenie, że ikona, na którą kliknęliśmy, powiększa się i wypełnia ekran, co sprawia, że przejście wydaje się ciągłe.
2. Pozostaje proste. Ekran startowy powinien być widoczny przez kilka milisekund, więc nie powinien zawierać żadnych informacji. To przecież ekran ładowania.

Eksportuj kwadratowy obraz w trzech rozmiarach: 200 px dla @1x, 400 px dla @2x i 600 px dla @3x.

Tło, które uwydatnia błyski

Jeśli wcześniej próbowałeś używać ekranu powitalnego w React Native, być może zauważyłeś białe błyski przed pojawieniem się treści. W aplikacji z białym tłem jest to trudne do zauważenia, ale nadal irytujące. Aby uniknąć takich błysków, nadaj aplikacji demonstracyjnej ciemne tło: ustaw kolor tła na #4F6D7A, kolor tekstu na #F5FCFF oraz zmień kolor tekstu w pasku stanu na jasny, wszystko to w pliku App.js.

iOS

Otwórz projekt w Xcode:

open ios/SplashExample.xcodeproj

Najpierw dodaj zasób w postaci obrazka. W lewym narzędziu nawigacyjnym przejdź do folderu SplashExample, potem ponownie do SplashExample, następnie do Images.xcassets, a następnie naciśnij przycisk plus w drugiej kolumnie narzędzia nawigacyjnego. Nazwij ten zasób SplashIcon. Wklej trzy obrazki – Xcode automatycznie przypisze każdy z nich odpowiednią gęstość pikseli.

Następnie otwórz plik LaunchScreen.xib z lewego narzędzia nawigacyjnego. Zawiera on dwa elementy tekstowe: nazwę projektu oraz napis „Powered by React Native”. Wybierz oba i usuń je.

Ustaw tło widoku. W drugim narzędziu nawigacyjnym wybierz element View, a następnie w prawej karcie wybierz opcję Background, aby otworzyć wybieracz kolorów. Wskazówka, której odkrycie zajmuje trochę czasu: wybierz drugą kartę w wybieraczu, potem opcję „RGB Sliders” – pojawi się pole, w którym można wpisać wartość heksadecymalną. Wpisz #4F6D7A.

Następnie dodaj widok obrazu. Otwórz bibliotekę obiektów (trzeci ikonka w prawym dolnym rogu panelu narzędzi), wyszukaj „image” i przeciągnij widok obrazu na kolorowy obszar wyświetlania. W panelu atrybutów w prawym górnym rogu wybierz SplashIcon jako obraz. Ustaw tryb zawartości na „Aspect Fit”, który znajduje się drugi od góry w tym panelu, aby proporcje pozostały prawidłowe.

Aby ikona była zawsze centralna na każdym urządzeniu, otwórz zakładkę linijki miary (piąta ikonka u góry prawego panelu). W polu „Autoresizing” wyłącz zewnętrzne czerwone linie i włącz wewnętrzne czerwone strzałki. Obraz pozostanie centralny niezależnie od rozmiaru ekranu.

W ten sposób powstaje ekran startowy, ale biały błysk nadal się pojawia.

Dlaczego występuje błysk

Gdy aplikacja się uruchamia, iOS natychmiast pokazuje ekran startowy. Następnie React Native potrzebuje czasu na uruchomienie się: ładowany jest JavaScript, a most komunikacyjny jest inicjalizowany. W tym okresie ekran startowy typu native znika i nic jeszcze nie zostało wyrenderowane, więc widzimy białą powierzchnię. Rozwiązaniem jest utrzymanie ekranu splash nieco dłużej niż to standardowe, dopóki JavaScript nie będzie gotowy. Pakiet react-native-splash-screen robi to za nas.

Zainstaluj go i powiąż z aplikacją:

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Następnie skonfiguruj stronę natywną. W Xcode otwórz plik AppDelegate.m, dodaj import pliku nagłówkowego pakietu SplashScreen.h obok innych importów i wywołaj [SplashScreen show]; bezpośrednio nad return YES; wewnątrz funkcji didFinishLaunchingWithOptions.

Ze strony JavaScriptowej poinformuj ekran startowy, aby zniknął po przygotowaniu aplikacji. Wywołaj metodę ukrywania pakietu z funkcji componentDidMount w pliku App.js.

Wynik wygląda dobrze, pozostaje tylko jedna drobna uwaga: kolor paska stanu podczas wyświetlania ekranu startowego. W pliku Info.plist dodaj wiersz z kluczem UIStatusBarStyle i wartością typu ciąg UIStatusBarStyleLightContent. Po tym strona iOS jest gotowa.

Android

Android wymaga nieco więcej pracy, ponieważ potrzebne są dwa oddzielne ekrany startowe. Jeden należy do biblioteki react-native-splash-screen, a drugi pojawia się przed tym, jak aplikacja wyświetli swoje elementy.

Zasoby

Kopiuj obrazy do folderów mipmap znajdujących się w katalogu android/app/src/main/res. Android nazywa swoje grupy rozdzielczości inaczej niż iOS, dlatego pliki muszą zostać przyporządkowane:

• Do mipmap-mdpi trafia obraz o rozdzielczości 1x.
• Do mipmap-hdpi trafia obraz o rozdzielczości 2x.
• Do mipmap-xhdpi trafia obraz o rozdzielczości 3x.
• Do mipmap-xxhdpi również trafia obraz o rozdzielczości 3x.

Wewnątrz każdego folderu przemień nazwę pliku na icon.png.

Ekran startowy przy pierwszym uruchomieniu

Pierwszy ekran pojawia się, gdy aplikacja uruchamia się z stanu początkowego. Podejście to opiera się na dobrze znanej publikacji Big Nerd Ranch na temat prawidłowego tworzenia ekranów startowych, która szczegółowo wyjaśnia zasady tego rozwiązania.

1. Stwórz plik background_splash.xml w katalogu android/app/src/main/res/drawable. Prawdopodobnie będziesz musiał najpierw utworzyć katalog drawable. Plik ten definiuje layer-list, czyli stos warstw. Pierwsza warstwa wypełnia się kolorem tła (określonym w dalszej części), a druga wyświetla ikonę o szerokości i wysokości 200dp, umieszczoną centralnie.
2. Stwórz plik colors.xml w katalogu android/app/src/main/res/values i zdefiniuj kolor niebieski, taki sam, jakiego używa aplikacja.
3. W pliku styles.xml znajdującym się w tej samej folderze zdefiniuj SplashTheme. Powinien on używać background_splash jako tła okna oraz koloru niebieskiego dla paska stanu, co w maksymalnym stopniu naśladuje prawdziwą aplikację, łącznie ze zmianą paska stanu. Upewnij się również, że kolor paska stanu domyślnego tematu jest poprawnie ustawiony.
4. W pliku AndroidManifest.xml spraw, aby aplikacja najpierw używała SplashTheme. Wewnątrz tagu <application> zarejestruj nową aktywność SplashActivity jako punkt startowy, a dostosuj MainActivity tak, aby nie była już punktem startowym. Zwróć uwagę na atrybut android:exported="true", który musi być ustawiony tam, gdzie jest to wymagane w nowszych wersjach Androida.
5. Stwórz plik SplashActivity.java. Jego jedynym zadaniem jest natychmiastowe przekierowanie do MainActivity, czyli rzeczywistej aplikacji React Native.

Zainstaluj aplikację, zamknij ją, aby następne uruchomienie było rozpoczynane od zera, a następnie otwórz ją ponownie. Ekran startowy pojawia się natychmiast, a za nim ten sam biały błysk. Naprawa tego problemu wymaga nieco więcej pracy niż w przypadku iOS, ale nie zbyt wiele.

Zatrzymanie ekranu startowego do chwili gotowości JavaScript

Jeśli pakiet jeszcze nie został zainstalowany, dodaj go i powiąż:

yarn add react-native-splash-screen@3.0.6
react-native link

Konfiguruj stronę natywną Androida, dodając wywołanie inicjalizacji pakietu w pliku MainActivity.java. W pliku App.js upewnij się, że ekran startowy zamyka się natychmiast po załadowaniu aplikacji, tak jak w iOS.

Następnie utwórz plik launch_screen.xml w katalogu android/app/src/main/res/layout. Nazwa ma znaczenie, ponieważ biblioteka jej szuka. Jako element korzeniowy użyj LinearLayout. Android Studio posiada edytor wizualny podobny do Interface Buildera w Xcode, ale bezpośrednia edycja XML jest tutaj prostsza. Ustaw grawitację układu na środek, a tło na niebieskie, pozostawiając resztę na wartościach domyślnych. Wewnątrz dodaj ImageView, który wyświetli ikonę.

Właściwości ImageView:

• android:layout_width i android:layout_height określają rozmiar, zgodny z tym, który jest używany w pliku background_splash.xml.
• android:layout_marginTop odpowiada wysokości paska stanu. Jeśli go pominąć, ikona pojawi się w nieco innej lokalizacji niż na pierwszym ekranie startowym, co powoduje widoczny skok przy ich zamianie.
• android:src="@mipmap/icon" wskazuje na obrazek.

Na koniec plik colors.xml wymaga jeszcze jednej pozycji:

<color name="primary_dark">#4F6D7A</color>

Jeśli to pominąć, aplikacja zawiesza się podczas uruchamiania. Przyczyną jest błąd w samym react-native-splash-screen, więc przyszła wersja może sprawić, że ten element stanie się niepotrzebny.

Gdy oba elementy są obecne, aplikacja uruchamia się z ciągłym ekranem startowym bez migania zarówno na iOS, jak i na Androidzie.