React Native环境配置

下面介绍下我最近在安装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

安装完成后检查版本

css 复制代码

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会生效,相关命令如下:

shell 复制代码

$ rbenv init

# 每人的提示信息不一定相同，根据提示信息进行相关操作
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc

命令执行完成后,重启Terminal，安装并切换到RN所依赖ruby版本。

ruby 复制代码

$ rbenv install 2.7.6
$ rbenv global 2.7.6

rbenv切换版本无效时

shell 复制代码

$ env | grep PATH

也需查看对应的~/.bash_profile或 ~/.zshenv,使用如下命令

bash 复制代码

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

解决方案

stackoverflow.com/questions/1...

Gem和Bundler

切换Ruby包管理工具镜像源。

ruby有两种常用包管理工具,Gem和Bundler,这两种包管理工具镜像源都切换到国内。

切换Gem镜像源的方法是通过gem sources命令进行切换,命令如下:

ruby 复制代码

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com

切换Bundler镜像源方法是通过设置config进行切换,命令如下:

shell 复制代码

$ 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。

ruby 复制代码

$ sudo gem install cocoapods

安装完成后,运行如下命令确定Cocoapods是否安装成功。

新建项目

第七步,是新建一个RN项目。

这里使用RN内置的命令行工具,来创建项目

csharp 复制代码

npx  react-native  init RNDemo

在安装过程中由于是国外镜像源，可能会报错,解决方案是,切换到清华大学开源软件镜像站的镜像,切换方式如下:

shell 复制代码

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

执行完上述命令后,进入RNDemo/ios目录,找到Podfile文件，在文件第一行添加:

bash 复制代码

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

这时,再在RNDemo/ios目录下,运行Cocoapods安装命令即可。

bash 复制代码

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 地址，示例如下：

vbnet 复制代码

https://gitee.com/jhwleo/double-conversion.git

然后，为了方便克隆该仓库地址，你还需要将其从私有仓库设置为开源仓库。你需要先点击进入管理标签页，填写介绍，选择开源，并勾选公开须知，然后点击保存。设置方法见下图：

第二步，将 GitHub 地址的相关配置，手动替换为 Gitee 地址，详细操作如下。

首先，使用 VSCode 编辑器，打开目录 ~/.cocoapods/repos/master,然后，点击 Search 一栏，将 GitHub 地址替换成 Gitee 地址。

arduino 复制代码

Github地址：github.com/lblasa/double-conversion.git

Gitee地址：gitee.com/jhwleo/double-conversion.git

第三步，重新 pod install。

由于下载地址已经改成了 Gitee，再次运行 pod install 时，就不会遇到 double-conversion 库无法访问的报错了。

第四步是不断重复前面三步。

启动项目

arduino 复制代码

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...