React-native: [Inisialisasi] Luncurkan flash putih layar

@alinz - ini diperbaiki pada rilis berikutnya: https://github.com/tadeuzagallo/react-native/commit/8d992262ed2dcf0d46e8d22e605764902c33012f

@alinz apakah itu terlihat seperti https://www.dropbox.com/s/xq522ywqsd16vqe/example.mov?dl=0

@liubko Ya, inilah yang ingin saya singkirkan. Saya belum menerapkan tambalan tetapi saya akan melakukannya malam ini.

@brentvatne : Saya tidak melihat bagaimana tambalan itu akan memperbaiki masalah ini (jika saya buta/bodoh, maafkan :-). Masalahnya adalah ada momen antara saat aplikasi diluncurkan dan React masih berfungsi. Idealnya LaunchScreen akan ditampilkan hingga React selesai dan sepenuhnya dirender seperti di aplikasi "sepenuhnya asli".

@oblador - ah, ini akan memungkinkan Anda untuk bertransisi lebih lancar dengan memiliki warna latar belakang yang sama dengan layar peluncuran di momen "berkedip".

@vjeux - bagaimana Anda mengatasi masalah ini di aplikasi FB? Saya perhatikan bahwa F8, yang jika saya pahami dengan benar adalah 100% React Native, bertransisi langsung dari layar peluncuran ke aplikasi. cc @nicklockwood

Ada perbaikan (terpisah) untuk masalah ini juga. Gunakan properti loadingView dari RCTRootView , dan atur ke layar penuh UIImageView menampilkan gambar peluncuran Anda. Kodenya mungkin terlihat seperti ini:

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MyLaunchImage"];
rootView.loadingView = launchView;

Saya telah bereksperimen dengan cara mendeteksi gambar peluncuran secara otomatis dan menjadikannya sepenuhnya otomatis, tetapi belum benar-benar siap. Jika Anda tertarik, tampilannya seperti ini:

// TODO: support landscape orientation

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

Solusi mudah untuk apa yang dijelaskan @nicklockwood adalah memuat layar peluncuran xib jika Anda menggunakan iOS 8+.

@ide Saya menggunakan layar peluncuran xib. Saya melihat tampilan layar lauch saya pada waktu peluncuran tetapi sebelum aplikasi saya boot, saya melihat tampilan putih (flash).

@alinz , saya percaya @ide berarti menggunakan layar peluncuran Anda xib untuk mengatur RCTROotView loadingView (yang masih harus Anda lakukan secara manual). Tidak ada dukungan otomatis untuk melakukan itu (belum).

Untuk memperjelas, iOS menyembunyikan layar peluncuran Anda saat Bereaksi _mulai_ memuat. Untuk menghindari melihat layar kosong, Anda harus memperpanjang waktu layar peluncuran ditampilkan dengan menampilkan tampilan yang sama secara manual dengan loadingView RCRootView.

Terima kasih @nicklockwood atas klarifikasinya. Itu burukku. :)

Curtesy dari http://stackoverflow.com/a/29115477/255765 Saya berakhir dengan ini:

for (NSString *imgName in allPngImageNames){
    // Find launch images
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName]; //-- this is a launch image
      // Has image same scale and dimensions as our current device's screen?
      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        NSLog(@"Found launch image for current device %@", img.description);
        UIImageView *launchView = [[UIImageView alloc] initWithImage: img];
        rootView.loadingView = launchView;
      }
    }
  }

Tampaknya bekerja.

+1 untuk cara standar/terdokumentasi.

@dvine-multimedia apakah itu berfungsi lebih baik daripada cuplikan kode yang saya berikan di atas?

@ myusuf3

@nicklockwood Sebenarnya mereka melakukan hal yang sama. Ketika saya mulai melihat ini, saya mungkin tidak mengerti apa yang harus dilakukan dengan potongan Anda karena kurangnya pengalaman xcode. Ketika saya akhirnya sampai pada titik di mana saya mengerti apa yang harus dilakukan, saya tidak menyadari, bahwa Anda sudah ada di sana. Selain itu, saya pribadi menemukan solusi "saya" sedikit lebih mudah dibaca. Tapi itu estetika murni.

@nicklockwood Saya mencoba kode Anda tetapi saya masih melihat kilatan putih. Saya membuat gambar peluncuran untuk ditetapkan sebagai tampilan pemuatan. gambar peluncuran sama dengan launchScreen.xib.

Ini adalah satu-satunya yang menahan rilis aplikasi kami. Sangat menghargai bantuan apa pun dalam hal ini.

Apakah blitz muncul setelah gambar peluncuran disembunyikan, atau apakah gambar peluncuran gagal muncul? (Ini mungkin sulit ditentukan hanya dengan melihat - ubah gambar peluncuran menjadi sesuatu seperti persegi panjang merah solid untuk sementara untuk memastikan).

@nicklockwood Saya mencoba mengubah warna antara file xib dan LaunchScreen Image. Aku masih melihat kilatan itu.

Kode saya terlihat seperti ini:

 UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"launchScreen1"]];
 rootView.loadingView = launchView;

 rootView.loadingViewFadeDelay = 0.0;
 rootView.loadingViewFadeDuration = 0.15;

