React Native - 环境搭建

199 阅读3分钟

基础信息

机型:MacBook Air M1 2020

操作系统:Ventura 13.5.1

环境搭建

安装依赖

RN官网:

官网:reactnative.dev/docs/next/e…

中文官网:www.reactnative.cn/docs/enviro…

其实官网上基本上说的很全了,我这里主要说下我踩的坑, 首先说下Node,这个应该没的说的,你可以多种安装方式,Node官网下载也好,brew命令下载也好,只要最后 node --version 能打印出版本号,说明安装成功了,

其次说下Watchman,这步跟着官网走就好了,用brew install watchman就好了,重点来了:这个watchman一定要安装,不然后面创建项目的时候会报错,

然后说下这个Xcode,我之前是12的系统,在appstore安装的时候提示我需要升级系统,我就升级了,这个其实你不想升级系统的话,就去下一个对应版本的安装包安装就行了。这里说下,中文网上的信息有点滞后,可以看我下面的截图

image.png

image.png

如果能出现上述两张截图,那么Xcode这一步也算完成了,

下面就该CocoaPods,这步有点复杂,我详细说下。1、还是跟着官网走,通过sudo gem install cocoapods 安装cocoapods,这里有个问题,反正我是报错了,错误是gem不存在,或者是指向的文件夹不正确。这里说下如何正确安装,gem是通过ruby自动安装的,macOs在系统中自带了ruby,可以通过ruby -v来看版本号,其实报错主要还是你初始化的框架跟你本级的ruby版本不符,所以这里就用brew install ruby安装了新的ruby,此时还需要做一步操作先查看用brew 安装的ruby在哪里,我的是在/opt/homebrew/Cellar/ruby/3.2.2_1/bin 进来可以看到刚才安装的ruby和自带的gem,然后把刚才的路径复制一份,到.zshrc这个文件里,并且加上一段代码export PATH="/opt/homebrew/Cellar/ruby/3.2.2_1/bin:$PATH" 意思就是让以后用zsh的时候默认ruby打开的就是刚才的那个地址,然后重启zsh,此时ruby -v 再来看时就是刚才我们安装的新版本了;还有一种方法是安装rvm 容果rvm来管理ruby版本,这方法我比较推荐,但是安装起来比较麻烦,我着急开发,所以就没用了,有懂的hxd可以在底下评论说下。然后就可以用sudo gem install cocoapods来安装了,安装后用pod --version 来查看是否安装成功,如果这里没有显示版本号,则用brew install cocoapods 反正别在一棵树上吊死。

以上操作完成后就算是准备工作做好了,下面开始创建项目。

创建新项目

还是跟着官网走,npx react-native@latest init AwesomeProject 这里注意官网中提到

image.png

这里需要配置一下代理,可以借鉴一下这篇文章:blog.csdn.net/weixin_4552… 然后继续往下走,上一步的依赖安装正确的情况下ruby gem是不会报错的,可能出现的情况是 ✖ Installing CocoaPods dependencies (this may take a few minutes)这一步会报错,不过没关系。我们进入已经创建好的AwesomeProject工程目录中进入,ios文件夹,敲击命令pod install 当安装到“boost”这个插件的时候可能会报错,我们需要设置github代理使用如下命令:

git config --global http.proxy socks5://127.0.0.1:1086 git config --global http.https://github.com.proxy socks5://127.0.0.1:1086 如取消代理可用 git config --global --unset http.proxy git config --global --unset http.https://github.com.proxy 然后等待安装,最后出现

[!] Please close any current Xcode sessions and use `AwesomeProject.xcworkspace` for this project from now on.
Pod installation complete! There are 28 dependencies from the Podfile and 26 total pods installed.

说明,恭喜你,成就已达成,项目框架完成了,这时候只需要跟着步骤走,点击xcworkspace即可预览模拟器中的画面了

image.png