# Day_4：把练习变成项目——做个人信息卡片

> 前三天的成果都保留：Day_1 的 Expo 应用、Day_2 的命令行练习、Day_3 的 Git 仓库。今天把应用代码纳入 Day_3 的仓库，接下来只在这一份项目上迭代。

预计用时：45～60 分钟。

## 今天要理解什么

- 一个项目不只是截图：源码、依赖清单、说明文档和提交历史要放在一起。
- React Native 用 `View` 布局、用 `Text` 显示文字、用 `StyleSheet` 管理样式。
- 组件是一块可以命名、复用的界面；props 是传给组件的数据。

## 1. 整理唯一的项目目录

Day_3 已经有 `app-rookie-你的名字` 仓库，里面有 `README.md` 和 `Day_3.txt`。Day_1 的 `CampusHelper` 是另一个目录。今天要把 **`CampusHelper` 目录里的项目文件**复制到 `app-rookie-你的名字` 的**根目录**，让后者成为以后唯一继续修改的应用项目。

复制前先确认两个目录的位置。可以用文件管理器或 VS Code 完成复制；保留 Day_3 仓库原有的 `README.md`、`Day_3.txt`，暂时不要用 Expo 模板的 README 覆盖它们。项目源码和配置（如 `package.json`、lock 文件、`app.json`、`.gitignore`、`app/` 或 `src/`、`assets/`）都要复制；**不要复制** `node_modules/`、`.expo/` 或 Day_1 项目里的 `.git/`。注意 `.gitignore` 是要保留的普通配置文件，`.git/` 才是不能复制的仓库历史目录。Day_1 的原目录暂时留着，不必删除。

整理后应该类似：

```text
app-rookie-你的名字/
├─ README.md           ← Day_3 已有，Day_7 再完善
├─ Day_3.txt           ← Day_3 已有
├─ package.json        ← 从 CampusHelper 复制
├─ package-lock.json   ← 从 CampusHelper 复制（如果有）
├─ app/ 或 src/app/ 或 App.tsx
└─ assets/ ...
```

在这个仓库根目录运行：

```bash
pwd
git status
npm install
npx expo start
```

手机上仍能打开 Day_1 的页面，才算迁移成功。以后所有 `npm`、`npx expo` 和 `git` 命令都在这个**包含 `package.json` 的仓库根目录**执行。若 `git status` 显示 `node_modules`、`.expo` 或嵌套的 `CampusHelper/.git`，先不要暂存，检查复制范围和 `.gitignore`；不确定时保留原文件并请学长学姐一起检查。

可以把这次整理理解为：保留 Day_3 仓库的 `.git/`（Git 历史），把 Day_1 的应用源码和配置放进去。`.gitignore` 是普通配置文件，要复制；`.git/` 是隐藏的仓库历史目录，不要复制。`node_modules/` 和 `.expo/` 是本机生成的缓存，也不要复制。

## 2. 找到首页，不预设模板目录

### 先认识本日会用到的几个词

- **组件**：一块可以重复使用的界面，例如个人信息卡片。
- **props**：父页面传给组件的数据，例如姓名、专业和学习目标。
- **TypeScript 类型**：代码中对数据形状的说明。`name: string` 表示 `name` 应该是文字；本日只需要照着示例填写，不必先掌握完整 TypeScript。
- **导入路径**：`../components/ProfileCard` 是代码文件之间的路径，不是终端里的 `cd` 命令；`..` 表示从当前文件夹返回上一级。

Day_1 没有固定模板版本，所以先找你实际修改过的入口页面。常见位置是 `App.tsx`、`app/index.tsx`、`app/(tabs)/index.tsx`、`src/app/index.tsx` 或 `src/app/(tabs)/index.tsx`。如果看到 `_layout.tsx`，先不要改它；它负责页面布局或导航。默认 Expo 模板可能已经带有标签页，今天只修改首页内容，不需要重建项目。

在与 `app/` 同级的位置创建 `components/`；如果入口是根目录的 `App.tsx`，就在根目录创建 `components/`。新建 `components/ProfileCard.tsx`：

