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

> 今天只做一件事：让 React Native 开发环境跑起来。

预计用时：30～45 分钟。

## 今日目标

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

## 1. 安装工具

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

1. [VS Code](https://code.visualstudio.com/)
2. [Node.js LTS](https://nodejs.org/)
3. [Git](https://git-scm.com/)
4. 手机上的 Expo Go（Android 可从 Google Play 获取；iOS 可从 App Store 获取）

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

```bash
node --version
npm --version
git --version
```

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

## 2. 创建项目

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

```bash
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 常见组件包括：

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

## 4. 第一次修改

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

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

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

## 今日任务

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

## 验收标准

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

## 常见问题

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

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

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