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 环境，你可以通过以下命令检查是否已安装：

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 命令行工具：

npm install -g react-native-cli

创建新的 React Native 项目

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

npx react-native init MyProject

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

运行项目

在 Android 设备或模拟器上运行

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

cd MyProject
npx react-native run-android

在 iOS 设备或模拟器上运行

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

cd MyProject
npx react-native run-ios

使用 Expo (可选)

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

安装 Expo CLI

npm install -g expo-cli

创建新的 Expo 项目

expo init MyExpoProject

运行 Expo 项目

cd MyExpoProject
expo start

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

结论

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