下面介绍下我最近在安装RN环境过程踩得坑,mac系统版本macOS Ventura13.6.1,RN版本0.73.4,具体配置步骤如下。
Homebrew安装
Node和Npm
装nrm的时候显示etimeout 镜像源是国外镜像缘故
npx react-native inti 项目 时也是这样,npx是基于npm,本质还是npm国外镜像源
查看npm config get registry 以及切换镜像源安装即可
Watchman
watchman是由facebook开发的一个工具,只要文件有变化,它就会自动运行项目。
homebrew安装watchman
brew install watchman
安装完成后检查版本
watchman --version
Ruby
ruby安装,mac默认会安装一个版本ruby,可能和装的RN版本对应不上,需要通过rbenv对Ruby进行版本管理,就像使用nvm工具用于管理node版本一样。
系统自带版本是2.6.10版本,而RN0.73依赖版本是2.7.6,所以需要将ruby版本切换到2.7.6。
brew install rbenv ruby-build
安装完成后,运行init命令,运行完成后,它会提示你需要再.zshrc文件中执行rbenv init命令,因此需要根据提示,使用echo将init命令添加到终端,以保障终端启动时,rbenv会生效,相关命令如下:
$ rbenv init
# 每人的提示信息不一定相同,根据提示信息进行相关操作
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
命令执行完成后,重启Terminal,安装并切换到RN所依赖ruby版本。
$ rbenv install 2.7.6
$ rbenv global 2.7.6
rbenv切换版本无效时
$ env | grep PATH
也需查看对应的~/.bash_profile或 ~/.zshenv,使用如下命令
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
解决方案
stackoverflow.com/questions/1…
Gem和Bundler
切换Ruby包管理工具镜像源。
ruby有两种常用包管理工具,Gem和Bundler,这两种包管理工具镜像源都切换到国内。
切换Gem镜像源的方法是通过gem sources命令进行切换,命令如下:
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com
切换Bundler镜像源方法是通过设置config进行切换,命令如下:
$ bundle config mirror.https://rubygems.org https://gems.ruby-china.com
具体来说,它会在Bundler的全局配置中添加一个mirror.rubygems.org的参数,将其值设置为https://gems.ruby-… China的镜像源地址。
budle要是报下面这错,就执行bundle install命令即可。
Xcode安装
cocoapods
ios的包管理工具是cocoapods,使用gem来安装Cocoapods。
$ sudo gem install cocoapods
安装完成后,运行如下命令确定Cocoapods是否安装成功。
新建项目
第七步,是新建一个RN项目。
这里使用RN内置的命令行工具,来创建项目
npx react-native init RNDemo
在安装过程中由于是国外镜像源,可能会报错,解决方案是,切换到清华大学开源软件镜像站的镜像,切换方式如下:
$ cd ~/.cocoapods/repos
$ pod repo remove master
$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
执行完上述命令后,进入RNDemo/ios目录,找到Podfile文件,在文件第一行添加:
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
这时,再在RNDemo/ios目录下,运行Cocoapods安装命令即可。
bundle exec pod install
但是,,此时仍可能会报错,报错内容如下:
报错的内容是,无法访问地址github.com/lblasa/doub…
这是因为,即便配置了镜像,但镜像地址仍是github地址。执行pod install时,没有访问到github地址。
解决方案是,我们可以把所有github地址替换成gitee地址,主要有以下四步:
- 将 GitHub 仓库导入到 Gitee
- 将 GitHub 地址的相关配置,手动替换为 Gitee 地址
- 重新 pod install如遇报错
- 继续重复上述步骤
下面我们逐个步骤看一下。第一步,将 GitHub 仓库导入到 Gitee。首先,登录 Gitee。从右上角的 “+” 号中找到“从 GitHub/GitLab 导入仓库”的功能。填写对应的 GitHub 地址,然后点击导入。
接着,进入该仓库后,找到 “克隆 / 下载” 按钮,复制其 HTTPS 地址,示例如下:
https://gitee.com/jhwleo/double-conversion.git
然后,为了方便克隆该仓库地址,你还需要将其从私有仓库设置为开源仓库。你需要先点击进入管理标签页,填写介绍,选择开源,并勾选公开须知,然后点击保存。设置方法见下图:
第二步,将 GitHub 地址的相关配置,手动替换为 Gitee 地址,详细操作如下。
首先,使用 VSCode 编辑器,打开目录 ~/.cocoapods/repos/master,然后,点击 Search 一栏,将 GitHub 地址替换成 Gitee 地址。
Github地址:github.com/lblasa/double-conversion.git
Gitee地址:gitee.com/jhwleo/double-conversion.git
第三步,重新 pod install。
由于下载地址已经改成了 Gitee,再次运行 pod install 时,就不会遇到 double-conversion 库无法访问的报错了。
第四步是不断重复前面三步。
启动项目
npx react-native run-ios
这时候运行可能会有问题,
- 直接运行xocde工程文件
- npx react-native run-ios –simulator=”iPhone 15″ –mode Debug
命令运行后,会自动启动模拟器并加载项目。你可以看到如下界面:
至此,我们已经成功搭建了 React Native 的开发环境,并成功运行了一个 React Native 项目。
参考文档:
time.geekbang.org/column/arti…
原文链接:https://juejin.cn/post/7334644120352505865 作者:Sky重名了104948