A React Native alkalmazás futtatása iOS rendszeren

Nemrég kezdtem fejleszteni a React-Native alkalmazást az iOS rendszeren. Ez volt az első kísérletem a natív alkalmazásfejlesztésre. Meglepett a React-Native parancssori felületének könnyű és absztrakciós szintje. Kíváncsi voltam arra is, hogy mi történik a motorháztető alatt, amikor a React-Native futtat egy alkalmazást egy eszközön vagy egy szimulátoron.

Sok időt töltöttem át a vonatkozó kódon. Nem volt olyan hely, amely összefoglalná, mit tesz a React-Native az alkalmazás működéséhez. Részben ez volt a motiváció, hogy előálljon ez a darab. Segíteni szeretnék minden másnak, aki újrakezdi a React-Native alkalmazás fejlesztését.

A React-Native parancssori segédprogramokat kínál az alkalmazások futtatásához iOS és Andriod szimulátorokon / eszközökön. Minden további nélkül próbáljuk megérteni, hogy mi és hogyan kell futtatni a React-Native alkalmazásokat az iOS rendszeren.

A színfalak mögött

A React-native biztosítja ezt az ügyes segédprogramot init. Létrehoz egy natív alkalmazássablont az Ön számára. Ez a sablon létrehozza a releváns Xcode projektfájlokat az alkalmazás iOS mappájában.

A React-Native alkalmazásokat iOS szimulátorokon / fizikai eszközökön lehet elindítani, ha a következő parancsot futtatja az alkalmazás gyökérmappájában:

react-native run-ios

A sikeres végrehajtás megnyitja az alkalmazást egy szimulátoron vagy egy csatlakoztatott eszközön. Ahhoz, hogy ez megtörténjen, van egy csomó lépés, amelyet a fenti parancs futtatásakor hajtanak végre.

run-ios parancs

A React-Native számos parancssori segédprogramot biztosít az alkalmazással való együttműködéshez. Ezek a React-Native csomópont modul local-cli mappájában találhatók. A run-ios egy ilyen segédprogram, amely meghívja runIOS()a runIOS.js fájlban definiált függvényt. A run-ios elfogad bizonyos beállításokat, például:

#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

Eszköz / szimulátor kiválasztása

Ha nincs megadva eszköz run-ios, alapértelmezés szerint egy szimulátoron indítaná az alkalmazást Debug módban. Ez xcrun simctlparancsok sorozatának végrehajtásával történik . Először ellenőrizzék a Mac-en elérhető szimulátorok listáját, kiválasztanak egyet közülük, majd elindítják a kiválasztott szimulátort.

Alternatív megoldásként, ha az alkalmazást fizikai eszközön szeretné futtatni, csatlakoztassa az eszközt a Mac-hez, majd adja tovább az eszköz adatait a run-iosparancsnak.

A következő lépés az alkalmazás Xcode projektjének elkészítése.

Épület alkalmazáskód

Általában a React-Native alkalmazás Xcode projekt megtalálható a gyökérmappa alatt található iOS mappában. Az Xcode projekt a xcodebuildparancs segítségével épül fel . A megadott run-iosparaméterek, például a konfiguráció stb. Átkerülnek erre a parancsra.

Alapértelmezés szerint az Xcode projekt a Debug sémában épül fel. A projekt sikeres felépítése után az alkalmazást telepítik és elindítják a szimulátoron vagy a csatlakoztatott eszközön.

Alkalmazáskód csomagolás Debug módban

A fejlesztési folyamat során a React Native dinamikusan, futás közben tölti be JavaScript kódunkat. Ehhez szükségünk van egy szerverre, amely összekapcsolja az alkalmazáskódunkat, és szükség szerint megadja.

Amíg az Xcode projekt Debug módban épül, párhuzamosan elindul a Metro server példánya is. A Metro a csomag, amelyet a React-Native parancssori felület (CLI) által létrehozott alkalmazások használnak. Az alkalmazáskód csomagolására használják a fejlesztés során. Ez segít a gyorsabb és könnyebb hibakeresésben azáltal, hogy lehetővé teszi a gyors újratöltést stb.

A metró szerver alapértelmezés szerint a 8081-es porton indul. Miután az alkalmazás elindult a szimulátorban, kérést küldünk a kiszolgálónak a csomagért.

#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];

Ezután a szerver letölti az összes szükséges függőséget, összekapcsolja a JavaScript alkalmazáskódot és visszaküldi az alkalmazásnak. Ezt a lépést követően láthatja, hogy az alkalmazás működik a szimulátoron vagy egy csatlakoztatott eszközön.

Alkalmazáskód-csomag kiadási módban - A JavaScript-csomag előre csomagolása

Kiadási módban elő kell csomagolnunk a JavaScript csomagot, és el kell terjesztenünk azt az alkalmazásunkon belül. Ehhez kódváltásra van szükség, hogy tudja a statikus csomagot betölteni. Az AppDelegate.m fájlban módosítsa a jsCodeLocation parancsot a statikus csomagra, ha éppen nincs hibakeresési módban.

#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Ez most hivatkozni fog az main.bundleerőforrás fájlra. Ez a fájl az Bundle React Native code and imagesépítési fázis alatt jön létre az Xcode-ban. Ebben a szakaszbanreact-native-xcode.shszkript futamely a JavaScript alkalmazáskódot tartalmazza. Ez a szkript megtalálható a React-Native csomópont modul szkriptek mappájában.

Az alkalmazás építése Xcode-ból

Alternatív megoldásként az Xcode projekt a Mac Xcode-jába is beépíthető a React-Native CLI használata helyett. Miután elkészült, az alkalmazás elindítható az Xcode opciók közül kiválasztott szimulátoron vagy egy csatlakoztatott fizikai eszközön.

Remélem, hogy ez segített megérteni a különféle lépéseket, amelyek akkor fordulnak elő, amikor egy egyszerű react-native run-iosparancsot futtatunk, amely varázslatosan felhoz egy alkalmazást az iOS rendszeren.

Az itt megadott információk egyes részei a React-Native honlapjáról származnak. A többi olyan termék, hogy a kód körül szaglászom :)