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 以及切换镜像源安装即可

React Native环境配置

Watchman

watchman是由facebook开发的一个工具,只要文件有变化,它就会自动运行项目。

homebrew安装watchman

brew install  watchman

安装完成后检查版本

watchman  --version

React Native环境配置

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…

React Native环境配置

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命令即可。

React Native环境配置

Xcode安装

cocoapods

ios的包管理工具是cocoapods,使用gem来安装Cocoapods。

$ sudo gem install cocoapods

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

React Native环境配置

新建项目

第七步,是新建一个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

但是,,此时仍可能会报错,报错内容如下:

React Native环境配置

报错的内容是,无法访问地址github.com/lblasa/doub…

这是因为,即便配置了镜像,但镜像地址仍是github地址。执行pod install时,没有访问到github地址。

解决方案是,我们可以把所有github地址替换成gitee地址,主要有以下四步:

  • 将 GitHub 仓库导入到 Gitee
  • 将 GitHub 地址的相关配置,手动替换为 Gitee 地址
  • 重新 pod install如遇报错
  • 继续重复上述步骤

下面我们逐个步骤看一下。第一步,将 GitHub 仓库导入到 Gitee。首先,登录 Gitee。从右上角的 “+” 号中找到“从 GitHub/GitLab 导入仓库”的功能。填写对应的 GitHub 地址,然后点击导入。

React Native环境配置

接着,进入该仓库后,找到 “克隆 / 下载” 按钮,复制其 HTTPS 地址,示例如下:

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

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

React Native环境配置

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

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

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

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

React Native环境配置

第三步,重新 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 的开发环境,并成功运行了一个 React Native 项目。

参考文档:

time.geekbang.org/column/arti…

原文链接:https://juejin.cn/post/7334644120352505865 作者:Sky重名了104948

(0)
上一篇 2024年2月15日 上午11:07
下一篇 2024年2月15日 下午4:01

相关推荐

发表回复

登录后才能评论