🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 引言
- 安装依赖
- Node.js 和 npm
- JDK (仅限 Android)
- Android Studio 和 Xcode (仅限 iOS)
- 安装 React Native CLI
- 创建新的 React Native 项目
- 运行项目
- 在 Android 设备或模拟器上运行
- 在 iOS 设备或模拟器上运行
- 使用 Expo (可选)
- 安装 Expo CLI
- 创建新的 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 的熟悉,你可能会想要深入了解更多关于原生模块和自定义配置的知识。