按照React Native官网的环境搭建过程,我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾,终于完美地将React Native项目给启动了起来。以下是我通过mac(catalina 10.15.7)搭建React Native环境的过程,m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题,可以通过评论留言,共同解决。
环境搭建分为两个部分,分别是ios环境搭建和android环境搭建,由于篇幅过长,所以分为了两个部分,以下是ios环境搭建过程。
1.安装cocoapods sudo gem install cocoapods 2.安装并配置xcode我们下载并安装xcode后,还需要安装Command Line Tools,安装方式如下:
xcode-select --install启动 Xcode,并在Xcode | Preferences | Locations菜单中的Command Line Tools选择我们刚刚安装的Command Line Tools。
接着,我们需要安装ios的模拟器(选择开发所需的ios版本即可),如下图所示:
3.新建项目 npx react-native init AwesomeProject在安装依赖的过程中,我们会遇到一下问题:
requires CocoaPods version `>= 1.10.0`, which is not satisfied by your current version这是由于上面步骤安装的CocoaPods版本过低,如果没有这个问题,请忽略。这个时候我们需要手动指定安装CocoaPods的1.10.1版本。安装方式如下:
进入项目的ios目录下,执行
sudo gem install -n /usr/local/bin cocoapods -v 1.10.1这个时候会安装不了Cocoapods的1.10.1版本,因为mac自带的ruby版本是2.6,不支持该版本的安装,我们需要先升级ruby的版本到最新。打开终端,并按照下面的步骤进行升级:
升级brew: brew update安装最新ruby: brew install ruby配置优先使用安装的ruby: ~/.zshrc文件下加入export PATH="/usr/local/opt/ruby/bin:$PATH"配置bash_profile: 进入~/.bash_profile文件,加入export PATH="/usr/local/opt/ruby/bin:$PATH",执行source ~/.bashrc查看版本:ruby --version 执行ruby --version后会输出ruby 3.0.3p157而不是ruby 2.6版本,说明升级成功。 接着,我们继续安装Cocoapods的1.10.1版本 sudo gem install -n /usr/local/bin cocoapods -v 1.10.1安装后,我们执行pod --version查看当前版本是不是1.10.1,输出1.10.1说明安装成功。 接下来我们继续安装由于CocoaPods版本过低而安装不成功的依赖。执行
pod install在安装的过程中可能会遇到以下问题,如果没有请忽略。
SSL_ERROR_SYSCALL in connection to github.com:443这个由于我们在git的配置中使用了代理导致的,我们需要按下Command+Shift+G,输入.gitconfig后找到.gitconfig文件,然后在文件中加入:
[url "https://hub.fastgit.org"] insteadOf = https://github.com然后继续执行安装依赖步骤:
pod install这个时候,依赖安装完毕。
4. 启动项目在启动项目之前,请打开xcode,并在xcode打开我们新建项目的ios目录,因为React Native需要xcode的ios环境。
在项目的根目录,运行:
yarn react-native run-ios如果出现了以下问题,说明8081端口被占用了
The following build commands failed: PhaseScriptExecution Start\ Packager /Users/a/Library/Developer/Xcode/DerivedData/txclass-bdsiynvjryltljgiukvudjgphhnl/Build/Intermediates.noindex/txclass.build/Debug-iphonesimulator/txclass.build/Script-FD10A7F022414F080027D42C.sh (1 failure)这个时候我们需要执行sudo lsof -i tcp:8081查看是哪个进程占用了8081端口,并使用sudo kill -9 占用端口的进程pid将该进程给关闭。 我们重新启动项目
yarn react-native run-ios这个时候控制台将会输出BUILD SUCCESSFUL,同时将会自动打开一个运行node的终端,xcode的ios模拟器自动打开,显示demo项目。我们在运行node的终端中输入R,终端正常反馈和xcode的ios模拟器正常刷新,说明项目启动成功。
经过前面的繁杂步骤,终于将React Native的ios环境给搭建成功。如果有的同学经过了上面的步骤,还遇到了其他问题导致环境搭建失败,可以通过评论留言,大家一起共同学习,通过从解决问题中共同进步。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #React #按照React #Native项目给启动了起来