# react-native-structure

**Repository Path**: tong_zhehui/react-native-structure

## Basic Information

- **Project Name**: react-native-structure
- **Description**: react-native构建步骤
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-20
- **Last Updated**: 2024-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-native-structure

#### 介绍
react-native构建步骤

### iOS
#### 1. 安装Homebrew

```
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
```
#### 2. 安装Watchman

```
brew install watchman
```
#### 3. 安装Ruby

Ruby 是一种常用编程语言。在 React Native iOS 应用的依赖管理中会使用到它。Mac 电脑上默认集成了 Ruby，但却和 React Native 所依赖的 Ruby 版本有些不一致。因此，你需要通过 rbenv 对 Ruby 进行版本管理，就像使用 NVM 工具用于管理 Node 的版本一样。

先安装rbenv

```
brew install rbenv ruby-build 
```
安装完成后，运行 init 命令。运行完成后，它会提示你需要在 .zshrc 文件中执行 rbenv init 命令，因此你需要根据提示，使用 echo 将 init 命令添加到 Terminal 启动前。以保障 Terminal 启动时，rbenv 会生效。相关命令如下：

```
$ rbenv init

# 每人的提示信息不一定相同，根据提示信息进行相关操作
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
```
![输入图片说明](imgs257578f9197b797d10dab413ba8b960f.webp)

命令执行完成后，重启 Terminal，安装并切换到 React Native 所依赖的 Ruby 版本。

```
$ rbenv install 2.7.6
$ rbenv global 2.7.6
```

切换完成 Ruby 版本后，再次重启 Terminal，再次运行 ruby --version 命令，确定 Ruby 版本是否切换成功。

#### 4. 安装Gem 和 Bundler

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

#### 5. 安装CocoaPods

在前面我们提到过，Ruby 有两种常用包管理工具，Gem 和 Bundler。CocoaPods 是另一种包管理工具，它虽然是用 Ruby 编写的，但不是 Ruby 的包管理工具，而是 iOS 的包管理工具。这里我们借助 Gem 来安装 CocoaPods。

```
$ sudo gem install cocoapods
```

安装完成换，切换 CocoaPods 的镜像源


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

#### 6. 安装react-native模版


```
npx react-native init AwesomeProject
```

但是，在 “Installing CocoaPods dependencies” 这一步会出现错误，错误截图如下所示：

![输入图片说明](imgsf06807d34abe2b69331c6d2ff2e18c39.webp)

进入 AwesomeProject/ios 目录，找到 Podfile 文件，在文件第一行添加：


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

这时，再在 AwesomeProject/ios 目录下，运行 CocoaPods 安装命令即可。


```
$ bundle exec pod install
```

但是，此时仍可能会遇到报错，报错内容如下：


![输入图片说明](imgsebe130179e04e224d921092ec5d2f552.webp)


这是因为，即便配置了镜像，但镜像提供的地址仍然是 GitHub 地址。执行 pod install 时，没有访问到 GitHub 地址。

解决方案是，我们可以把所有的 GitHub 地址替换成 Gitee 地址，主要有以下四步（该方案由群友柯察提供）：

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

第一步，将 GitHub 仓库导入到 Gitee。

首先，登录 Gitee。从右上角的 “+” 号中找到“从 GitHub/GitLab 导入仓库”的功能。填写对应的 GitHub 地址，然后点击导入。

![输入图片说明](imgs5e83449d09ce6dc01a05871703ee7171.webp)

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

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

![输入图片说明](imgsb60863fc512bd5735893ca5544e452cf.webp)

将 GitHub 地址的相关配置，手动替换为 Gitee 地址，详细操作如下。首先，使用 VSCode 编辑器，打开目录 ~/.cocoapods/repos/master。

![输入图片说明](imgsf8a2c580db544750ed07324e745040f6.webp)

用vscode命令在终端中打开~/.cocoapods/repos/master。如图：

![输入图片说明](imgsWX20230921-090622@2x.png)

![输入图片说明](imgsimage3.png)

然后，点击 Search 一栏，将 GitHub 地址替换成 Gitee 地址。


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

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

![输入图片说明](f984a2857a5272f2b5590f1dc9cc8700.webp)

第三步，重新 pod install。

但是，我们又遇到了其他库的网络错误。因此，第四步是不断重复前三步的，我们现在要做的就是将所有下载不了的 GitHub 地址都逐一替换成 Gitee 地址，完成 pod install 的步骤。当然，由于在上述方案中，你需要一个个手动地进行更改和重试。所以建议有条件的同学，还是通过保持网络畅通的方式进行下载更为方便。

下载中出现这个错误：

![输入图片说明](imgsimage2.png)

这个手动复制指定的链接下载下来

![输入图片说明](imgsimage.png)

```
https://repo1.maven.org/maven2/com/facebook/react/react-native-artifacts/0.72.4/react-native-artifacts-0.72.4-hermes-ios-debug.tar.gz
```

下载到自己指定文件夹中

然后在自己react-native项目进入ios文件夹，执行这段代码：


```
HERMES_ENGINE_TARBALL_PATH="/Users/tongzhehui/Downloads/react-native-artifacts-0.72.4-hermes-ios-debug.tar.gz" pod install --verbose
```

HERMES_ENGINE_TARBALL_PATH是告诉pod你的文件在哪里

### Android

#### 1. 安装 JAVA JDK

Android 依赖 Java 开发环境，这里我们搭建 Java 环境使用的工具是 Zulu。Zulu 是一款 Java 运行环境，它是基于 OpenJDK（一个 Java 编程语言的开源实现的源代码）构建的。Zulu 提供了 Intel 和 M1 Mac 的 JDK，这使得 JDK 的安装更为方便。由于 Zulu 是一个图形界面程序，需要手动安装，为了方便这里我们借助 Cask 一键安装。你需要先借助 Homebrew 安装 Cask 再安装 Zulu。命令如下：


```
brew tap homebrew/cask-versions
brew install --cask zulu11
```

由于国内网络问题，brew tap homebrew/cask-versions会报错。如图：

![输入图片说明](imgs%E4%B8%8B%E8%BD%BD%E9%94%99%E8%AF%AF.png)

该命令其实只是执行了这段指令：

```
git clone https://github.com/Homebrew/homebrew-cask-versions /opt/homebrew/Library/Taps/homebrew/homebrew-cask-versions
```

把这个换成下面这段指令执行：


```
git clone https://gitee.com/tong_zhehui/homebrew-cask-versions.git /opt/homebrew/Library/Taps/homebrew/homebrew-cask-versions
```

安装完成在执行：


```
brew install --cask zulu11
```