DailyChallenge_APPDepartment/Day_1

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）。有些新版模板还会使用 app/(tabs)/index.tsx。本周只需要找到“首页”并修改它，不需要现在学习页面导航。

文件名中的 .tsx 表示“可以写 JSX 的 TypeScript 文件”。如果你的模板使用 .js 或 .jsx，先沿用模板已有的文件类型，不要为了改后缀而重建项目。

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 中执行刷新。