Ekran uruchamiania iOS w React Native

105

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:

LaunchImage w Images.xcassets

Przeczytałem również, że muszę zmodyfikować „Plik ekranu uruchamiania” w sekcji „Ikony aplikacji i obrazy uruchamiania” w moich opcjach:

Uruchom opcje obrazów

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:

wprowadź opis obrazu tutaj

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ę.

JV Lobo
źródło
Dlaczego plik ekranu uruchamiania jest pusty na drugim zrzucie ekranu?
Stefan
1
Ponieważ przeczytałem, że muszę zostawić to pole puste, jeśli chcę, aby aplikacja korzystała z obrazów w katalogu zasobów
JV Lobo
Ok masz rację. Aby lepiej zrozumieć: czy tekst z czarnej ramki u góry pochodzi od Ciebie, czy od reakcji?
Stefan
To od Reacta. Najpierw wyświetlany jest czarny ekran (który byłby ekranem uruchamiania), następnie tekst, który pokazuję na zrzucie ekranu, a po tekście pojawia się moja aplikacja. Ten tekst pojawił się również wcześniej, kiedy moja aplikacja miała domyślny ekran uruchamiania React Native.
JV Lobo
1
odinstaluj z urządzenia, wyczyść projekt i spróbuj zainstalować ponownie
LS_

Odpowiedzi:

120

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

wprowadź opis obrazu tutaj

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:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

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 :

wprowadź opis obrazu tutaj

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

wprowadź opis obrazu tutaj

Teraz w selektorze „ Launch Images Source ” możemy wybrać folder, który utworzyliśmy wcześniej, LaunchImage (ten z naszymi obrazami):

wprowadź opis obrazu tutaj

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:

wprowadź opis obrazu tutaj

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ą.

JV Lobo
źródło
Czy obrazy muszą być w formacie .png Próbuję użyć .jpg
Adam Katz,
Nie próbowałem z obrazami .jpg. Może działa tylko z .png
JV Lobo,
dzięki błędowi, który dostaję w xcode, plik nie ma prawidłowego rozszerzenia, więc wydaje się prawdopodobne, że to jest problem, chociaż nie rozumiem, dlaczego jpg nie działa
Adam Katz
1
Czy musisz mieć wszystkie 5 opcji, moja aplikacja nie jest przeznaczona do użytku w trybie poziomym, więc ją zostawiłem, ale nie działa, więc zastanawiam się, czy to jest to
Adam Katz
1
Po tym nadal miałem problem i musiałem usunąć aplikację z symulatora, aby oryginalny ekran uruchamiania przestał się wyświetlać.
Dan G Nelson
16

Pamiętaj, aby usunąć aplikację z symulatora. Następnie wyczyść swój projekt.

Dan G Nelson
źródło
usunięcie aplikacji z symulatora działa u mnie. dzięki
Andy
Jesteś moim ratownikiem życia. Dziękuję bardzo.
Zatrzymaj
9

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?

> Domyślny ekran uruchamiania Facebooka

Więc pomyślałem, jak oni to zrobili?

Stworzyli LaunchScreen.xib

Myślę, że musi być ku temu powód. Więc wszedłem do LaunchScreen.xibi 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.

Krok 1:

Usunąć LaunchScreen.xib

krok 2:

kliknij images.xcassets prawym przyciskiem myszy w pustej przestrzeni kliknij, **import**a następnie wybierz obraz, który chcesz dodać. wprowadź opis obrazu tutaj

krok 3:

Kliknij prawym przyciskiem myszy folder główny swojego projektu i dodaj nowy plik typu Launch Screeni nadaj mu dowolną nazwę.

wprowadź opis obrazu tutaj

krok 4

Kliknij swój projekt w lewym panelu nawigacyjnym, przejdź do Settings> Generali poniżej App Icons and Launch Images. Upewnij się, że Launch Image Sourcejest pusta i Launch Screen Filema taką samą nazwę jak nowo utworzony ekran uruchamiania.

wprowadź opis obrazu tutaj

krok 5

Kliknij swój nowy plik, który utworzyłeś step 2, przeciągnij Image Viewlub edytuj, jak ci się podoba.

wprowadź opis obrazu tutaj

To wszystko, gotowe. Nie musisz nawet czyścić roztworu, wystarczy go odbudować.

Pociąg
źródło
1
@Noitidart Cieszę się, że mogłem być pomocny.
Pociąg
1
Nie usunąłem nawet LaunchScreen.xib, po prostu usunąłem węzły tekstowe, potem przeciągnąłem w widoku obrazu, zaimportowałem obraz tak, jak opisałeś, a następnie ustawiłem obraz w UIImageView :) Czy jest jakiś sposób, aby to zrobić czuły? Jak na tablecie powinno być 3x, a na telefonie 2x? Również mój UIImageView nie jest wyśrodkowany na wszystkich urządzeniach. :( Oto zrzut ekranu, co mam - i.imgur.com/o5SMgHN.png
Noitidart
1
@Noitidart Dobre znalezisko na tych. Jestem pewien, że byłyby przydatne dla kogoś, kto spojrzy na tę odpowiedź.
Pociąg
1
Dzięki bracie! Myślę, że sposób, w jaki to odkryłeś, jest prawdziwym sposobem na zrobienie tego. Tworzenie obrazów z ustawionym kolorem tła, które są wielkości każdego urządzenia w każdym krajobrazie / portrecie, nie jest sposobem na to (jak robi to najbardziej pozytywna odpowiedź tutaj). Teraz mogę ŁATWO dostosować kolor tła. Skalowanie itp. Można osiągnąć doskonale. Z obrazem wszystko jest na obrazie.
Noitidart
1
w ten sposób proces jest taki sam, jak w przypadku tworzenia szybkiej aplikacji natywnej. fajnie
jasan
8

Aktualizacja

generator-rn-toolboxjest 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.

  • Nie musisz otwierać XCode.
  • Nie musisz tworzyć wielu plików graficznych dla różnych rozdzielczości.
  • W dowolnym momencie zmień ekran uruchamiania za pomocą jednej linii komend.

Wymagania

  • węzeł> = 6
  • Jeden kwadratowy obraz lub plik psd o rozdzielczości większej niż 2208x2208 pikseli na ekran startowy (ekran powitalny)
  • Pozytywny umysł ;)

