Bir React Native uygulamasıyla çalışıyorum ve özel bir başlatma ekranı ayarlamaya çalışıyorum ama yapamıyorum.

React Native, varsayılan olarak bir LaunchScreen.xib oluşturur, bu yüzden Images.xcassets içinde bir LaunchImage oluşturdum:

Ayrıca seçeneklerimde "Uygulama Simgeleri ve Başlatma Görüntüleri" altındaki "Ekranı Başlat" dosyasını değiştirmem gerektiğini okudum:

Bunu yaptıktan sonra, başlatma ekranım tamamen siyah oldu ve uygulama yüklendiğinde, hem üst hem de alt siyah çerçeveler var:

Bu yüzden React Native projemde başlatma ekranımı ayarlamak için ne yapmam gerektiğini bilmiyorum.

Biri bu sorunlarda bana yardım edebilirse minnettar olacağım.

Şimdiden teşekkürler.

Bu konunun yardımıyla sorunu çözebildim: Başlatma Görüntüsü iOS uygulamasında görünmüyor (Images.xcassets kullanarak)

Bu yüzden, başka birine yardımcı olabilir diye derinlemesine açıklayacağım.

Öncelikle belirli görüntüler oluşturmanız gerekir. Bunun için kullandığım şey, bu şablon ve otomatik oluşturuculu bu web sayfasıydı: TiCons

Resimlerimi indirdiğimde, varlıklar / iphone klasörünün içindekileri aldım, sadece bunları aldım:

• Default@2x.png (640x960)
• Varsayılan-568h@2x.png (640x1136)
• Varsayılan-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Varsayılan-Landscape-736h@3x.png (2208x1242)

Ayrıca aynı klasörde bu Contents.json dosyasına ihtiyacınız var, bir arkadaşımdan aldım:

{
  "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"
  }
}

Yani, bu noktada adında bir klasör oluşturdu LaunchImage.launchimage içeride Images.xcassets benim Tepki Yerli projede ve görüntüler ve kaydetme klasörünün Contents.json içindeki dosyaya:

İkinci olarak , projenizi Xcode'da açmanız ve "Genel" ayarlarda, " Uygulama simgeleri ve Başlatma Resimleri " altında " Ekran Dosyasını Başlat " seçeneğini boş bırakmamız gerekir (ayrıca projemizin içindeki LaunchScreen.xib dosyasını silebiliriz. ) ve ardından " Varlık Kataloğunu Kullan " ı tıklayın . Bir modal açılacak, katalog Görsellerini Taşımayı seçiyoruz

Şimdi, " Görüntü Kaynağını Başlat " seçicisinde, daha önce oluşturduğumuz LaunchImage (görüntülerimizin bulunduğu) klasörü seçebiliriz :

Bunu Brand Assets yerine seçeriz ve Brand Assets klasörünü silebiliriz .

Bu noktada, React Native uygulamamızı özel başlatma görüntülerimizle çalıştırabileceğiz:

Sözde kolay bir görev için biraz karmaşık göründüğünü biliyorum, ancak bunun hakkında çok şey okuduktan sonra, sıçrama resimlerimi çalıştırabilmemin tek yolu buydu, bu yüzden toplulukla paylaşmak istedim.

Uygulamayı simülatörden sildiğinizden emin olun. Ardından projenizde bir temizlik yapın.

Yeni bir başlatma ekranının nasıl oluşturulacağına dair SO içeren çözümlerde bu yanıtlara çokça bakıyordum. Demek istediğim, bir dakika düşünelim.

Yeni bir react-native projesi oluşturduğumuzda, başlangıç ​​ekranı için ne görüyoruz?

> Facebook'un varsayılan başlatma ekranı

Bu beni düşündürdü, Bunu nasıl yaptılar?

Yarattılar LaunchScreen.xib

Bunun bir sebebi olmalı diye düşünüyorum. Bu yüzden LaunchScreen.xib, "React Native ..." varsayılan metnine veya yazılan her şeye girdim ve bir değişiklik yaptım. Başlatma ekranının düzenlemelerimi yansıttığını görmek için uygulamayı bir kez daha çalıştırdım.

Çözüm 1 Düzen mevcut LaunchScreen.xib

2.Çözüm Kendiminkini yarat

Ben de öyle yaptım, bu cevabı yazmak, kendi cevabımı nasıl oluşturacağımı öğrenmekten daha uzun sürdü. Both of these solutions are compatible with all the devices.

Aşama 1:

Sil LaunchScreen.xib

Adım 2:

tıklayın images.xcassets tıklayın boş alana sağ tıklama **import**ardından eklemek istediğiniz resmi seçin.

Aşama 3:

Projenizin kök klasörüne sağ tıklayın ve yeni bir dosya türü ekleyin Launch Screenve istediğiniz gibi adlandırın.

