Saya bekerja dengan aplikasi React Native dan saya mencoba mengatur layar peluncuran yang disesuaikan tetapi saya tidak bisa.

React Native membuat LaunchScreen.xib secara default, jadi saya telah membuat LaunchImage di dalam Images.xcassets:

Saya juga membaca bahwa saya harus mengubah "File Layar Luncurkan" di bawah "Ikon Aplikasi dan Gambar Luncurkan" di opsi saya:

Setelah saya selesai melakukannya, layar peluncuran saya menjadi benar-benar hitam dan saat aplikasi dimuat, ada bingkai hitam atas dan bawah:

Jadi saya tidak tahu apa yang harus saya lakukan untuk mengatur layar peluncuran saya di proyek React Native saya.

Saya akan berterima kasih jika seseorang dapat membantu saya mengatasi masalah itu.

Terima kasih sebelumnya.

Saya dapat menyelesaikan masalah ini, dengan bantuan utas ini: Luncurkan Gambar tidak muncul di aplikasi iOS (menggunakan Images.xcassets)

Jadi saya akan menjelaskannya secara mendalam jika itu dapat membantu orang lain.

Pertama , Anda perlu membuat gambar tertentu. Apa yang saya gunakan untuk itu adalah template ini dan halaman web ini dengan generator otomatis: TiCons

Ketika saya mengunduh gambar saya, saya mengambilnya di dalam folder assets / iphone, saya hanya mengambil yang itu:

• [email protected] (640x960)
• [email protected] (640x1136)
• [email protected] (750x1334)
• [email protected] (1242x2208)
• [email protected] (2208x1242)

Anda juga membutuhkan file Contents.json ini di folder yang sama, saya mendapatkannya dari seorang teman:

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

Jadi, pada titik ini saya membuat folder bernama LaunchImage.launchimage di dalam folder Images.xcassets di proyek React Native saya dan menyimpan gambar dan file Contents.json di dalamnya:

Kedua , Anda harus membuka proyek Anda di Xcode dan dalam pengaturan "Umum", di bawah " Ikon aplikasi dan Gambar Peluncuran " kita harus membiarkan opsi " Luncurkan File Layar " kosong (kita juga dapat menghapus file LaunchScreen.xib di dalam proyek kita ), dan klik " Gunakan Katalog Aset " setelah itu. Sebuah modal akan terbuka, kami memilih untuk Migrasikan Gambar katalog

Sekarang, di pemilih " Launch Images Source ", kita dapat memilih folder yang kita buat sebelumnya, LaunchImage (yang berisi gambar kita):

Kami memilih ini daripada Aset Merek dan kami dapat menghapus folder Aset Merek .

Pada titik ini, kami akan dapat menjalankan aplikasi React Native kami dengan gambar peluncuran khusus kami:

Saya tahu ini tampaknya agak rumit untuk tugas yang seharusnya mudah, tetapi setelah membaca banyak tentangnya, ini adalah satu-satunya cara agar gambar splash saya berfungsi, jadi saya ingin berbagi dengan komunitas.

Pastikan untuk menghapus aplikasi dari simulator. Kemudian bersihkan proyek Anda.

Saya telah melihat banyak jawaban ini di SO yang berisi solusi tentang cara membuat layar peluncuran baru. Maksud saya, mari kita pikirkan sebentar.

Saat kita membuat proyek react-native baru, apa yang kita lihat untuk layar peluncuran?

> Layar peluncuran default Facebook

Jadi itu membuat saya berpikir, Bagaimana mereka melakukannya?

Mereka menciptakan LaunchScreen.xib

Saya pikir pasti ada alasan untuk ini. Jadi saya pergi keLaunchScreen.xib dan membuat perubahan ke teks default "React Native ..." atau apa pun yang dikatakannya. Saya menjalankan aplikasi sekali lagi untuk melihat bahwa layar peluncuran mencerminkan hasil edit saya.

Solusi 1 Edit LaunchScreen.xib yang ada

Solusi 2 Buat sendiri

Jadi saya melakukannya, butuh waktu lebih lama untuk mengetik jawaban ini daripada belajar cara membuatnya sendiri. Both of these solutions are compatible with all the devices.

Langkah 1:

Menghapus LaunchScreen.xib

Langkah 2:

klik klik images.xcassets kanan di ruang putih klik **import**kemudian pilih gambar yang ingin Anda tambahkan.

langkah 3:

Klik kanan pada folder root proyek Anda dan tambahkan jenis file baru dan beri Launch Screennama apa pun yang Anda inginkan.

langkah 4

Klik proyek Anda di navigasi kiri, buka Settings> Generaldan di bawah App Icons and Launch Images. Pastikan Launch Image Sourcekosong dan Launch Screen Filenamanya sama dengan layar peluncuran yang baru Anda buat.

langkah 5

Klik pada file baru yang Anda buat step 2, seret Image Viewatau edit sesuka Anda.

Maka itu, Anda sudah selesai. Anda bahkan tidak perlu membersihkan solusinya, cukup buat kembali.

Memperbarui

generator-rn-toolboxsudah ditinggalkan. Gunakan react-native-make sebagai gantinya.

Jawaban lama

Saya merekomendasikan generator-rn-toolbox untuk menerapkan layar peluncuran atau ikon utama menggunakan react-native. Ini lebih sederhana dan mudah digunakan melalui cli sebagai react-native.

• Tidak perlu membuka Xcode.
• Tidak perlu membuat banyak file gambar untuk berbagai resolusi.
• Setiap saat mengubah layar peluncuran menggunakan satu baris perintah.

Persyaratan

• simpul> = 6
• Satu gambar persegi atau file psd dengan ukuran lebih dari 2208x2208 px resolusi untuk layar peluncuran (splash screen)
• Pikiran positif ;)

Install

1. Instal generator-rn-toolbox dan yo
2. npm install -g yo generator-rn-toolbox
3. Pasang imagemagick brew install imagemagick

4. Terapkan layar splash di iOS

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

   atau Android

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

Itu saja. :)

Sumber

Baru saja melalui ini dan bekerja dengan baik. Satu-satunya halangan yang saya temukan adalah tidak menghapus konten simulator. Jika Anda menemukan bahwa layar peluncuran baru Anda tidak berfungsi, Anda perlu membuka simulasi dan pergi ke yang berikut:

Simulator> Atur ulang konten dan pengaturan

Pasti ada beberapa cache hardcore yang terjadi di dalam simulator itu tetapi setelah itu selesai - jalankan kembali dan Anda akan melihat aplikasinya. Pastikan Anda melakukan ini untuk kedua simulator xcode dan simulator react-native!

Pastikan pilihan 'Launch Screen File' kosong:

Ikuti tautan ini:

Jika Anda ingin menambahkan splash screen ke aplikasi React Native saya, ikuti prosesnya, hasilnya akan menjadi milik Anda sepenuhnya.

LANGKAH: 1 Pertama, saya membuat folder splashImageResource dan menambahkan file launchScreen.xib dengan gambar splash.

LANGKAH: 2 ubah kode seperti yang tertulis di dalam tag subviews. dengan kode ini<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

LANGKAH: 3 Anda harus membuka aplikasi Anda di Xcode. Berikut langkah-langkah yang harus diikuti:

a) Buka folder proyek Anda

b) Buka folder ios

c) Buka file yang memiliki ekstensi .xcodeproj, dalam kasus saya itu adalah splasScreenTutorial.xcodeproj

d) Buka file ini di Xcode Anda.

e) Hapus file launchScreen.xib.

f) Klik pada folder splashScreenTutorial, lalu pergi ke bagian TARGET

g) Klik pada Tab Umum di sudut kiri atas Xcode Anda dan gulir ke bawah ke Ikon Aplikasi dan Luncurkan Gambar

h) Buka Luncurkan Sumber Gambar dan klik Gunakan Katalog Aset. Klik bermigrasi.

i) Hapus teks LaunchScreen dari Launch Screen File.

j) Kembali ke folder proyek Anda dan buka file Images.xcassets. Anda harus melihat AppIcon dan LaunchImage.

k) Selanjutnya, klik pada LaunchImage, Terakhir, tarik gambar splash screen yang Anda miliki dengan ukuran berbeda ke kotak Launch Image.

Tarik gambar seperti ini.

Uji Splash Screen a) Untuk melihat perubahan, Anda perlu menghapus aplikasi dari simulator jika Anda telah menjalankan aplikasi pada awalnya.

b) Untuk menghapus aplikasi, klik pada menu Hardware di bilah Simulator Anda dan pergi ke Beranda.

c) Ketuk dan tahan ikon aplikasi tertentu yang ingin Anda hapus, dan klik tanda X pada ikon tersebut.

d) Jalankan aplikasi Anda lagi menggunakan react-native run-ios

Anda dapat melihat Splash Screen Anda

