react native之旅-1 环境搭建

无论哪种语言或技术,环境搭建是第一步,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

最后

致敬那些提供国内镜像的开发者及组织!!!

posted @ 2021-03-15 07:52  Khadron  阅读(85)  评论(0编辑  收藏  举报