【react-native】关于ios与android的环境搭建

问题

前段时间由于升级了系统，导致了react-native的一些依赖缺失。根据react-native中文文档配置了好久，引申出了很多奇怪的问题。经过查看，发现中文文档是有缺失的。比如一些版本升级后导致的问题并没有在中文文档中写清楚，建议去react-native官方文档查看。

ios环境搭建

根据文档提示安装Node & Watchman：

brew install node
brew install watchman
1
2

由于React Native 使用 .ruby-version 文件来确保你的 Ruby 版本与需要的一致。目前，macOS 12.5.1 附带 Ruby 2.6.8，这不是 React Native 所需的。我们的建议是安装 Ruby 版本管理器并在您的系统中安装正确版本的 Ruby。

一些常见的 Ruby 版本管理器是：

• rbenv
• RVM
• chruby
• asdf-vm with the asdf-ruby plugin

因为最新的react-native 需要ruby版本为2.7.5，而我系统自带的ruby 版本是2.6.8，所以会导致运行时报错。

大家可根据自己的喜好选择合适的管理器，这里我选择rvm来管理ruby的版本

rvm安装教程请看这里: http://t.csdn.cn/J8iuq

Xcode

安装 Xcode 的最简单方法是通过 Mac App Store。安装 Xcode 还将安装 iOS 模拟器和所有必要的工具来构建你的 iOS 应用程序。

如果您已经在系统上安装了 Xcode，请确保它是 10 或更高版本。

Command Line Tools

您还需要安装 Xcode 命令行工具。打开 Xcode，然后从 Xcode 菜单中选择“Preferences…”。转到“位置”面板并通过在“命令行工具”下拉列表中选择最新

在 Xcode 中安装 iOS 模拟器

要安装模拟器，请打开 Xcode > Preferences… 并选择 Components 选项卡。选择具有您希望使用的相应 iOS 版本的模拟器。

CocoaPods

CocoaPods 是适用于 iOS 的依赖管理系统之一。它是用 Ruby 构建的，您可以使用您在前面的步骤中配置的 Ruby 版本来安装它。

Mac M1 用户注意事项：
Mac M1 架构与 Cocoapods 不直接兼容。如果在安装 pod 时遇到问题，可以通过运行以下命令解决：

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
1
2

如果您之前安装了全局 react-native-cli 包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli
1

你可以使用 React Native 的内置命令行界面来生成一个新项目。让我们创建一个名为“AwesomeProject”的新 React Native 项目：

npx react-native init AwesomeProject
1

android环境搭建

安装依赖

必须安装的依赖有：Node、JDK 和 Android Studio。

Node & Watchman
brew install node
brew install watchman
1
2
3

如果你已经安装了 Node，请检查其版本是否在 v14 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。

Java Development Kit

我们推荐使用Homebrew来安装由 Azul 提供的 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持。在 M1 芯片架构的 Mac 上相比其他 JDK 在编译时有明显的性能优势。

brew tap homebrew/cask-versions
brew install --cask zulu11
1
2

React Native 需要 Java Development Kit [JDK] 11。你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。

Android 开发环境

以下是复刻了官网的，具体也可以查看官网

1. 安装 Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：

• Android SDK
• Android SDK Platform
• Android Virtual Device

然后点击"Next"来安装选中的组件。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 12 (S)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 12 (S)选项，确保勾选了下面这些组件（重申你必须使用稳定的代理软件，否则可能都看不到这个界面）：

• Android SDK Platform 31
• Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的31.0.0版本。你可以同时安装多个其他版本。

点击"Apply"来下载和安装选中的这些组件。

3. 配置 ANDROID_SDK_ROOT 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile（可以使用echo $0命令查看你所使用的 shell。）：

如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
1
2
3
4
5

译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder
中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.zshrc命令创建或编辑。如不熟悉 vi 操作，请点击这里学习。

使用source $HOME/.zshrc命令来使环境变量设置立即生效（否则重启后才生效）。可以使用echo $ANDROID_SDK_ROOT检查此变量是否已正确设置。

请确保你正确指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK