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