React Native开发环境搭建

关注

原创最新推荐文章于 2026-06-07 16:41:11 发布 276 阅读 AI 写同款· GEO 优化 ›

React Native 开发环境搭建（全平台详解）在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS 的模拟器或真机上运行应用，以及 Expo CLI 和 React Native CLI 的详细对比。此外，我们还将总结常见错误及其解决方案，帮助你顺利完成环境搭建。本文的目标是让无论是初学者还是有经验的开发者都能轻松上手 React Native 开发。阅读详情

前言

本篇文章主要讲解React Native(简称RN)开发环境的搭建，学习这篇文章可能需要开发者要懂Android原生开发环境搭建、node环境搭建和mac基本使用。

系统：mac
React Native：0.58

Homebrew

Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，相当于linux下的apt-get、yum神器。Homebre可以在Mac上安装一些OS X没有的UNIX工具，Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。Homebrew官网：https://brew.sh/index_zh-cn.html 。

Homebrew的安装

通过以下命令来安装Homebrew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew的使用

安装软件：brew install 软件名，例：brew install wget
搜索软件：brew search 软件名，例：brew search wget
卸载软件：brew uninstall 软件名，例：brew uninstall wget
更新所有软件：brew update，通过 update 可以把包信息更新到最新，不过包更新是通过git命令，所以要先通过 brew install git 命令安装git。
更新具体软件：brew upgrade 软件名，例：brew upgrade git
显示已安装软件：brew list
查看软件信息：brew info／home 软件名，例：brew info git
查看那些已安装的程序需要更新： brew outdated
显示包依赖：brew reps

安装Node、watchman

我们使用mac上软件包管理工具安装Node和watchman。

brew install node
brew install watchman

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统，前端开发人员通过使用npm来管理依赖包。node版本需要在v8.3以上，安装完node后建议科学上网加速项目的搭建过程。

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

安装React Native命令行工具

通过安装react-native-cli命令行工具来生成React Native项目。

npm install -g react-native-cli

Java开发环境

由于Android开发依赖于Java开发环境，所以需要去下载JDK。React Native目前支持Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。所以建议去官网下载1.8版本的jdk。官网地址： https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 。

Android开发环境

由于我是一名Android开发人员，所以在这里简单介绍一下Android开发环境搭建过程，可能下载的开发工具需要翻墙。

Android studio

Android studio是Android官方的开发工具，Android studio下载可以去官网(https://developer.android.com/studio/?hl=zh-cn)下载Android studio，也可以去AndroidDevTools(https://www.androiddevtools.cn/)，里面有很多不需要翻墙就可以下载的工具。如果你是一名新手，注意安装Android studio的时候，安装界面选择"custom"选项，选择安装一下模块。

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

然后，点击Next即可安装所选择的模块。安装完成后即可看到欢迎页面。

官方教程：https://developer.android.com/studio/install?hl=zh-cn

Android SDK

Android Studio默认会安装最新版本的Android SDK。你可以在Android Studio的SDKManager中选择安装各版本的SDK。

由于目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK，所以在SDK Manager中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面 Android SDK Platform 28 组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）。

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

然后点击"Apply"来下载和安装这些组件。

配置Android SDK环境变量

React Native需要通过环境变量来了解你的Android SDK装在什么路径，从而正常进行编译。
Mac上配置环境变量时经常要创建、编辑 .bash_profile文件，所以我们需要在.bash_profile中添加Android SDK的环境变量配置。

首先，在命令行中输入命令编辑.bash_profile，vim和vi都是文本编辑器，不了解的可以去http://www.runoob.com/linux/linux-vim.html 学习一下vim或者vi的使用。

vim/vi  ~/.bash_profile

然后，点击i进行编辑，添加以下配置。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Android Studio官方下载的SDK会放在$HOME/Library/Android/sdk下，如果是自定义下载的Android SDK，则需要更改ANDROID_HOME的值。

然后使用命令来使环境变量设置立即生效。