如何搭建react native
搭建 React Native 开发环境
安装 Node.js 和 npm/yarn
React Native 需要 Node.js 作为运行环境。从 Node.js 官网 下载并安装最新 LTS 版本。安装完成后,验证安装是否成功:
node -v
npm -v
安装 React Native CLI
使用 npm 全局安装 React Native 命令行工具:
npm install -g react-native-cli
安装 Java Development Kit (JDK)
Android 开发需要 JDK。下载并安装 JDK 11,配置环境变量 JAVA_HOME 指向 JDK 安装路径。
安装 Android Studio
从 Android Studio 官网 下载并安装。安装完成后,打开 Android Studio,在 SDK Manager 中确保以下内容已安装:
- Android SDK
- Android SDK Platform
- Android Virtual Device (AVD)
配置环境变量 ANDROID_HOME 指向 Android SDK 路径(通常为 ~/Library/Android/sdk 或 %LOCALAPPDATA%\Android\Sdk)。
创建 React Native 项目
初始化项目
使用 React Native CLI 创建新项目:

react-native init MyProject
cd MyProject
运行项目(Android)
确保 Android 模拟器已启动或设备已连接。在项目目录下运行:
react-native run-android
运行项目(iOS)
仅限 macOS 用户。安装 Xcode 后,打开项目中的 ios/MyProject.xcworkspace,选择模拟器并点击运行。或通过命令行:
react-native run-ios
配置开发工具
安装 Metro Bundler
Metro 是 React Native 的 JavaScript 打包工具,通常已包含在项目中。启动开发服务器:

npm start
调试工具
- React Developer Tools:安装 Chrome 扩展用于调试 React 组件。
- Flipper:下载 Flipper 用于高级调试(网络、数据库等)。
常见问题解决
Android 设备连接问题
确保 USB 调试已启用。在设备上进入开发者选项,勾选“USB 调试”。通过 adb devices 验证设备是否被识别。
iOS 模拟器问题
如果 run-ios 失败,尝试通过 Xcode 直接运行项目或重置模拟器:
xcrun simctl erase all
依赖冲突
若出现依赖问题,删除 node_modules 并重新安装:
rm -rf node_modules
npm install
项目结构说明
android/:Android 原生代码目录。ios/:iOS 原生代码目录。App.js:应用入口文件。package.json:项目依赖和脚本配置。
通过以上步骤,React Native 开发环境即可搭建完成。






