无论哪种语言或技术,环境搭建是第一步,react native
也是如此。由于众所周知的原因,造成react natvie
环境搭建“异常艰难”o(╥﹏╥)o
在趟了“无数”坑后,我总结成这篇博客,一来有个记录,二来留给他人参考少走弯路,以下内容都是我摸索出来的经验,无需FQ100%可用!
react natvie 版本
0.62
安装依赖
node & watchman & yarn
-
node不必多说,前端必备
-
Watchman是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。
-
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载
brew install node
brew install watchman
npm install -g yarn
Xcode
Xcode 10 <= version
启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具,比如git等。
Cocoapods
CocoaPods
是用 Ruby 编写的包管理器。所以首先看一下你电脑上是否安装了Ruby
ruby -v
一般MacOS都自带Ruby,但目前Cocapods最新版本似乎不能在 ruby2.6 版本以下安装,意味着如果你使用的 macOS 版本低于 10.15 (Catalina) 则无法直接安装。可以尝试安装较旧一些的版本。如sudo gem install cocoapods -v 1.8.4。
可以使用下面命令来升级Ruby
gem update --system
切换Ruby镜像源
gem sources -l # 查看镜像源
gem sources --remove https://rubygems.org/ # 移除当前镜像源
gem sources -a https://gems.ruby-china.com/ # 添加国内镜像源
安装Cocoapods
sudo gem install cocoapods # Mac OS X 10.11前
sudo gem install -n /usr/local/bin cocoapods # Mac OS X 10.11后
更新Cocoapods/Specs
cd ~/.cocoapods/repos
pod repo remove master
git clone https://gitee.com/mirrors/CocoaPods-Specs.git ~/.cocoapods/repos/ # 码云镜像源
完全卸载Cocoapods
sudo gem uninstall -n /usr/local/bin cocoapods cocoapods-core cocoapods-deintegrate cocoapods-downloader cocoapods-plugins cocoapods-search cocoapods-stats cocoapods-trunk cocoapods-try
创建新项目
如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。
现在初始化项目工具不需要安装react-native-cli
,直接使用 npx
命令(避免全局安装模块)
npx react-native init AwesomeProject # AwesomeProject为你定义的项目名称
注意事项:
如果你身处国内并执行上面的命令,那么会卡在 Installing CocoaPods dependencies
这一步,原因是国内访问Cocoapods/Specs特别慢,造成超时。
Cocoapods新版本中即使你配置了国内镜像也没有效果,原因是你还差一步:进入自己的工程,在自己工程的podFile第一行加上:
source 'https://gitee.com/mirrors/CocoaPods-Specs.git'
然后执行进入命令行
cd ./AwesomeProject/ios
pod install
就“万事大吉”了
编译并运行 React Native 应用
cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios
最后
致敬那些提供国内镜像的开发者及组织!!!