Bagi saya XCode 10.1dan react-native 59.2saya harus melalui langkah-langkah tambahan setelah menambahkan gambar, storyboard, dan 1 gambar universal.

• Klik kanan pada gambar, klik Show in Finder, lalu edit Contents.jsonfile Anda
• Tambahkan gambar ke bagian 2x dan 3x
• Buka papan cerita Luncurkan Layar, dengan menu "penggaris"
• Pastikan hanya panah merah di dalam yang menyala, bukan panah merah di luar
• Klik "Margin Relatif Area Aman"

Gambar sekarang harus dipusatkan pada semua ukuran iPhone (diuji pada Potret).

Jika Anda ingin menggunakan file .xib Layar Peluncuran yang ada, React Native yang awalnya telah disiapkan, tetapi dengan logo dan warna latar belakang Anda sendiri (dan tanpa teks default React Native), Anda dapat mengikuti petunjuk di sini: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Jika Anda membuat layar Peluncuran dengan bantuan React maka Anda harus menambahkan hal yang sama di file LaunchScreen.xib di iOS Xcode sehingga Anda dapat mengambil Screenshot dan menambahkannya sebagai Gambar di Images.xcassets.

Buka LaunchScreen lalu tambahkan UIImageView di View from Object Library dari Right Panel di Xcode.

Tambahkan Batasan Trailing, Leading, Bawah dan Atas ke Tampilan. Seperti Yang Ditunjukkan Di Bawah -

Jangan Lupa untuk mengubah UIImageView ContentMode sebagai AspectFit sehingga akan terlihat sama saat aplikasi berjalan.

Setelah itu Anda perlu menambahkan kode di AppDelegate agar Anda tidak mendapatkan layar putih. Kodenya adalah -

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

Anda dapat Merujuk - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Hanya bagi mereka yang masih mengalami masalah, ada satu langkah lagi yang hilang dari jawaban yang diterima sebelum membuat layar Peluncuran iOS berfungsi.

Buka Info.plistdi folder proyek dan hapus kunci "Main nib file base name". Kemudian, buat kembali dan semoga masalahnya hilang.

Setelah mengikuti solusi di atas, aplikasi saya macet di Layar Splash, jadi saya melakukan 7 langkah berikut untuk menambahkan layar splash khusus di ios.

1. Buka Xcode dan cari LaunchScreen.xibfile dalam proyek Anda (Perhatikan bahwa ini adalah layar yang ditampilkan secara default di ios)
2. Untuk menghapus / mengedit teks di layar klik di atasnya dan lakukan perubahan yang diperlukan sesuka Anda.
3. Untuk mengubah warna latar belakang, cari ikon berikut di bilah sisi kanan dan klik tombol ikon kecil di bagian paling atas, keempat dari kiri (saat Anda mengarahkan kursor, akan muncul tulisan "Show the Attributes Inspector")

4. Sekarang Anda telah mengetahui cara mengubah warna latar belakang, mari tambahkan gambar ke layar Splash untuk melakukannya klik pada tombol berikut dan pilih tampilan Gambar dari daftar dan seret dan letakkan di mana pun Anda inginkan di layar splash.

5. Sekarang kita harus menambahkan gambar ke Images.xcassetssehingga kita bisa mereferensikannya LaunchScreen.xibuntuk melakukan kebagian itu Images.xcassets. klik +tombol diikuti oleh importdan kemudian tambahkan gambar yang ingin Anda tampilkan di layar splash. Di bawah AppIconAnda akan melihat nama file gambar Anda. Ini adalah nama yang akan kami gunakan untuk referensi diLaunchScreen.xib

6. Sekarang kita harus mereferensikan gambar yang kita tambahkan dalam LaunchScreen.xibfile jadi arahkan kembali ke LaunchScreen.xibdan klik image viewyang kita tambahkan sebelumnya dan di sudut kanan Anda akan melihat banyak pilihan. klik yang pertama yang mengatakan imagedan pilih gambar yang Anda impor pada langkah 5

7. bersihkan proyek dan jalankan react-native run-iosdan Anda akan melihat perubahannya.

Anda harus menyetel sumber gambar layar peluncuran sebagai gambar Anda. Setelah itu hapus file LauncScreen.xib. Setelah itu lakukan pencarian global dalam proyek Anda dan hapus semua referensi ke LaunchScreen.xib (lihat di seluruh proyek Anda. Saya menggunakan editor teks sublime jadi cmd + shift + f) dan seharusnya berfungsi.