前言
早在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 时候出错,可以关闭终端和模拟器,再试下可能就成功了。
- 很多依赖包体积都很大,所以一定要确保网速够快,不然会急死的。
- 外网一定要能访问,且速度不能太慢,不然终端就是一片红。
结语
折腾了那么长时间总算是把环境搞定了,真的是心累,如果后面发现了什么便捷的配置方式再更新文章吧。
以上,感谢阅读!