Pracuję z aplikacją React Native i próbuję ustawić dostosowany ekran uruchamiania, ale nie mogę.
React Native tworzy domyślnie LaunchScreen.xib, więc utworzyłem LaunchImage wewnątrz Images.xcassets:
Przeczytałem również, że muszę zmodyfikować „Plik ekranu uruchamiania” w sekcji „Ikony aplikacji i obrazy uruchamiania” w moich opcjach:
Kiedy to zrobiłem, mój ekran uruchamiania stał się całkowicie czarny, a po załadowaniu aplikacji są zarówno górne, jak i dolne czarne ramki:
Więc nie wiem, co mam zrobić, aby ustawić ekran startowy w moim projekcie React Native.
Będę wdzięczny, jeśli ktoś pomoże mi z tymi problemami.
Z góry dziękuję.
ios
xcode
react-native
asset-catalog
JV Lobo
źródło
źródło
Odpowiedzi:
Udało mi się rozwiązać problem za pomocą tego wątku: Uruchom obraz nie pojawia się w aplikacji na iOS (za pomocą Images.xcassets)
Więc wyjaśnię to dogłębnie na wypadek, gdyby mogło to pomóc komuś innemu.
Najpierw musisz stworzyć określone obrazy. Użyłem do tego tego szablonu i tej strony internetowej z automatycznym generatorem: TiCons
Kiedy pobrałem moje obrazy, wziąłem te z folderu asset / iphone, wziąłem tylko te:
Potrzebujesz również tego pliku Contents.json w tym samym folderze, mam go od znajomego:
W tym momencie utworzyłem folder o nazwie LaunchImage.launchimage w folderze Images.xcassets w moim projekcie React Native i zapisałem w nim obrazy i plik Contents.json :
Po drugie , musisz otworzyć swój projekt w Xcode iw ustawieniach „Ogólne”, poniżej „ Ikony aplikacji i uruchom obrazy ” musimy pozostawić opcję „ Uruchom plik ekranu ” pustą (możemy również usunąć plik LaunchScreen.xib z naszego projektu ), a następnie kliknij „ Użyj katalogu zasobów ”. Otworzy się okno , wybieramy migrację obrazów katalogu
Teraz w selektorze „ Launch Images Source ” możemy wybrać folder, który utworzyliśmy wcześniej, LaunchImage (ten z naszymi obrazami):
Wybieramy to zamiast Zasoby marki i możemy usunąć folder Zasoby marki .
W tym momencie będziemy mogli uruchomić naszą aplikację React Native z naszymi niestandardowymi obrazami startowymi:
Wiem, że wydaje się to trochę skomplikowane jak na rzekomo łatwe zadanie, ale po wielu przeczytaniu o tym był to jedyny sposób, w jaki mogłem uruchomić moje obrazy powitalne, więc chciałem podzielić się nimi ze społecznością.
źródło
Pamiętaj, aby usunąć aplikację z symulatora. Następnie wyczyść swój projekt.
źródło
Często przyglądałem się tym odpowiedziom w SO zawierających rozwiązania dotyczące tworzenia nowego ekranu uruchamiania. To znaczy, pomyślmy o tym przez chwilę.
Kiedy tworzymy nowy reaktywny projekt, co widzimy na ekranie startowym?
Więc pomyślałem, jak oni to zrobili?
Myślę, że musi być ku temu powód. Więc wszedłem do
LaunchScreen.xib
i dokonałem zmiany w domyślnym tekście „React Native…” lub cokolwiek tam było powiedziane. Uruchomiłem aplikację jeszcze raz, aby zobaczyć, czy ekran uruchamiania odzwierciedla moje zmiany.Rozwiązanie 1 Edytuj istniejący plik LaunchScreen.xib
Rozwiązanie 2 Utwórz własne
Tak więc zrobiłem, wpisanie tej odpowiedzi zajęło mi więcej czasu niż nauka tworzenia własnej.
Both of these solutions are compatible with all the devices.
Usunąć
LaunchScreen.xib
kliknij
images.xcassets
prawym przyciskiem myszy w pustej przestrzeni kliknij,**import**
a następnie wybierz obraz, który chcesz dodać.Kliknij prawym przyciskiem myszy folder główny swojego projektu i dodaj nowy plik typu
Launch Screen
i nadaj mu dowolną nazwę.Kliknij swój projekt w lewym panelu nawigacyjnym, przejdź do
Settings
>General
i poniżejApp Icons and Launch Images
. Upewnij się, żeLaunch Image Source
jest pusta iLaunch Screen File
ma taką samą nazwę jak nowo utworzony ekran uruchamiania.Kliknij swój nowy plik, który utworzyłeś
step 2
, przeciągnijImage View
lub edytuj, jak ci się podoba.To wszystko, gotowe. Nie musisz nawet czyścić roztworu, wystarczy go odbudować.
źródło
Aktualizacja
generator-rn-toolbox
jest przestarzałe. Zamiast tego użyj polecenia make-native-make .stara odpowiedź
Polecam generator-rn-toolbox do stosowania ekranu startowego lub głównej ikony przy użyciu narzędzia React-Native. Jest prostszy i łatwiejszy w użyciu dzięki cli jako natywny.
Wymagania
zainstalować
npm install -g yo generator-rn-toolbox
brew install imagemagick
Zastosuj ekran powitalny na iOS
yo rn-toolbox:assets --splash YOURIMAGE.png --ios
lub Android
yo rn-toolbox:assets --splash YOURIMAGE.png --android
To wszystko. :)
Źródło
źródło
generator-rn-toolbox
rzeczywistość robi wszystko to, co zaakceptowana odpowiedź.Po prostu przeszedłem przez to i działa świetnie. Jedyną przeszkodą, jaką odkryłem, było nie wyczyszczenie zawartości symulatora. Jeśli okaże się, że nowy ekran uruchamiania nie działa, otwórz symulację i przejdź do następujących opcji:
Symulator> Zresetuj zawartość i ustawienia
W tym symulatorze musi odbywać się twarde buforowanie, ale kiedy to zrobisz - uruchom ponownie, a zobaczysz aplikację. Upewnij się, że robisz to zarówno dla symulatorów xcode, jak i symulatorów natywnych reagowania!
źródło
Upewnij się, że opcja „Uruchom plik ekranu” jest pusta:
źródło
Śledź ten link:
Jeśli chcesz dodać ekran powitalny do mojej aplikacji React Native, postępuj zgodnie z procesem, a wynik będzie Twój.
KROK: 1 Najpierw utworzyłem folder splashImageResource i dodałem plik launchScreen.xib z obrazem powitalnym.
KROK: 2 zmień kod zgodnie z zapisem w tagu subviews. z tym kodem
<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>
KROK: 3 Powinieneś otworzyć swoją aplikację w Xcode. Oto kroki, które należy wykonać:
a) Przejdź do folderu swojego projektu
b) Otwórz folder ios
c) Przejdź do pliku z rozszerzeniem .xcodeproj, w moim przypadku jest to splasScreenTutorial.xcodeproj
d) Otwórz ten plik w swoim Xcode.
e) Usuń plik launchScreen.xib.
f) Kliknij folder splashScreenTutorial, a następnie przejdź do sekcji CELE
g) Kliknij kartę Ogólne w lewym górnym rogu Xcode i przewiń w dół do ikon aplikacji i uruchom obrazy
h) Przejdź do Uruchom źródło obrazów i kliknij Użyj katalogu zasobów. Kliknij migrację.
i) Usuń tekst LaunchScreen z Launch Screen File.
j) Wróć do folderu projektu i otwórz plik Images.xcassets. Powinieneś zobaczyć AppIcon i LaunchImage.
k) Następnie kliknij LaunchImage, Na koniec przeciągnij obrazy ekranu powitalnego o różnych rozmiarach do pola Launch Image.
Przeciągnij obrazy w ten sposób.
Testowy ekran powitalny a) Aby zobaczyć zmiany, musisz usunąć aplikację ze swojego symulatora, jeśli początkowo ją uruchomiłeś.
b) Aby usunąć aplikację, kliknij menu Sprzęt na pasku symulatora i przejdź do strony głównej.
c) Stuknij i przytrzymaj ikonę aplikacji, którą chcesz usunąć, a następnie kliknij znak X na tej ikonie.
d) Ponownie uruchom aplikację, korzystając z natywnych run-ios
Możesz zobaczyć swój ekran powitalny
źródło
Dla mnie dalej
XCode 10.1
ireact-native 59.2
musiałem przejść przez dodatkowe kroki po dodaniu już zdjęć, storyboardu i 1 uniwersalnego obrazu.Show in Finder
, a następnie edytujContents.json
plikObraz powinien być teraz wyśrodkowany na iPhone'ach wszystkich rozmiarów (testowane na Portret).
źródło
Jeśli chcesz użyć istniejącego pliku Launch Screen .xib skonfigurowanego przez React Native, ale z własnym logo i kolorem tła (i bez żadnego domyślnego tekstu React Native), możesz postępować zgodnie z instrukcjami tutaj: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .
źródło
Jeśli utworzysz ekran uruchamiania za pomocą Reacta, powinieneś dodać to samo w pliku LaunchScreen.xib w iOS Xcode, abyś mógł zrobić zrzut ekranu i dodać go jako obraz w Images.xcassets.
Otwórz LaunchScreen, a następnie dodaj UIImageView w widoku z biblioteki obiektów z prawego panelu w Xcode.
Dodaj do widoku ograniczenia końcowe, wiodące, dolne i górne. Jak pokazano niżej -
Nie zapomnij zmienić UIImageView ContentMode na AspectFit, aby wyglądał tak samo po uruchomieniu aplikacji.
Następnie musisz dodać kod w AppDelegate, aby nie uzyskać białego ekranu. Kod to -
Możesz polecić - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip
źródło
Tylko dla tych, którzy nadal mają problemy, brakuje jeszcze jednego kroku z zaakceptowanej odpowiedzi przed uruchomieniem ekranu uruchamiania iOS.
Otwórz
Info.plist
w folderze projektu i usuń klucz „Nazwa bazowa głównego pliku nib”. Następnie odbuduj i miejmy nadzieję, że problem zniknął.źródło
Po wykonaniu powyższych rozwiązań moja aplikacja utknęła na ekranie powitalnym, więc wykonałem następujące 7 kroków, aby dodać niestandardowy ekran powitalny na iOS.
LaunchScreen.xib
plik w swoim projekcie (zwróć uwagę, że jest to ekran, który jest wyświetlany domyślnie w iOS)Teraz musimy dodać obraz do pliku
Images.xcassets
, abyśmy mogli się do niego odwołać,LaunchScreen.xib
aby to zrobićImages.xcassets
. kliknij+
przycisk, aimport
następnie, a następnie dodaj obraz, który chcesz wyświetlić na ekranie powitalnym. PoniżejAppIcon
zobaczysz nazwę pliku obrazu. To jest nazwa, do której będziemy odwoływać się w naszymLaunchScreen.xib
Teraz musimy odwołać się do obrazu, który dodaliśmy w
LaunchScreen.xib
pliku, więc wróć doLaunchScreen.xib
i kliknij tenimage view
, który dodaliśmy wcześniej, a w prawym rogu zobaczysz kilka opcji. kliknij pierwszy, który mówiimage
i wybierz obraz, który zaimportowałeś w kroku 5react-native run-ios
a powinieneś zobaczyć zmiany.źródło
Jako zestaw obrazów należy ustawić źródło obrazu ekranu startowego. Następnie usuń plik LauncScreen.xib. Następnie wykonaj globalne wyszukiwanie w swoim projekcie i usuń wszystkie odniesienia do LaunchScreen.xib (spójrz na cały projekt. Używam subtelnego edytora tekstu, więc jest to cmd + shift + f) i powinno działać.
źródło