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

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:

• Default@2x.png ( 640x960 )
• Domyślnie-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Lcapes-736h@3x.png (2208x1242)

Potrzebujesz również tego pliku Contents.json w tym samym folderze, mam go od znajomego:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "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 :

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

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

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

krok 3:

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

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.

krok 5

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

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

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

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!

Upewnij się, że opcja „Uruchom plik ekranu” jest pusta:

Ś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

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”

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

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 .

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 -

 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

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

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”)

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

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

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

7. wyczyść projekt i uruchom, react-native run-iosa powinieneś zobaczyć zmiany.

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