Saya menghapus dua baris terakhir loadingViewFadeDelay dan durasi sekarang dan sepertinya masalahnya sudah terpecahkan. Saya tidak melihat kilatan apa pun. Transisi halus yang bagus.

@ chirag04 Saya baru saja mencobanya dengan proyek sampel dan saya tidak melihat flash :(

inilah yang saya lakukan

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"whiteFlash"
                                                   launchOptions:launchOptions];

  //here's what I did
  UIImage *image = [UIImage imageNamed:@"LaunchImage"];
  if (image) {
    UIImageView *launchView = [[UIImageView alloc] initWithImage: image];
    launchView.contentMode = UIViewContentModeBottom;
    launchView.image = image;
    rootView.loadingView = launchView;
  }
  ///////////////////////////

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;

Baik. menggali lebih dalam sepertinya flash mungkin karena aplikasi saya tidak merender apa pun sampai nilai dimuat dari asyncstore.

render() {
  if(!this.state.loaded) return (null);
  return <View ...../>;
}

Saya pikir loadingView berpikir bahwa js selesai merender dan menyembunyikan loadingView. Namun js baru saja selesai merender dengan return null

@nicklockwood @alinz Saya hanya menembak di udara. mungkin bukan alasan sebenarnya. Apa yang kalian pikirkan.

Juga satu hal yang saya perhatikan adalah jika saya mengatur nilai loadingViewFadeDelay dll ke 0,30 atau lebih tinggi, transisinya sangat sangat mulus. defaultnya adalah 0,25 yang juga mulus.

Tujuan loadingFadeDelay justru untuk menutupi skenario di mana aplikasi Anda tidak segera merender apa pun, jadi Anda menggunakannya dengan benar.

Anda mungkin ingin mempertimbangkan untuk menyetel loadingViewFadeDelay secara eksplisit, jika defaultnya pernah berubah - dan pastikan Anda menguji pada perangkat paling lambat yang Anda dukung, jika diperlukan waktu lebih lama untuk memuat.

Saya suka solusi @nicklockwood tetapi Anda harus mempertimbangkan latensi jaringan yang tidak dapat diprediksi.

Salah satu solusi lainnya adalah, atur status komponen ke semacam nilai default untuk memberi tahu komponen Anda agar menampilkan semacam dialog pemuatan.

Dingin. Saya pikir saya punya solusinya.

Apa pendapat kalian tentang memiliki 3 komponen yang semuanya sama.

1) launchScreen.xib
2) loadingView
3) return null in render to actually render a view which is like loadingView and launchScreen.xib?

Tidak yakin bagaimana poin 3 akan diskalakan pada perangkat yang berbeda. Apakah kalian bahkan menyarankan itu?

Jika waktu startup tergantung pada jaringan kemudian tes, saya pasti menganjurkan menggambar tampilan "kosong" segera alih-alih berharap itu mengunduh lebih cepat daripada penundaan pudar.

tergantung pada asyncstorage. tidak ada jaringan

Apakah Anda bergantung pada jaringan atau tidak, saya tidak terlalu suka menggunakan tampilan basis waktu. Tidak ada cara Anda dapat 100% menjamin bahwa waktu yang Anda tetapkan akurat. Anda harus selalu menampilkan sesuatu kepada pengguna untuk menunjukkan bahwa sesuatu sedang terjadi tetapi belum siap untuk ditampilkan. Ini hanya saran.

Sepakat. Tujuan loadingView, seperti gambar pemuatan iOS standar, hanya untuk menutupi hingga aplikasi Anda siap menampilkan sesuatu, meskipun semua aplikasi yang siap ditampilkan adalah pemintal pemuatan.

Yang mengatakan, alasan saya menjadikannya tampilan alih-alih gambar adalah agar Anda dapat membuatnya non-statis. Anda bisa menambahkan UIActivityIndicatorView ke loadingView jika Anda mau.

Bagaimana cara memposisikan gambar peluncuran? Saya sudah mencoba menyesuaikan asal bingkai, tetapi selalu memposisikannya di tengah tidak peduli asal apa yang saya gunakan. Saya memiliki gambar bilah atas kecil yang ingin saya posisikan di atas dan direntangkan dari kiri ke kanan.

Inilah yang saya miliki:

  UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  CGRect frame = launchView.frame;
  frame.origin.x = 0;
  frame.origin.y = 0;
  launchView.frame = frame;
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.0;
  rootView.loadingViewFadeDuration = 0.0;

Ini bukan gambar peluncuran, ini adalah _view_ peluncuran, jadi Anda dapat memposisikan imageView Anda di dalam tampilan wadah lain dan menggunakan wadah sebagai tampilan peluncuran:

UIView *launchView = [[UIView alloc] init];
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
imageView.frame = CGRectMake(whatever);
[launchView addSubview:imageView];
...

Benar, saya kira saya bisa membuat pembungkus mengisi ruang layar dan memposisikan gambar di atas. Pembungkus akan secara otomatis diposisikan di tengah oleh RootView tampaknya https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/React/Base/RCTRootView.m#L191.

@Intellicode ya.

Baru saja merusak aplikasi saya dalam produksi di iphone 4s menggunakan kode @dvine-multimedia. memperbaiki adalah dengan hanya menempatkan istirahat di if.

