DailyChallenge_APPDepartment/Day_4

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 的原目录暂时留着，不必删除。

整理后应该类似：

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/ ...

在这个仓库根目录运行：

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：

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，用自己的信息渲染它：

<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 的导入：

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 中增加一句项目目标：这个应用准备帮助谁、解决什么小问题。

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

留下第一个应用里程碑

git status
git diff

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

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 原项目的同一个文件逐步定位，不要删除整个项目重来。