Files
DailyChallenge_APPDepartment/Day_1/README.md
T
arthur 3284e63e89 init
2026-09-17 11:13:35 +08:00

2.4 KiB
Raw Blame History

Day_1:环境配置与第一个 React Native 应用

今天只做一件事:让 React Native 开发环境真正跑起来。

预计用时:30~45 分钟。

今日目标

  • 安装 VS Code、Node.js LTS 与 Git
  • 在手机安装 Expo Go
  • 创建并启动一个 Expo 项目
  • 修改一行文字并在手机或模拟器中看到变化

1. 安装工具

安装以下工具并保持默认设置:

  1. VS Code
  2. Node.js LTS
  3. Git
  4. 手机上的 Expo Go(Android 可从 Google Play 获取;iOS 可从 App Store 获取)

打开 VS Code 的“终端 → 新建终端”,依次检查:

node --version
npm --version
git --version

三条命令都应输出版本号;若没有,请重启终端后检查安装步骤。

2. 创建项目

在准备放置练习代码的位置执行:

npx create-expo-app@latest CampusHelper
cd CampusHelper
npx expo start

终端会显示二维码。让电脑和手机连接同一网络,再用 Expo Go 扫码打开项目;也可按提示在 Android 或 iOS 模拟器中启动。

3. 认识项目

新版模板的目录可能略有不同,但先找到入口屏幕(常见为 app/index.tsx 或 App.tsx)。React Native 常见组件包括:

View       一块布局区域
Text       文字
Pressable  可点击区域
Image      图片

4. 第一次修改

将入口页面中可见的标题改成:

Hello, APP!
这是我的第一个 React Native 应用。

保存后,Expo 通常会自动刷新手机中的页面。没有刷新时,回到 Expo Go 后手动刷新。

今日任务

把文字改成属于你自己的介绍,至少包括姓名、专业和一句“我想学习的技术”。不要直接提交示例文字。

验收标准

  • node --version、npm --version、git --version 都能运行
  • CampusHelper 项目已创建
  • Expo 开发服务器已启动
  • 手机或模拟器成功显示应用
  • 修改后的文字已经显示

常见问题

**手机打不开二维码:**先确认手机和电脑处于同一局域网;不方便时,可在 Expo 的终端界面切换为 tunnel 连接。

**npx 找不到:**通常是 Node.js 未安装成功,重新打开终端并执行 node --version 检查。

**修改后没更新:**确认文件已保存,并在 Expo Go 中执行刷新。