Satu lagi crash karena containsString tidak tersedia di ios 7.

@nicklockwood bertanya-tanya apakah pemuatan tampilan akan secara otomatis memilih resolusi terbaik?

loadingView tidak memilih gambar sama sekali, itu hanya menggunakan apa yang Anda masukkan. Cuplikan yang saya posting di atas untuk menemukan usia peluncuran akan memilih resolusi yang benar untuk perangkat.

Cuplikan Anda tidak memilih yang memiliki dimensi yang tepat. ada perbaikan untuk itu?

Apakah Anda menggunakan solusi saya atau dvine? Model iPhone apa yang Anda gunakan? Potret atau lanskap?

saat menggunakan dvine itu mengambil dimensi yang tepat. Dengan solusi Anda memiliki ruang hitam di sekitar gambar. Saya berasumsi ruang hitam itu karena mengambil gambar dengan dimensi yang salah.

Saya menggunakan iphone 6. potret.

Ini adalah tampilannya. Perhatikan latar belakang putih.

Menggunakan kode berikut:

UIImageView *launchView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
  rootView.loadingView = launchView;
  rootView.loadingViewFadeDelay = 0.20;
  rootView.loadingViewFadeDuration = 0.20;

Itu bukan solusi yang saya posting, ini adalah:

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

Oh sial! Saya berharap saya membaca komentar Anda dengan hati-hati. Solusi Anda berfungsi dan juga mudah dipahami.

I've been experimenting with a way to automatically detect the launch image and make this completely automatic, but it's not really ready yet. If you're interested, it looks like this:

Mungkin ini soal experimenting . Tidak yakin bagaimana saya melewatkannya. Maaf buruk saya.

Terima kasih atas bantuannya di sini. Pasti akan menggunakan kode ini di versi berikutnya. Tampaknya mencakup semua kasus juga. Tidak perlu lanskap.

Heh, saya kira saya kurang menjualnya. Saya mungkin seharusnya mengatakan "inilah yang kami gunakan dalam produksi sekarang, dan tampaknya berfungsi dengan baik" :-)

"ini yang kami gunakan dalam produksi sekarang" akan menyelamatkan kami dari beberapa bintang 1 di app store. ha ha. Jangan khawatir. Selalu ada versi baru untuk menyelamatkan dunia. :)

Tutup masalah ini btw?

Saya akan pergi dan menutup tiket ini karena sudah sepenuhnya dibahas secara rinci kami memiliki beberapa solusi yang baik.

Untuk memperjelas ini 100% bagi mereka yang menggunakan xib LaunchScreen, berikut adalah kode yang akan membuatnya berfungsi:

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

Tambahkan baris tersebut ke metode application didFinishLaunchingWithOptions dalam file AppDelegate.m , tepat di atas baris yang mengatakan return YES .

@arnemart agar lebih jelas bahwa metode ini hanya akan berfungsi untuk ios 8+ kan?

@arnemart Terima kasih! Bekerja dengan sempurna .

Bagi mereka yang menggunakan LaunchImage , Anda perlu mengatur frame dan contentMode agar gambar dapat diskalakan dengan benar:

UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage"]];
launchScreenView.frame = self.window.bounds;
launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
rootView.loadingView = launchScreenView;

Sama seperti komentar dari @arnemart , tambahkan baris ini ke metode application didFinishLaunchingWithOptions dalam file AppDelegate.m , di atas baris yang bertuliskan return YES .

Aneh. Pada RN v.0.11.4, aplikasi pertama kali diluncurkan dengan layar hitam dan kemudian LaunchScreen.xib sebelum memuat aplikasi. iOS 9 w / @arnemart 's memperbaiki https://github.com/facebook/react-native/issues/1402#issuecomment -130.236.507. Ada ide?

@irfaan coba ubah window.backgroundColor menjadi sesuatu seperti [UIColor redColor], yang akan memberi tahu kami jika warna hitam berasal dari jendela atau yang lainnya.

self.window.backgroundColor = [UIColor redColor]; di dalam didFinishLaunchingWithOptions tidak mengubah apa pun. Masih hitam sebelum LaunchScreen.xib. Jadi bukan dari jendela, sepertinya @nicklockwood

Bagaimana Anda merekomendasikan saya untuk men-debug ini?

Sepertinya iOS tidak memuat launchScreen.xib Anda sama sekali hingga aplikasi dimuat (pada saat itu, React menampilkannya sebagai loadingView).

Mungkin ini kesalahan konfigurasi di Xcode? Atau mungkin bug di iOS 9?

Sudahkah Anda mencoba di perangkat, atau hanya simulator?

Terima kasih @nicklockwood - Saya telah mengalami masalah pada perangkat. Jalankan di simulator dan berfungsi dengan baik, lalu hapus + jalankan di perangkat dan berfungsi dengan baik. Benar-benar aneh. Akan memposting lagi jika masalah muncul lagi.

hai @genexliu , saya menambahkan kumpulan gambar "LaunchImage" saya ke Images.xcassets/LaunchImage.launchimage/ namun baik kode yang Anda tempel maupun LaunchScreen.storyboard saya tidak dapat menemukan/menggunakannya (keduanya gagal secara diam-diam). Papan cerita LaunchScreen saya dimuat dengan benar saat saya melihat warna latar belakangnya tetapi tidak menampilkan gambar yang direferensikan. Ada ide?

