React Native 开发环境搭建：从零开始

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 引言
- 安装依赖
- - [Node.js 和 npm](#Node.js 和 npm)
  - JDK (仅限 Android)
  - [Android Studio 和 Xcode (仅限 iOS)](#Android Studio 和 Xcode (仅限 iOS))
- [安装 React Native CLI](#安装 React Native CLI)
- [创建新的 React Native 项目](#创建新的 React Native 项目)
- 运行项目
- - [在 Android 设备或模拟器上运行](#在 Android 设备或模拟器上运行)
  - [在 iOS 设备或模拟器上运行](#在 iOS 设备或模拟器上运行)
- [使用 Expo (可选)](#使用 Expo (可选))
- - [安装 Expo CLI](#安装 Expo CLI)
  - [创建新的 Expo 项目](#创建新的 Expo 项目)
  - [运行 Expo 项目](#运行 Expo 项目)
- 结论

引言

React Native 允许开发者使用 JavaScript 和 React 来构建跨平台的移动应用。为了开始 React Native 开发，你需要设置一个合适的开发环境。以下是搭建 React Native 开发环境的步骤。

安装依赖

Node.js 和 npm

React Native 需要 Node.js 环境，你可以通过以下命令检查是否已安装：

bash 复制代码

node -v
npm -v

如果没有安装，请访问 Node.js 官网下载并安装。

JDK (仅限 Android)

对于 Android 开发，你还需要安装 Java Development Kit (JDK)。你可以从 Oracle 官网下载并安装最新版本的 JDK。

Android Studio 和 Xcode (仅限 iOS)

Android Studio ：下载并安装 Android Studio，并确保安装了 Android SDK 和模拟器。
Xcode ：如果你在 macOS 上开发 iOS 应用，你需要安装 Xcode。

安装 React Native CLI

使用 npm 安装 React Native 命令行工具：

bash 复制代码

npm install -g react-native-cli

创建新的 React Native 项目

使用 React Native CLI 创建一个新的项目：

bash 复制代码

npx react-native init MyProject

这将创建一个名为 MyProject 的新项目。

运行项目

在 Android 设备或模拟器上运行

确保你的 Android 设备已连接或 Android 模拟器已启动，然后运行：

bash 复制代码

cd MyProject
npx react-native run-android

在 iOS 设备或模拟器上运行

确保你的 Mac 已连接 iOS 设备或启动了 iOS 模拟器，然后运行：

bash 复制代码

cd MyProject
npx react-native run-ios

使用 Expo (可选)

Expo 是一个工具链，它提供了许多有用的功能，如快速开发、内置开发工具和无需配置即可发布应用的能力。如果你是初学者，可以考虑使用 Expo 来简化开发流程。

安装 Expo CLI

bash 复制代码

npm install -g expo-cli

创建新的 Expo 项目

bash 复制代码

expo init MyExpoProject

运行 Expo 项目

bash 复制代码

cd MyExpoProject
expo start

这将启动开发服务器，并提供一个 QR 码，你可以使用 Expo Go 应用在手机上预览你的应用。

结论

搭建 React Native 开发环境涉及安装一些必要的软件和工具。一旦设置完成，你就可以开始构建跨平台的移动应用了。如果你是初学者，可以考虑使用 Expo 来简化开发过程。随着你对 React Native 的熟悉，你可能会想要深入了解更多关于原生模块和自定义配置的知识。