React Native 在 Mac Catalina 上的安装配置

2,485 阅读2分钟

前言

早在2017年,第一次尝试使用RN的时候,配置开发环境搞了一天的时间,导致我对RN的第一印象不是很好,搞定 Hello World 后就跑路了。现在时隔三年,决定再次学习下 RN,这次好了很多,配置开发环境用了两天的时间。。。

整体给我的感觉就是,当你决定学习它的时候,最好是把 RN 配置相关的环境都升到最新,这样问题还能少些。

环境说明

  • Mac: Catalina 10.15.5
  • React Native: 0.62.2
  • Xcode: 11.5
  • Android Studio: 4.0
  • Node: 12.9.1
  • Java: 14.0.1
  • cocoapods: 1.9.1

以上这些基本都是目前的最新版(Node不是),如果有一个版本和上面的不一致,都有可能导致 RN 跑不起来。比如说以当前的环境跑 RN 0.4x.x 或者是 0.5x.x,都是跑不起来的。

软件安装

# 在设置nrm前,请确保复制一份.npmrc 文件,以免造成配置丢失
npx nrm use taobao # 使用淘宝源,npx nrm use npm # 使用npm的默认源

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" # 安装homebrew

brew install watchman flow homebrew/cask/java cocoapods # 必须安装的软件

npm install -g yarn # 建议安装 yarn

打开 Xcode 》 Preferences 》 Locations,确保安装了 Command Line Tools

使用 brew cask info java命令可查看java sdk相关的信息

运行到 Iphone 配置

初始化一个RN项目

npx react-native init MyApp --version 0.62.2

初始化完成后,如果执行 npx react-native run-ios会提示让进入到 ios 目录执行 pod install命令安装依赖,为了能正常安装这些依赖,需要把镜像源换成国内的,方法如下:

$ cd ~/.cocoapods/repos 
$ pod repo remove master
$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

# 最后进入自己的工程,在自己工程的podFile第一行加上
$ source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

参考:mirror.tuna.tsinghua.edu.cn/help/CocoaP…

然后执行 pod install就可以了,如果安装失败,可以删除再试一次(请确保外网是能正常访问的)

最后在项目目录下执行npx react-native run-ios,看到iphone模拟器启动就表示成功了。第一次启动用时较长,5分钟左右,默认是iphone 11。

运行到 Android 配置

运行到 Andriod 模拟器前,需要确定下面的依赖已经安装:

查看方式是:启动 Andriod Studio 》点击右下角 configure》选择 SDK Manager。

SDK确定安装后,需要安装一个模拟器:

安装方式是:启动 Andriod Studio 》点击右下角 configure》选择 AVD Manager。

由于包比较大,安装比较耗时间。以上都安装完成后,在项目目录下执行 npx react-native run-android,惊喜来啦,出现了新的错误。。。

莫名其妙的错误,解决方法点击这里,简而言之就是下面两步:

# 打开目录下这个文件
/android/gradle/wrapper/gradle-wrapper.properties

# 把gradle-6.0.1-all.zip修改为 gradle-6.3-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

然后就能run起来了

注意事项

  • 如果在 run-ios 时候出错,可以关闭终端和模拟器,再试下可能就成功了。
  • 很多依赖包体积都很大,所以一定要确保网速够快,不然会急死的。
  • 外网一定要能访问,且速度不能太慢,不然终端就是一片红。

结语

折腾了那么长时间总算是把环境搞定了,真的是心累,如果后面发现了什么便捷的配置方式再更新文章吧。

以上,感谢阅读!