Juga urutan startup ketika menjalankan dari XCode terlihat normal tetapi tampaknya ada tambahan run dari urutan start/extra white flash/etc ketika menjalankan natal launch dari baris cmd.

Ternyata masalah saya dengan Storyboard yang tidak menemukan LaunchImage tampaknya merupakan bug dengan XCode. Saya mengubah pengaturan peluncuran menjadi 'gunakan katalog aset' dan kemudian kembali ke 'gunakan storyboard' dan mulai berfungsi. Tidak jelas apakah kode @genexliu berfungsi untuk saya atau tidak karena loadingViewFadeDelay tampaknya tidak berpengaruh.

Ini kode saya:

  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Images/LaunchImage"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 5000;

namun tidak ada penundaan antara tampilan LaunchImage storyboard dan React awal saya render .

@"Images/LaunchImage" tidak cocok untuk saya. Mungkin hanya @"LaunchImage"

Oh, ups, ya. Kamu benar. Itu salah tempel-- salah satu permutasi yang saya coba (tapi bukan yang pertama).

Juga, periksa kode contoh dalam komentar saya di atas dari 3 bulan yang lalu - ada banyak file gambar peluncuran untuk kelas perangkat yang berbeda.

Doh! Kamu benar. Setelah beralih kembali ke LaunchImage sekarang berfungsi. Terima kasih!

Adakah yang bisa mengarahkan saya ke dokumentasi apa pun tentang ini untuk Android?

+1 untuk Android

cc @dmmeller apakah kita memiliki fitur loadingView di Android?

Hai, saya mengalami masalah yang sama, dan meskipun saya melihat ada beberapa solusi yang diposting di sini, saya tidak mengerti di mana harus meletakkan kode ini. Dari pemahaman saya, solusinya adalah mengubah kode Objective-C, bukan sesuatu yang bisa dilakukan di dalam React Native itu sendiri, benar? Dalam hal ini, kemana perginya kode yang diposting? Di file main.m di root proyek xcode? Terima kasih.

@CorpusCallosum kode harus masuk ke file AppDelegate.m, tempat RCTROotView diatur.

Terima kasih @nicklockwood , saya akan mencobanya.

Hei kode ini berfungsi untuk saya sekarang, sejauh saya tidak melihat kilatan putih, dan gambar saya sedang dimuat ke layar awal itu, namun, sekarang aplikasi saya yang sebenarnya tidak akan dimuat! Itu hanya tetap di layar pemuatan itu, meskipun saya dapat melihat di konsol saya, aplikasi dimuat dan berjalan, dan bahkan interaksi berfungsi (ketuk dan geser), tetapi saya tidak dapat benar-benar melihat aplikasi saya sama sekali, itu hanya macet pada layar awal itu. Tahu kenapa?

Ini kode saya dari file AppDelegate.m saya:

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  //use launch image as BG image for app
  UIImageView *launchScreenView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LaunchImage-blank-grey"]];
  launchScreenView.frame = self.window.bounds;
  launchScreenView.contentMode = UIViewContentModeScaleAspectFill;
  rootView.loadingView = launchScreenView;
  rootView.loadingViewFadeDelay = 1000;

  return YES;

@CorpusCallosum Anda dapat mencoba menghapus baris
rootView.loadingViewFadeDelay = 1000;
atau sesuaikan transisi antara layar splash dan aplikasi Anda dengan nilainya (saya pikir satuannya adalah detik, bukan milidetik, inilah mengapa tampaknya "macet" pada splash).
Jika menghapus garis sama sekali tidak berfungsi untuk Anda, coba atur nilai antara 0-5 (Anda juga dapat mengatur nilai non integer).

Bekerja untuk saya, terima kasih kawan :)

Bagi mereka yang ingin menggunakan layar peluncuran xib mereka sebagai loadingView, berikut adalah kode untuk dimasukkan ke AppDelegate.m :

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

Baris terakhir adalah opsional, seperti yang saya sebutkan di atas, ini mengatur waktu loadingView akan tetap ada sebelum pindah ke aplikasi itu sendiri.

@david-a terima kasih banyak untuk itu! Saya telah menangani ini sejak saya mulai menguji reaksi asli. 👏

@david-a, @geriux : Saya juga harus menyetel launchScreenView.frame = CGRectZero; karena LaunchScreen.xib saya memiliki gambar latar belakang dengan mode konten AspectFill dan skalanya tidak benar. Saya mendapatkan solusi setelah beberapa percobaan dan kesalahan, tidak yakin apa yang menyebabkan ini.

@BasitAli ya, maaf, itu harus didokumentasikan dengan lebih baik. Jika Anda mengatur ukuran tampilan ke bukan nol, itu akan dipusatkan di layar. Jika Anda mengaturnya ke nol, itu akan diskalakan agar sesuai dengan layar.

@david-a terima kasih banyak! Komentar Anda harus disertakan dalam boilerplate, atau setidaknya menjadi bagian dari dokumentasi asli reaksi utama. Tidak yakin mengapa masalah ini ditutup pada Maret 2015, jelas masih ada di RN 0.20 pada Februari 2016.

