Layar peluncuran iOS di React Native

105

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:

LaunchImage di Images.xcassets

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

Luncurkan opsi Gambar

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

masukkan deskripsi gambar di sini

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.

JV Lobo
sumber
Mengapa File Layar Peluncuran kosong di tangkapan layar kedua Anda?
Stefan
1
Karena saya telah membaca bahwa saya harus membiarkannya kosong jika saya ingin aplikasi menggunakan gambar dalam direktori aset
JV Lobo
OK, kamu benar. Untuk mendapatkan pemahaman yang lebih baik: Apakah teks dari bingkai hitam di atas berasal dari Anda atau dari reaksi?
Stefan
Itu dari React. Pada awalnya layar hitam ditampilkan (yang merupakan layar peluncuran), setelah itu teks yang saya tampilkan di tangkapan layar, dan setelah teks aplikasi saya muncul. Teks ini juga muncul sebelumnya, ketika aplikasi saya memiliki layar peluncuran React Native default.
JV Lobo
1
uninstall dari perangkat, bersihkan proyek dan coba instal lagi
LS_

Jawaban:

120

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

masukkan deskripsi gambar di sini

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

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:

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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:

masukkan deskripsi gambar di sini

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.

JV Lobo
sumber
Apakah gambar harus .png Saya mencoba menggunakan .jpg
Adam Katz
Saya belum mencoba dengan gambar .jpg. Mungkin hanya berfungsi dengan .png
JV Lobo
terima kasih kesalahan yang saya dapatkan di xcode adalah file tidak memiliki ekstensi file yang valid sehingga sepertinya itulah masalahnya, meskipun saya tidak mengerti mengapa jpg tidak berfungsi
Adam Katz
1
Apakah Anda harus memiliki semua 5 opsi, aplikasi saya tidak dimaksudkan untuk digunakan lanskap jadi saya meninggalkannya tetapi tidak berfungsi jadi saya bertanya-tanya apakah itu saja
Adam Katz
1
Saya masih mengalami masalah setelah ini, dan harus menghapus aplikasi dari simulator agar layar peluncuran asli berhenti ditampilkan.
Dan G Nelson
16

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

Dan G Nelson
sumber
menghapus aplikasi dari simulator berfungsi untuk saya. terima kasih
Andy
Anda adalah penyelamat hidup saya. Terima kasih sangatyyyyyyyyy banyak.
Halt
9

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. masukkan deskripsi gambar di sini

langkah 3:

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

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

langkah 5

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

masukkan deskripsi gambar di sini

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

Melatih
sumber
1
@Noitidart Senang bisa membantu.
Latih
1
Apa yang saya lakukan bahkan tidak menghapus LaunchScreen.xib, saya hanya menghapus node teks, lalu saya menyeret dalam tampilan gambar, mengimpor gambar seperti yang Anda jelaskan, kemudian mengatur gambar di UIImageView :) Apakah ada cara untuk membuatnya responsif? Seperti di tablet harus 3x, dan di ponsel harus 2x? Juga UIImageView saya tidak terpusat di semua perangkat. :( Ini tangkapan layar dari apa yang saya miliki - i.imgur.com/o5SMgHN.png
Noitidart
1
@Noitidart Bagus temukan pada mereka. Saya yakin mereka akan berguna bagi seseorang yang melihat jawaban ini.
Latih
1
Terima kasih saudara! Saya pikir cara Anda menemukannya adalah cara yang sebenarnya untuk melakukannya. Membuat gambar dengan set warna backgound yang berukuran masing-masing perangkat di setiap lanskap / potret bukanlah cara yang tepat (bagaimana jawaban yang paling disukai di sini melakukannya). Sekarang saya dengan MUDAH dapat menyesuaikan warna latar belakang. Penskalaan dll dapat dicapai dengan sempurna. Dengan gambar, semuanya ada di gambar.
Noitidart
1
jadi, prosesnya sama seperti jika Anda mengembangkan aplikasi asli dengan cepat. keren
jasan
8

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

Jeff Gu Kang
sumber
tidak percaya saya harus menanyakan ini ... dari mana Anda menjalankan perintah?
AlxVallejo
@AlxVallejo Direktori proyek teratas Anda.
Jeff Gu Kang
"✖ percikan tidak dapat ditemukan" Saya rasa ini tidak berhasil
AlxVallejo
@AlxVallejo Apakah ada file gambar Anda? Saya menggunakannya dengan berguna.
Jeff Gu Kang
1
generator-rn-toolboxaktualitas melakukan semua yang jawaban yang diterima tidak.
Felix
6

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!

Kotoran
sumber
5

Pastikan pilihan 'Launch Screen File' kosong: masukkan deskripsi gambar di sini

PoseLab
sumber
1

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

Pankaj Sharma
sumber
1

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"

masukkan deskripsi gambar di sini

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

Sara Inés Calderon
sumber
0

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.

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

Ronit
sumber
0

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.

Loukas Andreadelis
sumber
0

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

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

masukkan deskripsi gambar di sini

  1. bersihkan proyek dan jalankan react-native run-iosdan Anda akan melihat perubahannya.
Hadi Mir
sumber
-5

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.

eyal83
sumber
Terima kasih atas jawaban anda. Saya tidak mengerti dengan baik karena saya pikir Anda salah ketik. Saya telah melakukan pencarian global dalam proyek saya untuk menghapus referensi ke LaunchScreen.xib, karena tidak ada referensi ke file: puu.sh/lGu7z/8fd88a886e.png Terima kasih.
JV Lobo