开篇-搭建开发环境

77 阅读2分钟

零、简介

文章创建时间:2025.11.01

谨慎参考文章内容,读者阅读时文章内容可能已经过时,许多构建步骤可能已经发生变化,最终以文章中贴的官方链接内容为准

什么是 ReactNativeReact Native 允许熟悉 React 的开发者创建原生应用。  同时,原生开发者只需编写一次通用功能,即可使用 React Native 在不同原生平台之间实现兼容性。

一、使用 Expo 构建 ReactNative 项目

什么是 Expo:Expo 是一个生产级的 React Native 框架。Expo 提供了一系列开发者工具,简化了应用开发,例如基于文件的路由、标准的原生模块库等等。

1.1 安装 Node.js 环境

安装 LTS(长期支持版本) 即可,安装流程见官方文档: 下载 Node.js

例如 Mac 上使用 nvm Node.js 版本管理工具安装 Node LTS(写文章时是 24 版本)

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 24

# Verify the Node.js version:
node -v # Should print "v24.11.0".

# Verify npm version:
npm -v # Should print "11.6.1".

1.2 使用 expo 提供的脚手架创建项目

npx create-expo-app@latest

可以通过添加 --template 选项来选择不同的模板。

1.3 设置环境

细节参考官方文档

  • 项目运行的操作系统根据实际情况选择,这里我使用 iOS 开发,选择 iOS 设备
  • Expo GO:是 iOS 开发测试的沙盒工具,内置调试能力,本机运行调试必备
  • Development build:是介绍当你的项目已经开发好了,准备提供给用户内测时的部署构建流程,暂时是不需要的(这个构建是需要付费的,本地开发暂时足够),后面会单独出一个章节介绍如何构建内测包

image.png

选择 Expo Go 之后下滑会有一个 AppStore 下载 Expo Go 应用的二维码,或者直接在 AppStore 搜索 Expo Go 进行下载

image.png

1.4 启动项目

使用 VSCode 开发工具打开项目目录

⚠️ 注意:项目中我这里使用的是 pnpm 包管理工具,如果你没有安装 pnpm,可以直接使用 npm 也是可以的,注意替换镜像源即可

在 2. 执行 npx create-expo-app@latest 创建初始项目后 package.json 会有几个项目脚本命令,先执行 pnpm install 安装项目依赖,然后执行项目脚本命令 pnpm run start 运行项目

image.png

1.5 真机调试

启动项目成功后会打印出项目运行的地址,打开手机浏览器,输入 exp://(ip):(port),如果本地真机安装了 Expo Go 应用则会出现提示调起应用的弹窗,点击是即可

image.png

结语

至此项目从创建到运行的流程已经全部跑完,上面有一些细节没有细说,需要的话直接 AI 搜一下,或者浏览器查一下就行,就不过多赘述了。

以上,感谢 😊 ~~