Alangkah baiknya jika seseorang dapat melakukan PR untuk dokumen tersebut.

Saran teman-teman Anda sangat membantu saya (di iOS, berfungsi dengan baik), apakah ada yang menemukan cara untuk memperbaikinya di Android?

Ini bantuan?

https://github.com/remobile/react-native-splashscreen

@weiyisheng , saya menggunakan react-native-splashscreen seperti yang disarankan oleh @braco di Android bersama dengan perbaikan yang dibahas di atas di iOS.

@braco @BasitAli YA, itu membantu, saya akan menggunakannya di Aplikasi saya, itu ide yang bagus. Terima kasih teman-teman.

@BasitAli mengapa tidak menggunakannya di iOS karena penasaran?

Aplikasi saya bergerak dengan mulus dari layar pembuka ke layar masuk (logo bergerak ke atas dan bidang masuk melompat keluar). Plugin rn-splashscreen memudar yang tidak cocok dengan animasi saya. Saya harus menggunakannya di Android karena saya tidak punya pilihan lain.

@BasitAli sepertinya plugin react-native-splashscreen mematuhi pengaturan rootView.loadingViewFadeDuration , asalkan Anda mengaturnya setelah Anda melampirkannya, jadi ini harus menonaktifkan fade:

[RCTSplashScreen show:rootView];
rootView.loadingViewFadeDuration = 0;

Apakah ada cara untuk menghapus pesan kecil di atas yang mengatakan "Memuat dari file yang sudah dibundel"?

@rclai mengatur skema untuk dirilis

Ah! Terima kasih!

Apakah ada solusi reaksi asli untuk kedua platform splash screen? Mengetik di kedua platform file dalam membuat penggunaan reaksi asli tidak berguna .. Tolong jawab yang sederhana. Terima kasih

@rclai

Apakah ada cara untuk menghapus pesan kecil di atas yang mengatakan "Memuat dari file yang sudah dibundel"?

Itu tidak ditampilkan dalam mode rilis, hanya dalam mode debug. Jika Anda ingin menyembunyikannya dalam mode debug juga, Anda dapat menyembunyikannya dengan meletakkan [RCTDevLoadingView setEnabled:NO]; di AppDelegate Anda.

@nicklockwood Hai, Apakah itu benar? Jika tidak, apa yang harus saya ubah/hapus?

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"SomeApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

// Get launch image
NSString *launchImageName = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
  CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);
  if (height == 480) launchImageName = @"[email protected]"; // iPhone 4/4s
  else if (height == 568) launchImageName = @"[email protected]"; // iPhone 5/5s
  else if (height == 667) launchImageName = @"[email protected]"; // iPhone 6
  else if (height == 736) launchImageName = @"[email protected]"; // iPhone 6+
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  CGFloat scale = RCTScreenScale();
  if (scale == 1) launchImageName = @"LaunchImage-700-Portrait~ipad.png"; // iPad
  else if (scale == 2) launchImageName = @"LaunchImage-700-Portrait@2x~ipad.png"; // Retina iPad
}

// Create loading view
UIImage *image = [UIImage imageNamed:launchImageName];
if (image) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];
  imageView.contentMode = UIViewContentModeBottom;
  imageView.image = image;
  rootView.loadingView = imageView;
}

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@TeodorKolev terlihat cocok untuk saya. Jika Anda masih melihat flash saat startup, coba atur

rootView.loadingViewFadeDelay

Untuk nilai yang lebih besar (dalam hitungan detik - defaultnya adalah 0,25)

EDIT:

Garis ini

UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, RCTScreenSize()}];

Seharusnya mungkin saja

UIImageView *imageView = [[UIImageView alloc] init];

