乐趣区

React-Native-搭建开发环境踩坑

刚准备开始学 ReactNative,搭建开发环境就给我来了个下马威。不禁让我想起当时刚开始学 react 的时候,所有的包要么安装失败,要么安装好了起不来项目。最后甚至第一个react 项目怎么起来的我都记不清楚了。但万事开头难,尤其是需要各种环境配置的操作。本地一旦初始化第一回,今后就基本上不用太担心项目跑不起来的问题了。废话不多说,进入主题。。。

这篇也基本上就是自己各种搜索得到的操作方法,算是给自己今后需要重新配置时做一个参考。网上相关文章很多有的也很详细,部分我用到的也会列在文章里。

中文官方指南

首先可以先去看看中文官方指南,我的搭建过程也是根据这个来的。https://reactnative.cn/docs/getting-started/

大概看一下我最终使用到的工具、包的版本:

开发平台 目标平台 React React-native HomeBrew Node.js watchman cocoapods react-native-cli
macOS iOS 16.8.6 0.60.4 0.60.4 11.13.0 4.9.0 1.7.5 2.0.1

基础工具的坑

HomeBrew 安装缓慢

HomeBrew 在安装前总会进行一次自动更新,当网络差或者没有科学上网条件时,基本上就卡在了这一步。我的解决办法比较粗暴,直接禁止其自动更新——在命令行输入:

export HOMEBREW_NO_AUTO_UPDATE=true

pod install 缓慢

cocoapods 是一个开发 ios 应用的包管理工具,react-native 自动初始化项目时会安装一系列的 pods,这个过程通常也十分缓慢。我试过清华大学的镜像源,只是在 pod setup 这一步骤速度快了,当执行 pod install 的时候还是很慢。也试过把 github 上的对应需要的包直接下载,拷贝到对应文件夹,似乎也没有效果。最终,基本上就是死等(可能也是我家网太差了)。

推荐几个有可能解决这个问题的链接吧

  • https://www.jianshu.com/p/6a49ae31870f
  • https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/

启动项目的坑

终于把我们的必要依赖安装完成了,开始根据官方描述运行:

react-native run-ios

然后,欣然接受一个报错。。不过这时可以打开 xcode 来看看哪里出了问题。很大概率是你的端口号被占用了,这个时候需要修改端口号。

修改完之后,清空 build 文件夹

接着可以直接在 xcode 里启动,应该就不会出错了。

总结

  1. 实在遇上棘手的问题解决不了,可以选择下面的方式:

    • 删除项目,再 cli init 一个新的项目(反正你的项目是个 helloworld)
    • 删除 node_modules、pods 文件夹,重新npm install , pod install
退出移动版