一篇文章教会你如何在IOS真机上完美运行React Native

news2024/9/22 15:25:10

项目初始化

在终端使用**npx react-native init ProjectName**初始化React Native项目。

进入项目目录后，如果项目是第一次首次运行，你需要先进入项目的iOS目录，在终端输入**open ProjectName.xcworkspace，这个命令将会使用Xcode打开项目。**

npx react-native init ProjectName
cd ProjectName
cd ios
open ProjectName.xcworkspace

在这里插入图片描述

使用Xcode打开项目后，如图所示，你需要按照如下步骤来进行项目的配置：

接着你点击Xcode左上角的运行按钮或者回到React Native项目根目录下运行yarn start应该就可以正常运行项目啦！

在这里插入图片描述

享受你的编程吧！

在这里插入图片描述

在Xcode中添加Team非常重要，因为这关系到能否在真机上运行您的React Native应用。以下是添加Team的步骤：

打开Xcode，在顶部菜单栏选择**Xcode** -> Preferences（或者直接按下**Command** + **,**快捷键）。
在弹出的偏好设置窗口中，点击**Accounts**标签。
点击左下角的**+**号按钮来添加一个新的Apple ID。
在弹出的对话框中，选择**Apple ID，然后点击Continue**。
输入您的Apple ID和密码，然后点击**Next**。如果您开启了两因素验证，还需要输入验证代码。
登录成功后，您的Apple ID会显示在左侧的账户列表中。确保您已经注册了Apple开发者计划，否则您将无法在真机上运行应用。
关闭**Preferences**窗口，返回到您的项目。
在项目导航器中，选择您的项目（通常位于导航器窗口的最顶部）。
在主窗口中，选择**TARGETS**，然后选择您的项目。
在**Signing & Capabilities标签中，找到Team**下拉菜单。如果您已经添加了Apple ID并且是Apple开发者计划的成员，您应该能够在下拉菜单中看到与您的Apple ID关联的Team。
选择相应的Team。如果一切设置正确，Xcode将自动为您创建并管理开发证书、供应文件等。

完成以上步骤后，您就可以继续在真机上调试和运行您的React Native应用了。记得在您第一次尝试运行应用在您的iOS设备上时，可能需要在设备上信任开发者证书。

在这里插入图片描述

如果你遇到如图所示的问题，那你就是没有打开开发者模式也没有信任开发者证书。

在设备上打开开发者模式步骤如下：

在iOS设备上打开开发者模式通常涉及以下步骤：

更新iOS版本：首先确保您的iPhone或iPad更新到了最新的iOS版本。
打开设置应用：在您的iOS设备上找到并打开“设置”应用。
进入“隐私”：在设置菜单中，滚动找到并点击“隐私”。
启用开发者模式（iOS 14及以上版本）：
- 滚动到页面底部，找到“开发者模式”。
- 点击“开发者模式”，然后按照屏幕上的指示开启开发者模式。这可能需要您重启设备。

如果您没有看到“开发者模式”的选项，请尝试以下步骤：

连接到Mac并使用Xcode：将您的iOS设备通过USB线连接到安装了Xcode的Mac。在Mac上启动Xcode，然后在Xcode中选择Window > Devices and Simulators。在出现的设备列表中，选择您的设备。Xcode会与设备通信并可能提示您是否允许设备与Xcode配对。接受后，设备应该就会进入开发者模式。
信任计算机：连接设备到Mac后，如果设备屏幕上弹出“信任此电脑”的提示，请选择“信任”，并输入您的设备解锁密码。

一旦开发者模式被启用，您就可以安装测试应用、进行调试等开发者操作了。如果在启用开发者模式的过程中遇到困难，您可能需要查看苹果官方文档或者更新您的Xcode到最新版本。在一些iOS版本中，只有当您的设备与Xcode配对并且Xcode识别您的设备为开发设备后，"开发者模式"选项才会出现在设置中。

信任开发者证书的步骤如下：