Terima kasih, folder mana yang harus saya tambahkan gambar-gambar itu? Apakah saya memerlukan Contents.json tambahan untuk ini atau tidak? Saya mendapat banyak kesalahan dalam kode itu dimulai dengan
(https://cloud.githubusercontent.com/assets/10398337/13778676/e01e3d32-eabf-11e5-95bf-d7a1205a5ca1.png)
Menatap:

CGFloat height = MAX(RCTScreenSize().width, RCTScreenSize().height);

@TeodorKolev Xcode memiliki GUI untuk menambahkannya. Klik pada Images.xcassets, lalu klik tombol + dan pilih "Ikon Aplikasi & Luncurkan Gambar" > "Gambar Peluncuran iOS Baru".

@TeodorKolev untuk memperbaiki kesalahan, Anda perlu menambahkan

#import "RCTUtils.h"

Di AppDelegate Anda.

Terima kasih banyak, tetapi saya ingin melihat layar splash sampai url WebView saya dimuat sepenuhnya, dan sekarang tidak berfungsi seperti itu. Menghormati!

@nicklockwood Apakah Anda punya obat untuk yang satu ini?

Apa metode saat ini untuk memperbaikinya? Karena sudah satu tahun dan beberapa bulan sejak masalah muncul, saya ragu itu akan benar-benar diperbaiki, jadi saya bertanya-tanya apa obatnya saat ini. File mana yang perlu diubah dan kode mana yang perlu dimodifikasi?

Sunting: Saya hanya menggunakan layar hitam dengan launchscreen.xib tetapi setengahnya berubah menjadi putih sebelum aplikasi dimuat secara penuh.

@hasen6 masalahnya telah diperbaiki, tetapi ada beberapa pekerjaan yang diperlukan dari pihak pengembang.

Seperti yang dibahas dalam komentar di atas, Anda perlu mengatur rootView.loadingView dengan beberapa konten untuk ditampilkan menggantikan layar putih, dan menyesuaikan rootView.loadingViewFadeDelay untuk memastikan bahwa tampilan pemuatan tidak disembunyikan sebelum Anda aplikasi telah selesai dimuat.

Jika Anda hanya ingin menampilkan layar hitam, Anda mungkin tidak perlu repot dengan loadingView dan cukup setel rootView.backgroundColor menjadi hitam, tetapi Anda harus bereksperimen.

Saya mengubah rootView.backgroundColor = [UIColor clearColor]; menjadi rootView.backgroundColor = [UIColor blackColor]; but it didn't make any difference. Doing a search in XCode for rootView.loadingView` tidak memberikan hasil apa pun.

@hasen6 Anda perlu mencari tahu dari mana warna putih itu berasal - mungkin ada tampilan di dalam aplikasi JS Anda yang berwarna putih dan ditampilkan sebentar sebelum konten dimuat.

loadingView adalah properti RCTRootView , yang mungkin Anda miliki di dalam AppDelegate. Kode sebenarnya rootView.loadingView tidak akan muncul di Xcode Anda kecuali Anda telah menambahkannya sendiri. Berikut adalah contoh bagaimana Anda dapat menggunakannya:

rootView.loadingView = [UIView new];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

Aplikasi saya tidak berwarna putih di mana pun. Semua aplikasi saya menampilkan layar putih yang sama saat dimuat setelah layar peluncuran ditampilkan, jadi saya yakin itu bukan masalah dengan aplikasi saya.

Jadi saya perlu menambahkan kode itu ke appdelegate.m? Itu juga tidak berhasil. Saya kira itu hampir tidak mungkin untuk diperbaiki jika tidak, satu tahun tidak akan berlalu dengan para pengembang masih belum menyelesaikannya. Mempertimbangkan betapa buruknya itu membuat aplikasi terlihat, itu jelas akan menjadi daftar teratas untuk dipecahkan juga.

FWIW, ini adalah bagaimana saya memecahkan masalah ini. Saya menggunakan solusi LaunchScreen.xib dan David-a:

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
rootView.loadingView = loading;
rootView.loadingViewFadeDelay = 1;

Kode ini disisipkan tepat di bawah

RCTRootView *rootView = [[RCTRootView alloc] etc etc etc...]

Jika saya mengganti kode itu dengan kode sampel nicklockwood, flash putih kembali.

Wow! Ok yang satu itu berfungsi. Terima kasih grittath!

@grittathh @hasen6 ah, oke. Saya salah ingat bahwa loadingView secara otomatis berukuran agar sesuai dengan layar jika memiliki ukuran nol, tetapi ternyata itu tidak pernah terjadi _(ツ)_/¯.

@hasen6 inilah versi kode yang dimodifikasi yang seharusnya berfungsi (solusi xib juga baik-baik saja, tetapi berlebihan jika Anda hanya menggunakan layar hitam).

rootView.loadingView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
rootView.loadingView.backgroundColor = [UIColor blackColor];
rootView.loadingViewFadeDelay = 0.5; // measured in seconds

Catatan: 1 adalah nilai yang cukup besar untuk loadingViewFadeDelay karena artinya pengguna harus menunggu satu detik lagi sebelum aplikasi dimulai. Saya sarankan untuk mengaturnya ke nilai terendah yang bisa Anda dapatkan (0,25 adalah default, yang bagus untuk sebagian besar aplikasi).

Ya, saya menemukan 1 agak panjang dan saya kehilangan animasi pembuka di salah satu aplikasi saya. Saya menemukan bahkan 0,1 baik-baik saja. Terima kasih atas bantuan Anda.

Saya setuju dengan @hasen6 . Tampaknya agak aneh bahwa pengguna harus segera masuk ke Objective-C ( AppDelegate.m ) dan mengubah beberapa kode segera setelah membuat aplikasi React Native. Mungkinkah React Native menghasilkan kode dengan perbaikan ini yang sudah dilakukan? Atau untuk memperkenalkan solusi yang lebih abstrak untuk konfigurasi layar awal dari JavaScript (atau bahasa konfigurasi deklaratif)?

@johanatan Ironisnya dua masalah terbesar dan terlama dengan React Native berkaitan dengan semacam flash putih. Kesalahan ini dan flash putih pada gambar.

Ketika saya menggunakan LaunchScreen xib saya cenderung lebih besar, ada solusi?

Apa yang cenderung lebih besar?

UIView *loading = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil ] obje ctAtIndex:0 ];
rootView.loadingView = memuat;

tampilan UI pemuatan, sepertinya tidak diubah ukurannya, seharusnya sama dengan layar splash saya yang merupakan LaunchScreen.xib saya

Saya menggunakan kelas ukuran dan batasan BTW

