当前位置:首页 > React

如何搭建react native

2026-02-26 14:13:19React

安装 Node.js 和 npm

React Native 需要 Node.js 环境。从 Node.js 官网 下载并安装最新 LTS 版本,npm 会随 Node.js 自动安装。安装完成后,运行以下命令验证安装:

node -v
npm -v

安装 React Native CLI

React Native 命令行工具(CLI)用于创建和管理项目。全局安装 CLI:

npm install -g react-native-cli

安装 Java Development Kit (JDK)

Android 开发需要 JDK。下载并安装 JDK 11,配置环境变量 JAVA_HOME 指向 JDK 安装路径。

安装 Android Studio

Android Studio 提供 Android SDK 和模拟器。从 官网 下载并安装,安装时勾选 Android SDKAndroid Virtual Device。安装完成后,配置环境变量 ANDROID_HOME 指向 SDK 路径(通常为 ~/Library/Android/sdk%LOCALAPPDATA%\Android\Sdk)。

如何搭建react native

创建 React Native 项目

使用 CLI 创建新项目:

npx react-native init MyProject

进入项目目录:

如何搭建react native

cd MyProject

运行 Android 应用

启动 Android 模拟器或连接真机,运行以下命令:

npx react-native run-android

运行 iOS 应用(仅限 macOS)

安装 Xcode 和 CocoaPods:

sudo gem install cocoapods

在项目目录中运行:

npx react-native run-ios

调试和开发

  • 热重载:在模拟器或设备上摇动设备(或按 Ctrl+M / Cmd+M)启用热重载。
  • 调试工具:使用 Chrome 开发者工具或 Flipper 进行调试。

常见问题解决

  • Android 连接失败:确保设备已启用 USB 调试(开发者选项中)。
  • iOS 编译错误:运行 pod install 解决依赖问题。

项目结构

  • android/ios/:原生代码目录。
  • App.js:应用入口文件。
  • node_modules/:依赖库。

通过以上步骤,React Native 开发环境即可搭建完成。

标签: reactnative
分享给朋友:

相关文章

react如何安装

react如何安装

安装React的步骤 确保已安装Node.js(建议版本12或更高),可通过以下命令检查版本: node -v npm -v 使用Create React App快速搭建项目(推荐): npx c…

如何监控react性能

如何监控react性能

使用 React Profiler API React 16.5 及以上版本内置了 Profiler API,可直接测量组件渲染时间。通过 <React.Profiler> 包裹目标组件,…

react 如何获取dom

react 如何获取dom

获取 DOM 的方法 在 React 中,可以通过 useRef 或 createRef 来获取 DOM 节点。useRef 是函数组件中常用的方法,而 createRef 通常用于类组件。 使用…

如何升级react native

如何升级react native

升级 React Native 的步骤 检查当前版本 运行以下命令查看当前项目的 React Native 版本: react-native --version 更新 React Native CL…

如何外部访问react

如何外部访问react

外部访问 React 应用的方法 配置代理服务器 在开发环境中,可以通过配置代理服务器解决跨域问题。修改 package.json 文件,添加 proxy 字段指向后端 API 地址: "proxy…

react如何渲染图片

react如何渲染图片

在React中渲染图片的方法 使用<img>标签直接引入本地图片 将图片文件放入项目目录(如src/assets),通过相对路径引入。需注意Webpack可能需要配置file-loader…