React-Native学习01《环境搭建及遇到的问题》

186 阅读2分钟

一、环境安装

1.需要安装nodejs(version>=18)

2.安装watchman(监视文件系统变更的工具,用于实时刷新)

brew install watchman

3.安装Xcode(商店或者官网下载即可)

4.安装cocoapods(从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖)

brew install cocoapods

二、创建项目

直接使用npx,注意名字只支持字母和数字,不支持下划线

npx @react-native-community/cli init [name] --version X.XX.X  

// 我创建的项目
npx @react-native-community/cli init rnStudy

image.png 出现这个页面就安装成功了,然后运行编译命令 yarn ios 或者yarn react-native run-ios

完成之后目录build会生成对应的打包文件

image.png

三、编辑器运行项目并预览(模拟器)

1.打开Xcode,选择对应的目录

image.png

2.配置代码签名,填好 appleID 的账户密码,测试的话,用自己的 appleID 的账户就行,bundle identifier的值是唯一的,自己设置一个就可以了。

image.png

3.启动模拟器,在Xcode内置了好多机型,也可以自己添加,选择自己喜欢的就好,我这里选的是iphone15

image.png image.png

4.选完之后点击运行即可

image.png

5.遇到如图所示问题解决:重新运行 “brew install cocoapods”命令即可。

image.png

6.遇到如图所示问题解决

最好在做之前先把ios/build文件夹先删除, 重新编译即可。

7.遇到 Logging Error: Failed to initialize logging system. Log messages may be missing 需要增加环境变量。

image.png

image.png

ps:遇到问题解决办法,清除缓冲,删除build重新编译~,清除缓冲操作步骤

电脑端:关于本机 > 更多信息 > 通用 > 存储空间 > 开发者 > 删除数据和索引即可。

image.png

image.png

8.成功页面

image.png

四、真机运行

1.usb连接到手机

2.第三步已经完成签名配置,如未完成见步骤 三-2;

3.选择真机设备

image.png

4.手机打开开发者模式

手机设置 > 隐私与安全性 > 开发者模式(一般在最下面)> 打开 (会自动重启手机)

5.输入钥匙串密码:

输入电脑的密码,点击始终允许即可。

6.苹果不受信任的开发者设置

手机设置 > 通用 > VPN与设备管理 > 信任xxxx > 允许

7.成功界面:

image.png