@akoshdee itu benar - Anda harus mengatur ukuran tampilan secara eksplisit agar sesuai dengan ukuran layar. Menggunakan

loading.frame = [UIScreen mainScreen].bounds;

udah ganti frame tapi tetep ga bisa

solusi apa pun untuk android？

@ajoshdee Tugas loadingView.frame = [UIScreen mainScreen].bounds; tidak berhasil untuk saya tetapi ini berhasil: loadingView.frame = self.window.bounds;

Inilah yang saya gunakan:

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

Halo! Saya mengatur warna untuk bereaksi tampilan:
rootViewController.view.backgroundColor = [UIColor blackColor];

@py110 @ajwhite

Solusi Android sangat sederhana sampai-sampai kesal pada diri sendiri untuk berapa lama untuk mengetahuinya.

Ini melibatkan layar splash 3-tahap.

https://github.com/mehcode/rn-splash-screen/issues/1

Saya memiliki implementasi serupa @mehcode -- Saya suka apa yang Anda dapatkan di sini. Saya sudah mencari cara untuk mengakses RN Instance manager, tidak melihat ada panggilan getReactNativeHost() , sangat bagus untuk diketahui.

Saya telah melakukan yang berikut, (tidak senang tentang itu)

1. SplashActivity dimulai saat aplikasi terbuka
2. Segera buka MainActivity dan finish()
3. MainActivity memulai SplashActivity dengan tanda yang menunjukkan itu dalam "mode latar depan" segera setelah mulai menunjukkan percikan di atas MainActivity . Setelah beberapa saat, SplashActivity menutup sendiri dan menampilkan aplikasi.

@ajwhite

Terima kasih. Efeknya sangat halus.

Dalam proyek saya saat ini, saya benar-benar memiliki ReactActivity disalin ke basis kode saya dan telah membuat mReactInstanceMangager dilindungi alih-alih pribadi.

Dalam reaksi-asli 0.29 (seharusnya mengatakan dalam komentar) tim asli yang bereaksi memberi kami metode publik getReactNativeHost() untuk masuk ke dalamnya.

Wadah ReactNativeHost itu adalah langkah yang brilian. Ini persis masalah yang saya hadapi -- tidak bisa terhubung ke siklus hidup dari MainActivity.

Ref untuk yang tertarik: https://github.com/facebook/react-native/commit/49f20f41546e3ba8e7fe43c84c4c701684d0434d#diff -1346852de0c7f8466a36d42de50ec808R20

Untuk menambah ini...

Solusi yang saya temukan adalah menetapkan rootView warna latar belakang tetapi gunakan [UIColor colorWithPatternImage:img] .

Ini tidak memerlukan penundaan untuk memastikannya tetap terlihat sampai terisi penuh.

Cuplikan lengkap (dan menggunakan tip yang disediakan oleh @dvine-multimedia) yang akan menemukan LaunchImage yang diinginkan untuk perangkat di bawah ini:

NSArray *allPngImageNames = [[NSBundle mainBundle] pathsForResourcesOfType:@"png" inDirectory:nil];
  for (NSString *imgName in allPngImageNames){
    if ([imgName containsString:@"LaunchImage"]){
      UIImage *img = [UIImage imageNamed:imgName];

      if (img.scale == [UIScreen mainScreen].scale && CGSizeEqualToSize(img.size, [UIScreen mainScreen].bounds.size)) {
        rootView.backgroundColor = [UIColor colorWithPatternImage:img];
      }
  }
}

LaunchImage sekarang tetap terlihat hingga bundel reaksi-asli dimuat sepenuhnya.

Saya sudah mencoba hampir setiap blok kode dalam percakapan ini tanpa peluang tetapi yang ini bekerja dengan sempurna.
Terima kasih @dbonner1987 !

ada solusi untuk android?

@pareekkhushboo77 https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@sercanov @dbonner1987 Ini juga menggunakan pendekatan yang disebutkan di atas untuk iOS untuk melakukan layar peluncuran javascript.

@arnemart Terima kasih, masih berfungsi di RN 0.30.0. Saya harus menghapus aplikasi saya dan menginstalnya kembali. Itu memiliki kilatan putih untuk pertama kalinya, tetapi tidak ada setelah itu.

@nicklockwood Apakah ada semacam panggilan balik yang dapat saya gunakan untuk mengetahui kapan javascript yang sebenarnya dimuat. Alasannya adalah, ketika aplikasi saya bernavigasi antar halaman, ada transparansi di mana rootView.backgroundColor terlihat di latar belakang tampilan. Saya juga mendapatkan masalah serupa dengan plugin Drawer yang saya gunakan selama transisi membuka laci.
Jadi saya ingin melakukan sesuatu seperti:

• Setel warna latar belakang rootView ke gambar peluncur, menggunakan pendekatan @dbonner1987 di atas selama proses pemuatan.
• Ketika javascript selesai memuat dan rute navigasi pertama dimulai (atau sesuatu seperti itu)
• Atur warna latar belakang rootView kembali ke putih.

Jadi pada dasarnya saya membutuhkan panggilan balik untuk mengetahui kapan pemuatan selesai.

@UKDeveloper99 Silakan merujuk ke dokumentasi yang saya

