Наскоро започнах да разработвам приложение React-Native за iOS. Това беше първият ми опит в разработването на собствени приложения. Бях изненадан от лекотата и нивото на абстракция, осигурени от интерфейса на командния ред на React-Native. Също така бях любопитен да разбера какво се случва под капака, когато React-Native стартира приложение на устройство или симулатор.
Прекарах много време, преглеждайки съответния код. Нямаше място, което да обобщи това, което React-Native прави, за да накара приложението да работи. Отчасти това беше мотивацията да излезе с това парче. Искам да помогна на всеки друг човек, който започва отначало с разработването на приложението React-Native.
React-Native предоставя помощни програми за команден ред за стартиране на приложение на iOS и Andriod симулатори / устройства. Без повече шум, нека се опитаме да разберем какъв и как е процесът за стартиране на React-Native приложения на iOS.
Зад сцената
React-native предоставя тази чиста помощна програма, наречена init. Той създава шаблон за собствено приложение за вас. Този шаблон създава съответните файлове с проекти на Xcode под папката на iOS на приложението.
Приложенията React-Native могат да се стартират на iOS симулатори / физически устройства, като се изпълни следната команда в основната папка на приложение:
react-native run-iosУспешното изпълнение ще отвори приложението на симулатор или свързано устройство. За да се случи това, има куп стъпки, които се изпълняват, когато изпълним горната команда.
команда run-ios
React-Native предоставя редица помощни програми за команден ред за работа с приложението. Те могат да бъдат намерени в папката local-cli на модула React-Native node. run-ios е една такава програма, която извиква runIOS()функцията, дефинирана във файла runIOS.js. run-ios приема определени опции като:
#Launch the app on a specific simulatorreact-native run-ios --simulator "iPhone 5"#Pass a non-standard location of iOS directoryreact-native run-ios --project-path "./app/ios"#Run on a connected device, e.g. Max's iPhonereact-native run-ios --device "Max\'s iPhone"#Build the app in Release modereact-native run-ios --configuration ReleaseИзбор на устройство / симулатор
Когато не е посочено устройство, run-iosще стартира приложението в режим за отстраняване на грешки на симулатор по подразбиране. Това става чрез изпълнение на поредица от xcrun simctlкоманди. Те първо проверяват списъка с налични симулатори на Mac, избират един от тях и след това зареждат избрания симулатор.
Като алтернатива, ако искате да стартирате приложението на физическо устройство, включете устройството към Mac и след това предайте подробностите за устройството на run-iosкомандата.
Следващата стъпка е да се изгради проектът Xcode на приложението.
Изграждане на код на приложението
Обикновено проектът React-Native за приложението Xcode може да бъде намерен в папката на iOS, намираща се в основната папка. Проектът Xcode се изгражда с помощта на xcodebuildкомандата. Всички опции, посочени run-iosкато конфигурация и т.н., се предават на тази команда.
По подразбиране проектът Xcode е вграден в схема за отстраняване на грешки. След като проектът бъде успешно изграден, приложението се инсталира и стартира на симулатора или свързаното устройство.
Групиране на кода на приложението в режим за отстраняване на грешки
По време на процеса на разработка React Native зарежда нашия JavaScript код динамично по време на изпълнение. За целта ни е необходим сървър, който да обедини нашия код на приложението и да го предостави при необходимост.
Докато проектът Xcode се изгражда в режим за отстраняване на грешки, екземпляр на Metro сървър също се стартира паралелно. Metro е пакетът, използван от приложения, създадени от интерфейса на командния ред React-Native (CLI). Използва се за групиране на кода на приложението ни в процес на разработка. Това ни помага за по-бързо и лесно отстраняване на грешки, като позволява горещо презареждане и т.н.
По подразбиране Metro сървърът е конфигуриран да стартира на порт 8081. След като приложението се стартира в симулатора, до сървъра се изпраща заявка за пакета.
#Code in AppDelegate.m sends the request for the bundle: #index.bundle to serverjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];След това сървърът изтегля всички необходими зависимости, групира кода на приложението JavaScript и го изпраща обратно в приложението. След тази стъпка можете да видите приложението, работещо на симулатора или свързано устройство.
Обединяване на кода на приложението в режим на освобождаване - Предварително пакетиране на пакета JavaScript
В режим на освобождаване трябва предварително да опаковаме пакета JavaScript и да го разпространим в нашето приложение. Правейки това изисква промяна на кода, така че да знае да зареди статичния пакет. Във файла AppDelegate.m променете jsCodeLocation, за да сочи към статичния пакет, ако не сте в режим за отстраняване на грешки.
#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];#endifТова сега ще препраща към main.bundleресурсния файл. Този файл се създава по време на Bundle React Native code and imagesфазата на изграждане в Xcode. По време на тази фаза,react-native-xcode.shскриптът се изпълнявакойто обединява кода на приложението на JavaScript. Този скрипт може да бъде намерен в папката скриптове на React-Native node модула.
Изграждане на приложението от Xcode
Като алтернатива, проектът Xcode може също да бъде изграден в Xcode в Mac, вместо да се използва React-Native CLI. След като приключи, приложението може да се стартира на симулатор, избран от опциите Xcode или на свързано физическо устройство.
I hope this helped you understand the various steps which happen when we run a simple react-native run-ios command which magically brings up an app on iOS.
Some parts of the information provided here have been sourced from the React-Native home page. The rest is a product of me snooping around the code :)