如何通过React Native启动iOS应用程序

图片

这是化名Soujanya PS的原始博客文章的翻译。 她是该领域的专业人士,不仅喜欢开发应用程序和服务,还喜欢撰写有关它的文章。 这是她对使用React Native框架启动iOS应用程序的评论。

不久前,我开始将React Native用于iOS应用程序。 这是我第一次深入研究本机应用程序开发环境。 我注意到我对整个过程的简易性以及React Native命令行界面提供的抽象级别感到惊讶。 实际上,这是促使我撰写此框架的因素之一。 我想与刚开始与他一起工作的人分享自己的经验。

Skillbox建议: “ Mobile Developer PRO”
我们提醒您: 对于所有“哈勃”读者来说,使用“哈勃”促销代码注册任何Skillbox课程时均可享受10,000卢布的折扣。

React Native提供了用于在模拟器和设备上运行iOS和Android应用程序的命令行工具。 让我们尝试了解如何以及如何为iOS部署React Native应用程序。

实际启动


React Native提供了一个出色的实用程序,称为init。 它提供了一个应用程序模板,同时在此应用程序的iOS文件夹中创建相关的Xcode项目文件。

通过在应用程序的根文件夹中输入以下命令,可以在iOS模拟器的环境中以及在手机/平板电脑上启动它:

反应本机运行iOS

成功执行命令的同时,还会在模拟器或设备上启动应用程序。 我们告诉您为此需要做什么。

Run-ios命令


React Native为开发人员提供了几个命令行实用程序来与应用程序进行交互。 它们位于React Native模块节点的local-cli文件夹中。 Run-ios是运行runIOS.js文件中定义的runIOS()函数的实用程序之一。

Run-ios允许您使用以下选项:
#在特定的模拟器上启动应用
react-native run-ios-模拟器“ iPhone 5”

#传递iOS目录的非标准位置
react-native run-ios --project-path“ ./app/ios”

#在已连接的设备(例如Max的iPhone)上运行
react-native run-ios-设备“ Max's iPhone”

#在发布模式下构建应用
react-native run-ios-配置发布

设备/仿真器选择


如果未指定设备,则run-ios将在默认仿真器中启动应用程序的调试模式。 这要归功于一系列xcrun / simctl命令。 首先,检查可用模拟器的列表,选择其中一个并将其加载到其环境中。

如果要在物理设备上运行该应用程序,只需将其连接到笔记本电脑并通过run-ios设置详细信息。

下一步是创建Xcode应用程序项目。

申请代码


通常,React Native Xcode应用程序项目位于根目录下的iOS文件夹中。 使用xcodebuild命令创建一个Xcode项目。 先前为run-ios设置的所有参数都将传递给此命令。

创建项目后,将在模拟器或连接的设备上安装并启动该应用程序。

在调试模式下添加应用程序代码


在整个开发过程中,React Native会动态加载您的代码。 为了使一切顺利进行并根据需要提供代码,您将需要一台服务器。

在调试Xcode项目时,Metro服务器与之并行启动。 使用React Native命令行界面创建的应用程序使用它。 所有这些使您可以使用“热”重新启动和其他方法来加速和简化过程。

默认情况下,Metro侦听端口8081。 在模拟器中启动应用程序后,就会将请求发送到服务器。

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

服务器加载所有必要的依赖项,收集JavaScript代码并将其发送给应用程序。 完成此步骤后,您可以在仿真器或连接的设备上查看正在运行的应用程序。

JavaScript套件


在发布模式下,必须首先打包JavaScript,然后将其放入应用程序中。 为此,需要进行一些更改才能提供下载静态程序包的功能。 您需要在AppDelegate.m文件中更改jsCodeLocation,以指示静态包在调试模式之外的位置:

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

现在,这表明在处理Xcode项目期间出现了main.bundle资源文件,在此阶段,运行react-native-xcode.sh脚本。 可以在React Native模块的脚本文件夹中找到它。

从Xcode创建应用程序


您也可以直接在Mac上创建Xcode项目,而不是使用React Native CLI。 创建应用程序后,还可以在Xcode选项中选择的仿真器上或在物理设备上运行它。



我希望该材料可以帮助您了解执行react-native run-ios命令时启动的过程,这会产生魔力并允许您在iOS环境中运行应用程序。

Skillbox建议:

Source: https://habr.com/ru/post/zh-CN426893/


All Articles