by Soujanya PS

通過Soujanya PS

如何在iOS上運行React Native應用 (How to run a React Native app on iOS)

I recently started to develop a React-Native app on iOS. This was my first foray into native app development. I was surprised by the ease and level of abstraction provided by React-Native’s command line interface. I was also curious to understand what happens under the hood when React-Native runs an app on a device or a simulator.

我最近開始在iOS上開發React-Native應用程序。這是我對本機應用程序開發的首次嘗試。我對React-Native的命令行界面提供的簡易性和級別感到驚訝。我也很想知道當React-Native在設備或模擬器上運行應用程序時，幕后的情況。

I spent a lot of time going through the relevant code. There was no one place which summarized what React-Native does to get the app working. Partly, that was the motivation to come up with this piece. I want to help any other person who is starting off afresh with React-Native app development.

我花了很多時間來閱讀相關代碼。沒有一個地方可以概括React-Native為使應用程序正常運行所做的工作。在某種程度上，這是提出這一部分的動機。我想幫助任何其他剛開始使用React-Native應用程序開發的人。

React-Native provides command line utilities to run an app on iOS and Andriod simulators/devices. Without further ado, let's try to understand the what and how of the process to run React-Native apps on iOS.

React-Native提供了命令行實用程序，可在iOS和Andriod模擬器/設備上運行應用程序。事不宜遲，讓我們嘗試了解在iOS上運行React-Native應用程序的過程和過程。

幕后花絮 (Behind the scenes)

React-native provides this neat utility called init. It creates a native app template for you. This template creates the relevant Xcode project files under the iOS folder of the app.

React-native提供了稱為init簡潔實用程序。它為您創建一個本機應用程序模板。該模板在應用程序的iOS文件夾下創建相關的Xcode項目文件。

React-Native apps can be launched on iOS simulators/physical devices by running the following command in the root folder of an app:

通過在應用程序的根文件夾中運行以下命令，可以在iOS模擬器/物理設備上啟動React-Native應用程序：

react-native run-ios

Successful execution would open the app on a simulator or a connected device. For this to happen, there are a bunch of steps which are executed when we run the above command.

成功執行將在模擬器或連接的設備上打開該應用程序。為此，當我們運行上述命令時，將執行許多步驟。

run-ios命令 (run-ios command)

React-Native provides a number of command line utilities to work with the app. These can be found under the local-cli folder of the React-Native node module. run-ios is one such utility which invokes the runIOS() function defined in the runIOS.js file. run-ios accepts certain options such as:

React-Native提供了許多與該應用程序一起使用的命令行實用程序。這些可以在React-Native節點模塊的local-cli文件夾下找到。 run-ios就是這樣一種實用程序，它調用runIOS.js文件中定義的runIOS()函數。 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

設備/仿真器選擇 (Device/Simulator selection)

When no device is specified, run-ios would launch the app in Debug mode on a simulator by default. This is done by executing a series of xcrun simctl commands. They would first check the list of available simulators on Mac, pick one among them, and then boot the selected simulator.

如果未指定任何設備，則默認情況下， run-ios將在模擬器上以調試模式啟動該應用程序。這是通過執行一系列xcrun simctl命令來完成的。他們將首先檢查Mac上可用模擬器的列表，從中選擇一個，然后啟動選定的模擬器。

Alternatively, if you wish to run the app on a physical device, plug the device to the Mac and then pass on the device details to the run-ios command.

或者，如果您希望在物理設備上運行該應用程序，則將該設備插入Mac，然后將設備詳細信息傳遞給run-ios命令。

The next step is to build the Xcode project of the app.

下一步是構建應用程序的Xcode項目。

建立應用程式程式碼 (Building App code)

Usually, the React-Native app Xcode project can be found in the iOS folder present under the root folder. The Xcode project is built using the xcodebuild command. Any options specified to run-ios such as the configuration etc. are passed on to this command.

通常，React-Native應用程序Xcode項目可以在根文件夾下的iOS文件夾中找到。 Xcode項目是使用xcodebuild命令構建的。為run-ios指定的所有選項(例如配置等)都將傳遞到此命令。

By default, the Xcode project is built in Debug scheme. Once the project is successfully built, the app is installed and launched on the simulator or the connected device.

默認情況下，Xcode項目是在Debug方案中構建的。成功構建項目后，將在模擬器或連接的設備上安裝并啟動該應用程序。

在調試模式下捆綁應用程序代碼 (App code bundling in Debug Mode)

During the development process, React Native loads our JavaScript code dynamically at runtime. For this, we need a server to bundle our app code and provide it as needed.

在開發過程中，React Native在運行時動態加載我們JavaScript代碼。為此，我們需要一臺服務器來捆綁我們的應用程序代碼并根據需要提供它。

While the Xcode project is being built in Debug mode, an instance of Metro server is also started in parallel. Metro is the bundler used by apps created by the React-Native command line interface (CLI). It is used to bundle our app code in development. This helps us with faster and easier debugging by enabling hot reloading etc.

當在Debug模式下構建Xcode項目時，還將并行啟動Metro服務器的實例。 Metro是由React-Native命令行界面(CLI)創建的應用程序使用的捆綁程序。它用于在開發中捆綁我們的應用程序代碼。通過啟用熱重載等功能，這有助于我們更快，更輕松地進行調試。

Metro server is configured to start on port 8081 by default. Once the app is launched in the simulator, a request is sent to the server for the bundle.

默認情況下，將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];

The server then downloads all the required dependencies, bundles the JavaScript app code and sends it back to the app. After this step, you can see the app working on the simulator or a connected device.

然后，服務器下載所有必需的依賴項，捆綁JavaScript應用程序代碼，然后將其發送回應用程序。完成此步驟后，您可以看到該應用程序正在模擬器或連接的設備上運行。

發布模式中的應用程序代碼捆綁-預打包JavaScript捆綁 (App code bundling in Release Mode — Pre-packaging the JavaScript bundle)

In release mode, we have to pre-package the JavaScript bundle and distribute it inside our app. Doing this requires a code change so that it knows to load the static bundle. In AppDelegate.m file, change jsCodeLocation to point to the static bundle if you’re not in debug mode.

在發布模式下，我們必須預先打包JavaScript捆綁包并將其分發到我們的應用程序中。這樣做需要更改代碼，以便知道加載靜態包。如果您未處于調試模式，則在AppDelegate.m文件中，將jsCodeLocation更改為指向靜態包。

#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

#endif

This will now reference the main.bundle resource file. This file is created during the Bundle React Native code and images build Phase in Xcode. During this phase, react-native-xcode.sh script is run which bundles the JavaScript app code. This script can be found under the React-Native node module’s scripts folder.

現在，這將引用main.bundle資源文件。該文件是在Bundle React Native code and images期間創建的， Bundle React Native code and images在Xcode中構建階段。在此階段， react-native-xcode.sh 腳本運行捆綁了JavaScript應用代碼。該腳本可在React-Native節點模塊的scripts文件夾下找到。

從Xcode構建應用 (Building the app from Xcode)

Alternatively, the Xcode project can also be built within Xcode in Mac instead of using the React-Native CLI. Once done, the app can be launched on a simulator selected from the Xcode options or on a connected physical device.

另外，也可以在Mac的Xcode中構建Xcode項目，而不是使用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.

我希望這可以幫助您了解當我們運行一個簡單的react-native run-ios命令神奇地在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 :)

此處提供的部分信息來自React-Native 主頁。其余的是我窺探代碼的產物:)