4. adım

Sol gezinme bölmesinde projenize tıklayın, Settings> Generalve altına gidin App Icons and Launch Images. Launch Image SourceBoş olduğundan ve Launch Screen Fileadın yeni oluşturulan başlatma ekranınızla aynı adda olduğundan emin olun .

Adım 5

Oluşturduğunuz yepyeni dosyanıza tıklayın step 2, sürükleyin Image Viewveya sizi memnun edecek şekilde düzenleyin.

O zaman bu kadar, bitirdiniz. Çözümü temizlemenize bile gerek yok, sadece yeniden oluşturun.

Güncelleme

generator-rn-toolboxkullanımdan kaldırıldı. Kullanım tepki Yerli-yapmak yerine.

eski cevap

React -native kullanarak başlatma ekranını veya ana simgeyi uygulamak için generator-rn-toolbox'ı öneririm . React-native olarak cli ile kullanımı daha basit ve kolaydır.

• XCode'u açmanıza gerek yoktur.
• Çeşitli çözünürlükler için çok fazla görüntü dosyası oluşturmanıza gerek yoktur.
• Bir satır komutunu kullanarak her zaman başlatma ekranını değiştirin.

Gereksinimler

• düğüm> = 6
• Bir başlatma ekranı (açılış ekranı) için boyutu 2208x2208 pikselden fazla olan bir kare görüntü veya psd dosyası
• Pozitif düşünce ;)

Yüklemek

1. Jeneratör-rn-toolbox'ı kurun ve
2. npm install -g yo generator-rn-toolbox
3. İmagemagick'i yükleyin brew install imagemagick

4. İOS'ta açılış ekranı uygula

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   veya Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

Bu kadar. :)

Kaynak

Sadece bunun üzerinden geçti ve bir muamele yaptı. Keşfettiğim tek yol engeli simülatör içeriğini temizlemiyordu. Yeni başlatma ekranınızın çalışmadığını fark ederseniz simülasyonu açmanız ve aşağıdakilere gitmeniz gerekir:

Simülatör> İçeriği ve ayarları sıfırla

Bu simülatörde bazı sert önbelleğe alma işlemi devam ediyor olmalı, ancak bir kez yapıldığında - yeniden çalıştır ve uygulamayı göreceksin. Bunu hem xcode simülatörleri hem de react-native simülatörleri için yaptığınızdan emin olun!

'Ekran Dosyasını Başlat' seçiminin boş olduğundan emin olun:

Bu bağlantıyı takip et:

React Native uygulamama bir açılış ekranı eklemek istiyorsanız, süreci takip edin, sonuç sizin olacak.

ADIM: 1 İlk olarak, bir splashImageResource klasörü oluşturdum ve açılış görüntüsü ile launchScreen.xib dosyasını ekledim.

ADIM: 2 kodu alt görünüm etiketinin içinde yazıldığı gibi değiştirin. bu kod ile<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

ADIM: 3 Uygulamanızı Xcode'da açmalısınız. İşte izlenecek adımlar:

a) Proje klasörünüze gidin

b) ios klasörünü açın

c) Uzantısı .xcodeproj olan dosyaya gidin, benim durumumda bu splasScreenTutorial.xcodeproj

d) Bu dosyayı Xcode'unuzda açın.

e) launchScreen.xib dosyasını silin.

f) splashScreenTutorial klasörüne tıklayın, ardından HEDEFLER bölümüne gidin

g) Xcode'unuzun sol üst köşesindeki Genel Sekmeye tıklayın ve Uygulama Simgeleri ve Başlatma Görüntüleri seçeneğine gidin.

h) Görüntü Kaynağını Başlat'a gidin ve Varlık Kataloğunu Kullan'ı tıklayın. Taşı tıklayın.

i) LaunchScreen metnini Başlatma Ekranı Dosyasından kaldırın.

j) Proje klasörünüze geri dönün ve Images.xcassets dosyasını açın. AppIcon ve LaunchImage'ı görmelisiniz.

k) Ardından, LaunchImage'a tıklayın, Son olarak, farklı boyutlarda sahip olduğunuz açılış ekranı görüntülerini Başlatma Görüntüsü kutusuna sürükleyin.

Görüntüleri böyle sürükleyin.

Açılış Ekranını Test Et a) Değişiklikleri görmek için, uygulamayı başlangıçta çalıştırdıysanız simülatörünüzden silmeniz gerekir.

b) Uygulamayı silmek için Simülatör çubuğunuzdaki Donanım menüsüne tıklayın ve Ana Sayfaya gidin.

c) Silmek istediğiniz belirli uygulama simgesine dokunup basılı tutun ve simge üzerindeki X işaretine tıklayın.

d) React-native run-ios kullanarak uygulamanızı tekrar çalıştırın

Açılış Ekranınızı görebilirsiniz