https://github.com/mehcode/rn-splash-screen/blob/master/docs/android.md

@mehcode itu sempurna terima kasih!!

Adakah yang punya saran tentang cara menerapkan LaunchScreen.storyboard yang mati setelah bundel dimuat? Saat ini ditampilkan untuk waktu yang tetap kemudian saya melihat layar putih dan kemudian aplikasi memuat RN 34.1 xcode 8

@ajoshdee Saya memiliki masalah serupa di mana tampilan akhirnya menjadi jauh lebih besar dari layar. Tidak yakin apakah ini terkait tetapi saya menggunakan AutoLayout di LaunchScreen.xib .

Saya juga perlu mengatur

launchScreenView.autoresizingMask = UIViewAutoresizingNone;

Untuk mendapatkan ukurannya dengan benar.

Jadi https://github.com/facebook/react-native/issues/1402#issuecomment -166963438 dengan baris tambahan di atas

Anda juga dapat memperbarui warna peluncuran dengan mengganti baris ini di appdelegate.m :

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

oleh baris ini:
rootView.backgroundColor = [[UIColor alloc] initWithRed:0.94 green:0.90 blue:0.89 alpha:1.0];

dan temukan warna yang Anda inginkan dengan situs web ini

Apakah seseorang berhasil menyelesaikan ini di Android?

Berikut adalah solusi untuk ios dan Android: https://github.com/mehcode/rn-splash-screen .
Saya menyembunyikan layar splash di fungsi render app.tsx saya (titik masuk) dan menunjukkan gambar yang sama sampai semua permintaan https saya selesai.

kode saya:
```
render publik()
{
SplashScreen.hide();

   //after everything has finished loading - show my app.
   if (this.state.isFinishedloading) 
    {
        return (
            <this.navigator screenProps={{ ...providers }} />
        );
    }

  // Until then show the same image as the splash screen with an ActivityIndicator.
    return (
       <View style={{ flex: 1 }}>
          <Image style={styles.image} source={require('../assets/img/splash.png')} >
            <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
          </Image>
       </View>
    );

}

```

Apakah ada solusi untuk ini jika saya menggunakan storyboard untuk layar splash? Saya tidak lagi memiliki gambar layar peluncuran untuk setiap dimensi.

Dalam reaksi asli untuk iOS di dalam AppDelegate.m ubah baris berikut dengan menulis kode warna RGB Anda yang sesuai:

rootView.backgroundColor = [[UIColor alloc] initWithRed:52.0f/255.0f green:73.0f/255.0f blue:94.0f/255.0f alpha:1];

Untuk MERAH ubah angka 52
Untuk HIJAU ganti angka 73
Untuk BIRU ganti angka 94

_Catatan: Saya menggunakan reaksi asli v0.51.0_

Apakah masih belum ada solusi untuk Android?

@otoinsa lihat jawaban di atas https://github.com/facebook/react-native/issues/1402#issuecomment -339336380 oleh @neomib. Ada beberapa pustaka layar splash lain yang berfungsi dengan baik misalnya https://github.com/crazycodeboy/react-native-splash-screen.

Adakah saran tentang storyboard yang digunakan sebagai LaunchScreen?

Pendekatan saya seperti ini (tetapi aplikasi mogok saat diluncurkan)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation;
    [Fabric with:@[[Crashlytics class]]];

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                moduleName:@"MyApp"
                                initialProperties:nil
                                launchOptions:launchOptions];
    rootView.backgroundColor = [UIColor clearColor];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

//  UIViewController *rootViewController = [UIViewController new];

  UIStoryboard *storyboard = self.window.rootViewController.storyboard;
  UIViewController *rootViewController = [storyboard instantiateViewControllerWithIdentifier:@"the_storyboard_id"];

    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    return YES;
}

aplikasi mogok dengan kesalahan berikut:

2018-03-30 11:21:04.995601+0530 MyApp[6119:101967] Running application MyApp ({
    initialProps =     {
    };
    rootTag = 1;
})
2018-03-30 11:21:05.014109+0530 MyApp[6119:101967] *** Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/UIApplication.m:3529
2018-03-30 11:21:05.090174+0530 MyApp[6119:101967] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Application windows are expected to have a root view controller at the end of application launch'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000011170f12b __exceptionPreprocess + 171
    1   libobjc.A.dylib                     0x0000000110001f41 objc_exception_throw + 48
    2   CoreFoundation                      0x00000001117142f2 +[NSException raise:format:arguments:] + 98
    3   Foundation                          0x000000010faa2d69 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 193
    4   UIKit                               0x000000010d838051 -[UIApplication _runWithMainScene:transitionContext:completion:] + 3102
    5   UIKit                               0x000000010dc016f8 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke + 924
    6   UIKit                               0x000000010dfd74c8 +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:] + 153
    7   UIKit                               0x000000010dc012f1 -

Terima kasih.

diganti

UIStoryboard *storyboard = self.window.rootViewController.storyboard;

dengan

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];

sekarang aplikasi dimulai tetapi saya mendapatkan latar belakang hitam.

Atau Anda dapat menggunakan https://github.com/crazycodeboy/react-native-splash-screen itu jauh lebih mudah :)