按照React Native
官网的环境搭建过程,我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾,终于完美地将React Native
项目给启动了起来。以下是我通过mac(catalina 10.15.7)搭建React Native
环境的过程,m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题,可以通过评论留言,共同解决。
环境搭建分为两个部分,分别是ios环境搭建和android环境搭建,由于篇幅过长,所以分为了两个部分,以下是ios环境搭建过程。
sudo gem install cocoapods
我们下载并安装xcode后,还需要安装Command Line Tools
,安装方式如下:
xcode-select --install
启动 Xcode,并在Xcode | Preferences | Locations
菜单中的Command Line Tools
选择我们刚刚安装的Command Line Tools
。
接着,我们需要安装ios的模拟器(选择开发所需的ios版本即可),如下图所示:
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 update
brew install ruby
~/.zshrc
文件下加入export PATH="/usr/local/opt/ruby/bin:$PATH"
~/.bash_profile
文件,加入export PATH="/usr/local/opt/ruby/bin:$PATH"
,执行source ~/.bashrc
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
这个时候,依赖安装完毕。
在启动项目之前,请打开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环境给搭建成功。如果有的同学经过了上面的步骤,还遇到了其他问题导致环境搭建失败,可以通过评论留言,大家一起共同学习,通过从解决问题中共同进步。