```tsx
import { StyleSheet, Text, View } from 'react-native';

type ProfileCardProps = {
  name: string;
  major: string;
  goal: string;
};

export default function ProfileCard({ name, major, goal }: ProfileCardProps) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.detail}>专业：{major}</Text>
      <Text style={styles.detail}>想学习：{goal}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 20, borderRadius: 16, backgroundColor: '#ffffff' },
  name: { fontSize: 24, fontWeight: '700', color: '#1e3a8a' },
  detail: { marginTop: 10, fontSize: 16, color: '#334155' },
});
```

在首页导入 `ProfileCard`，用自己的信息渲染它：

```tsx
<ProfileCard name="你的姓名" major="你的专业" goal="你想学习的技术" />
```

导入路径由首页位置决定：

| 首页文件 | 导入语句 |
| --- | --- |
| `App.tsx` | `import ProfileCard from './components/ProfileCard';` |
| `app/index.tsx` 或 `src/app/index.tsx` | `import ProfileCard from '../components/ProfileCard';` |
| `app/(tabs)/index.tsx` 或 `src/app/(tabs)/index.tsx` | `import ProfileCard from '../../components/ProfileCard';` |

注意：若项目使用 `src/app/`，组件目录应是 `src/components/`。首页的 `return` 需要一个最外层容器，例如 `ScrollView`；普通文字必须放进 `Text`。保留或替换模板原有的演示内容均可，但别误删其他路由或配置文件。

如果不知道把卡片放在哪里，可以先把首页原来的 `return` 内容换成下面的最小结构，并补上 `ScrollView`、`Text` 的导入：

```tsx
return (
  <ScrollView contentContainerStyle={{ padding: 20 }}>
    <Text>CampusHelper</Text>
    <ProfileCard name="你的姓名" major="你的专业" goal="你的目标" />
  </ScrollView>
);
```

## 今日任务

1. 让 Day_3 的仓库能够启动 Day_1 的 Expo 应用。
2. 首页显示独立的 `ProfileCard`，包含真实的姓名、专业和学习目标。
3. 自己改动至少两处样式，并再增加一条个人信息。
4. 在仓库 `README.md` 中增加一句项目目标：这个应用准备帮助谁、解决什么小问题。

这一天的重点是“把已有代码整理成可以继续维护的项目”，不需要做复杂的界面。

## 留下第一个应用里程碑

```bash
git status
git diff
```

确认暂存内容只包含应用源码、配置、lock 文件和今天更新的说明；不要提交缓存或 `node_modules`。可在 VS Code 源代码管理面板逐个暂存相关文件。`git diff` 不显示未跟踪的新文件，暂存后再用 `git diff --staged` 检查，随后运行：

```bash
git diff --staged
git status
git commit -m "feat: start campus helper"
git push
```

## 验收标准

- [ ] 仍是 Day_3 的同一个个人 Git 仓库，没有再新建远程仓库
- [ ] 仓库根目录有 `package.json`，`npx expo start` 能启动应用
- [ ] 首页有自己写的个人信息卡片，且能解释 `View`、`Text`、props 的作用
- [ ] 原有 Day_3 提交仍能在 `git log --oneline` 中看到
- [ ] 本次提交不含 `node_modules/`、`.expo/` 或嵌套 `.git/`

提交：应用截图、仓库链接、`git log --oneline -4` 截图。

## 遇到问题

**找不到 `App.tsx`：**默认 Expo 模板可能使用 `app/` 或 `src/app/`。找首页 `index.tsx`，不要新建第二套入口。

**`Unable to resolve ProfileCard`：**确认 `components/` 与 `app/` 的相对位置，按上表检查 `../` 的层数。

**`npm install` 找不到 `package.json`：**用 `pwd`、`ls` 确认你站在仓库根目录，并检查复制时是否遗漏了配置文件。

**页面空白或红屏：**先读终端第一条错误；可对照 Day_1 原项目的同一个文件逐步定位，不要删除整个项目重来。