Benim için XCode 10.1ve react-native 59.2ben ek adımlar zorunda sonra zaten görüntüler, film şeridi ve 1 evrensel resmi eklemek.

• Resme sağ tıklayın, tıklayın Show in Finderve ardından Contents.jsondosyanızı düzenleyin
• Görüntüyü 2x ve 3x bölümlerine ekleyin
• "Cetvel" menüsüyle Başlatma Ekranı film şeridine gidin
• Dışarıdaki kırmızı okların değil, yalnızca içerideki kırmızı okların açık olduğundan emin olun
• "Güvenli Alan Göreli Kenar Boşlukları" nı tıklayın

Görüntü artık tüm boyuttaki iPhone'larda ortalanmış olmalıdır (Dikey olarak test edilmiştir).

Mevcut Başlatma Ekranını kullanmak istiyorsanız .xib dosyası React Native'in başlangıçta kurduğu, ancak kendi logonuz ve arka plan renginizle (ve React Native varsayılan metinlerinden herhangi biri olmadan), buradaki talimatları uygulayabilirsiniz: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

React'in yardımıyla bir Başlatma ekranı oluşturursanız, aynı şeyi iOS Xcode'daki LaunchScreen.xib dosyasına eklemelisiniz, çünkü bunun için bir Ekran Görüntüsü alıp Images.xcassets'e Görüntü olarak ekleyebilirsiniz.

LaunchScreen'i açın ve ardından UIImageView öğesini Xcode'da Sağ Panelden Nesne Kitaplığından Görüntüle'ye ekleyin.

Görünüme Sondaki, Önde Gelen, Alt ve Üst Kısıtlamalar Ekleyin. Aşağıda gösterildiği gibi -

UIImageView ContentMode'u AspectFit olarak değiştirmeyi unutmayın, böylece uygulama çalıştığında aynı görünecektir.

Bundan sonra, beyaz bir ekran elde etmemek için AppDelegate'e kod eklemeniz gerekir. Kod -

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

Başvurabilirsiniz - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Sadece hala sorun yaşayanlar için, iOS Başlatma ekranını çalıştırmadan önce kabul edilen cevaptan bir adım daha eksik.

Info.plistProje klasörünü açın ve "Ana uç dosyası taban adı" anahtarını silin. Ardından, yeniden inşa edin ve umarız sorun giderilir.

Yukarıdaki çözümleri izledikten sonra uygulamam Açılış Ekranına takılıyordu, bu yüzden ios'a özel açılış ekranını eklemek için aşağıdaki 7 adımı uyguladım.

1. Xcode'u açın ve LaunchScreen.xibprojenizdeki dosyayı bulun (Bunun varsayılan olarak ios'ta gösterilen ekran olduğuna dikkat edin)
2. Ekrandaki metni kaldırmak / düzenlemek için üzerine tıklayın ve istediğiniz değişiklikleri yapın.
3. Arka plan rengini değiştirmek için, sağ taraftaki çubukta bulunan aşağıdaki simgeleri bulun ve soldan dördüncü, en üstteki küçük simge düğmesini tıklayın (fareyle üzerine geldiğinizde "Nitelik Denetçisini Göster" yazar)

4. Artık arka plan rengini nasıl değiştireceğinizi bildiğinize göre, aşağıdaki düğmeyi tıklayarak Açılış ekranına görüntü ekleyelim ve listeden Görüntü görünümünü seçip, açılış ekranında istediğiniz yere sürükleyip yerleştirelim.

5. Şimdi görüntüyü 'ye eklemeliyiz, Images.xcassetsböylece bunu LaunchScreen.xibyapmak için ona referans verebiliriz Images.xcassets. +düğmesine tıklayın importve ardından giriş ekranında göstermek istediğiniz görüntüyü ekleyin. Altta AppIconresim dosyanızın adını göreceksiniz. Bu, referans olarak kullanacağımız addır.LaunchScreen.xib

6. Şimdi LaunchScreen.xibdosyaya eklediğimiz resme referans vermeliyiz LaunchScreen.xib, image viewbu yüzden daha önce eklediğimiz resme geri dönün ve tıklayın ve sağ köşede bir sürü seçenek göreceksiniz. image5. adımda içe aktardığınız görüntüyü yazan ilkini tıklayın ve seçin

7. projeyi temizleyin ve çalıştırın react-native run-iosve değişiklikleri görmelisiniz.

Başlatma ekranı görüntü kaynağını görüntü ayarınız olarak ayarlamalısınız. Daha sonra LauncScreen.xib dosyasını silin. Daha sonra projenizde genel bir arama yapın ve LaunchScreen.xib'e yapılan tüm referansları kaldırın (tüm projenize bakın. Sublime metin editörü kullanıyorum, bu nedenle cmd + shift + f) ve çalışmalıdır.