macOS 使用 react native 搭建 android 和 ios 环境

Estelle同学63427
1,033 阅读6分钟

注意：当前安装的react native 版本为0.76.1,仅供参考。

安装brew 的参考文档：homebrew

1. Node & Watchman

使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的镜像源）：

brew install node@18
brew install watchman

如果不使用brew，也可以使用nvm下载node，方便进行管理。 下载Node: nodejs.org/en ；安装node详情可参考：安装nvm和管理node版本 。 注意：安装node版本应在 18 以上，参考当前安装的node版本为18.19.1 。

设置淘宝镜像

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

安装yarn

npm install -g yarn

2. 安装JDK

  1. 使用安装包进行安装

下载JDK的链接：官网下载地址 和 百度网盘 下载JDK ，网盘中当前下载的JDK分别为17，11，8版本的

  1. 使用brew进行安装

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

brew install --cask zulu@17

# Get path to where cask was installed to double-click installer
brew info --cask zulu@17

安装 JDK 后，请更新 JAVA_HOME 环境变量。如果你是按照上述步骤操作，JDK 很可能位于 /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

  1. 查看安装版本

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

javac -version

低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本

3. Android 开发环境

（1）下载和安装 android studio

官网下载地址：Download and install Android Studio ， 百度网盘下载地址：Download Android Studio 下载安装的流程如下：

  1. 打开您下载并保存了 Android Studio 安装文件的文件夹。
  2. 双击下载的文件。系统会显示以下对话框：

48e880ca6b15ce12.png 3. 将 Android Studio 图标拖到 Applications 文件夹中。

  1. 在 Applications 文件夹中，双击 Android Studio 图标，以启动 Android Studio 设置向导。
  2. 如果您看到有关安装或运行从互联网下载的文件的警告，请选择接受安装。
  3. 按照 Android Studio 设置向导进行操作，接受所有步骤的默认设置。
  4. 安装完成后，Android Studio 会自动启动。
  5. 首次进入，选项目择类型

image.png

（2）android SDK配置

配置需要的tools image.png image.png

如果打开的新设备，点击 more Actions => SDK manager 或者 如果是已经创建过项目了，点击设置图标 => SDK manager 或 setting 进入设置模块

如下图所示，根据所需的下载：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

image.png image.png

(3)创建Android Virtual Device的流程：

如需打开新的设备管理器 在欢迎屏幕上，依次选择 More Actions > Virtual Device Manager 如果是已经打开项目，即可如下图所示操作，点击 ➕ ，然后点击 Create Virtual Device image.png 选择虚拟设备硬件配置信息，点 next 进行下一步 image.png 下载可用的API level , 选中一个 image.png 下载可用的System Image ，选中一个，点击下一步 image.png 设置虚拟设备的基本信息，点击finished image.png

(4) 配置 ANDROID_HOME 环境变量

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

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

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

请确保你正确指定了 Android SDK 路径。你可以在 Android Studio 的"Settings"菜单中查看 SDK 的真实路径，具体是Languages & Frameworks → Android SDK → Android SDK Location。如果和环境变量中的不一致，则需要更换环境变量中的路径地址。 image.png

4. IOS开放环境

（1）CocoaPods

CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。

当然安装可能也不顺利，请使用代理软件。

sudo gem install cocoapods

或者可以使用 brew 来安装

brew install cocoapods

常用命令

pod --version    // 查看版本
pod init         // 初始化 Podfile 文件
vim Podfile      // 编辑 Podfile 文件
pod install      // 安装依赖
pod repo update  // 更新 cocoapods 列表

(2)Xcode

React Native 目前需要Xcode 14.1 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具​

启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

Xcode Command Line Tools

在 Xcode 中安装 iOS 模拟器​

安装模拟器只需打开 Xcode > Preferences...  菜单，然后选择 Components 选项，即可看到各种可供安装的不同的 iOS 版本的模拟器。

5. 创建新项目

1. 优先推荐使用expo创建rn项目

参考expo文档

npx create-expo-app@latest // 安装且下载expo rn template

image.png 2. 使用rn的工具创建rn项目 如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

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

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）

npx react-native@0.76.1 init AwesomeProject   // 创建react native js项目 ----该方法将被遗弃
npx react-native init MyNewApp --template react-native-template-typescript  // 创建react native ts项目

npx react-native init MyApp --template react-native-template-typescript@6.12.10 // 指定某个版本的模版下载


npx @react-native-community/cli init TestApp --version 0.76.1 // 推荐使用该方法

参数解析：

  • init: 后面跟的是要生成的项目名称
  • --template: 表示要下载的模板，后面跟的参数可以是github地址，也可以是本地路径的地址。这里使用的是内置的参数，表示要下载的是react-native官方的ts模板
  • --skip-install: 表示下载完模板后不进行node_modules依赖和pod依赖的安装

注意：

  1. 不要使用template作为项目名称，不然后面使用该模板生成项目的时候会报错（在修改ios文件夹和文件加名称时会报错），这应该是脚手架的一个bug。
  2. 注意加上--skip-install参数，模板项目不需要带依赖，否则在生成的时候会因为文件过多报错

6. 编译于运行react native 应用

在你的项目目录中运行yarn ios或者yarn react-native run-ios：

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

参考资料

android studio 安装流程 juejin.cn/post/730821… react-native-en

avatar
文章
阅读
粉丝