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 主页。其余的是我窥探代码的产物:)