zainstalować

  1. Zainstaluj generator-rn-toolbox i yo
  2. npm install -g yo generator-rn-toolbox
  3. Zainstaluj imagemagick brew install imagemagick
  4. 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

Jeff Gu Kang
źródło
nie mogę uwierzyć, że muszę o to zapytać ... skąd uruchamiasz polecenie?
AlxVallejo
@AlxVallejo Twój główny katalog projektów.
Jeff Gu Kang
„Nie można znaleźć
✖ splasha
@AlxVallejo Czy był tam plik Twojego obrazu? Używam go pożytecznie.
Jeff Gu Kang,
1
generator-rn-toolboxrzeczywistość robi wszystko to, co zaakceptowana odpowiedź.
Felix
6

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!

Brud
źródło
5

Upewnij się, że opcja „Uruchom plik ekranu” jest pusta: wprowadź opis obrazu tutaj

PoseLab
źródło
1

Ś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

Pankaj Sharma
źródło
1

Dla mnie dalej XCode 10.1i react-native 59.2musiałem przejść przez dodatkowe kroki po dodaniu już zdjęć, storyboardu i 1 uniwersalnego obrazu.

  • Kliknij obraz prawym przyciskiem myszy, kliknij Show in Finder, a następnie edytuj Contents.jsonplik
  • Dodaj obraz do sekcji 2x i 3x
  • Przejdź do scenorysu ekranu uruchamiania z menu „linijka”
  • Upewnij się, że świecą się tylko wewnętrzne czerwone strzałki, a nie zewnętrzne czerwone strzałki
  • Kliknij opcję „Bezpieczne względne marginesy obszaru”

wprowadź opis obrazu tutaj

Obraz powinien być teraz wyśrodkowany na iPhone'ach wszystkich rozmiarów (testowane na Portret).

Sara Inés Calderón
źródło
0

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.

wprowadź opis obrazu tutaj

Dodaj do widoku ograniczenia końcowe, wiodące, dolne i górne. Jak pokazano niżej -

wprowadź opis obrazu tutaj

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 -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

Możesz polecić - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Ronit
źródło
0

Tylko dla tych, którzy nadal mają problemy, brakuje jeszcze jednego kroku z zaakceptowanej odpowiedzi przed uruchomieniem ekranu uruchamiania iOS.

Otwórz Info.plistw folderze projektu i usuń klucz „Nazwa bazowa głównego pliku nib”. Następnie odbuduj i miejmy nadzieję, że problem zniknął.

Loukas Andreadelis
źródło
0

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.

  1. Otwórz Xcode i zlokalizuj LaunchScreen.xibplik w swoim projekcie (zwróć uwagę, że jest to ekran, który jest wyświetlany domyślnie w iOS)
  2. Aby usunąć / edytować tekst na ekranie, kliknij go i wprowadź niezbędne zmiany, jak chcesz.
  3. Aby zmienić kolor tła, znajdź następujące ikony na prawym pasku bocznym i kliknij mały przycisk z ikoną na samej górze, czwarty od lewej (kiedy najedziesz kursorem, zobaczysz „Pokaż inspektora atrybutów”)

wprowadź opis obrazu tutaj

  1. Teraz, gdy wiesz, jak zmienić kolor tła, dodaj obraz do ekranu powitalnego, aby to zrobić, kliknij następujący przycisk i wybierz widok obrazu z listy, a następnie przeciągnij i umieść go w dowolnym miejscu na ekranie powitalnym.

wprowadź opis obrazu tutaj

  1. Teraz musimy dodać obraz do pliku Images.xcassets, abyśmy mogli się do niego odwołać, LaunchScreen.xibaby to zrobić Images.xcassets. kliknij +przycisk, a importnastępnie, a następnie dodaj obraz, który chcesz wyświetlić na ekranie powitalnym. Poniżej AppIconzobaczysz nazwę pliku obrazu. To jest nazwa, do której będziemy odwoływać się w naszymLaunchScreen.xib

  2. Teraz musimy odwołać się do obrazu, który dodaliśmy w LaunchScreen.xibpliku, więc wróć do LaunchScreen.xibi kliknij ten image view, który dodaliśmy wcześniej, a w prawym rogu zobaczysz kilka opcji. kliknij pierwszy, który mówi imagei wybierz obraz, który zaimportowałeś w kroku 5

wprowadź opis obrazu tutaj

  1. wyczyść projekt i uruchom, react-native run-iosa powinieneś zobaczyć zmiany.
Hadi Mir
źródło
-5

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ć.

eyal83
źródło
Dziękuję za odpowiedź. Nie rozumiem dobrze, bo myślę, że popełniłeś literówkę. Przeprowadziłem globalne wyszukiwanie w moim projekcie, aby usunąć odniesienia do LaunchScreen.xib, pero nie ma żadnych odniesień do pliku: puu.sh/lGu7z/8fd88a886e.png Dzięki.
JV Lobo