Ini adalah terjemahan dari artikel blogger asli dengan nama samaran Soujanya PS. Dia adalah seorang profesional di bidangnya dan suka tidak hanya mengembangkan aplikasi dan layanan, tetapi juga menulis artikel tentang itu. Berikut ini ulasannya tentang peluncuran aplikasi iOS menggunakan kerangka kerja React Native.
Belum lama ini, saya mulai menggunakan React Native untuk aplikasi iOS. Ini adalah penyelaman mendalam pertama saya ke lingkungan pengembangan aplikasi asli. Saya perhatikan bahwa saya terkejut dengan kemudahan seluruh proses, serta tingkat abstraksi yang disediakan antarmuka React Native command-line. Sebenarnya, ini adalah salah satu faktor yang mendorong saya untuk menulis tentang kerangka kerja ini. Saya ingin berbagi pengalaman saya sendiri dengan mereka yang baru saja mulai bekerja dengannya.
Skillbox merekomendasikan: "PRO Pengembang Seluler . "
Kami mengingatkan Anda: untuk semua pembaca "Habr" - diskon 10.000 rubel saat mendaftar untuk kursus Skillbox apa pun menggunakan kode promosi "Habr".
React Native menyediakan alat baris perintah untuk menjalankan aplikasi iOS dan Android pada emulator dan perangkat. Mari kita coba memahami apa dan bagaimana yang harus dilakukan untuk menggunakan aplikasi React Native untuk iOS.
Sebenarnya diluncurkan
React Native menyediakan utilitas luar biasa yang disebut init. Ini menyediakan templat aplikasi, sembari membuat file proyek Xcode yang relevan di folder iOS aplikasi ini.
Ini, pada gilirannya, dapat diluncurkan baik di lingkungan emulator iOS dan di ponsel / tablet dengan memasukkan perintah berikut di folder root aplikasi:
run-ios asli-bereaksiEksekusi perintah yang berhasil disertai dengan peluncuran aplikasi di emulator atau pada perangkat. Kami memberi tahu Anda apa yang perlu dilakukan untuk ini.
Jalankan perintah-ios
React Native memberi pengembang beberapa utilitas baris perintah untuk berinteraksi dengan aplikasi. Mereka terletak di folder cli-lokal dari node modul Asli Bereaksi. Run-ios adalah salah satu utilitas yang menjalankan fungsi runIOS () yang didefinisikan dalam file runIOS.js.
Run-ios memungkinkan Anda untuk menggunakan opsi berikut:
#Luncurkan aplikasi pada simulator tertentu
react-native run-ios --simulator "iPhone 5"
# Lewati lokasi non-standar dari direktori iOS
react-asli run-ios --project-path "./app/ios"
#Jalankan di perangkat yang terhubung, mis. IPhone Max
reaksi-asli run-ios - perangkat "Max's iPhone"
# Buat aplikasi dalam mode Rilis
react-native run-ios - Konfigurasi rilisPemilihan Perangkat / Emulator
Jika perangkat tidak ditentukan, maka run-ios akan meluncurkan mode debugging aplikasi di emulator default. Ini dimungkinkan berkat serangkaian perintah xcrun / simctl. Pertama, periksa daftar emulator yang tersedia, pilih salah satunya dan muat aplikasi di lingkungannya.
Jika Anda ingin menjalankan aplikasi pada perangkat fisik, cukup sambungkan ke laptop Anda dan atur detailnya melalui run-ios.
Langkah selanjutnya adalah membuat proyek aplikasi Xcode.
Kode aplikasi
Biasanya, proyek aplikasi React Native Xcode terletak di folder iOS di direktori root. Proyek Xcode dibuat menggunakan perintah xcodebuild. Setiap parameter yang sebelumnya ditetapkan untuk run-ios diteruskan ke perintah ini.
Setelah proyek dibuat, aplikasi diinstal dan diluncurkan pada emulator atau perangkat yang terhubung.
Menambahkan kode aplikasi dalam mode debug
Di seluruh proses pengembangan, React Native secara dinamis memuat kode Anda. Agar semuanya berjalan lancar dan kode tersedia sesuai kebutuhan, Anda akan memerlukan server.
Saat proyek Xcode sedang di-debug, server Metro memulai secara paralel dengannya. Ini digunakan oleh aplikasi yang dibuat menggunakan antarmuka baris perintah Asli Bereaksi. Semua ini memungkinkan Anda untuk mempercepat dan menyederhanakan proses menggunakan reboot "panas" dan metode lainnya.
Secara default, Metro mendengarkan pada port 8081. Segera setelah aplikasi diluncurkan di emulator, permintaan dikirim ke server.
#Code in AppDelegate.m sends the request for the bundle: #index.bundle to server jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];
Server memuat semua dependensi yang diperlukan, mengumpulkan kode JavaScript dan mengirimkannya ke aplikasi. Setelah langkah ini, Anda dapat melihat aplikasi yang sedang berjalan di emulator atau pada perangkat yang terhubung.
Paket JavaScript
Dalam mode rilis, Anda harus mengemas JavaScript terlebih dahulu, menempatkannya dalam aplikasi. Untuk melakukan ini, beberapa perubahan diperlukan untuk memberikan kemampuan mengunduh paket statis. Anda perlu mengubah jsCodeLocation di file AppDelegate.m, yang menunjukkan lokasi paket statis di luar mode debug:
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@ fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ withExtension:@]; #endif
Sekarang ini adalah indikasi dari file sumber daya main.bundle yang muncul selama pemrosesan proyek Xcode.Pada tahap ini, skrip react-native-xcode.sh dijalankan. Ini dapat ditemukan di folder skrip modul React Native.
Membuat Aplikasi dari Xcode
Anda juga dapat membuat proyek Xcode langsung di Mac daripada menggunakan React Native CLI. Setelah membuat aplikasi, Anda juga dapat menjalankannya pada emulator yang dipilih dalam opsi Xcode, atau pada perangkat fisik.
Saya berharap bahwa materi ini membantu Anda memahami proses yang dimulai ketika perintah run-ios reaksi-asli dijalankan, yang menciptakan keajaiban dan memungkinkan Anda untuk menjalankan aplikasi di lingkungan iOS.
Skillbox merekomendasikan: