fix: 调整后四日学习节奏

This commit is contained in:
arthur
2026-09-28 18:13:45 +08:00
parent 0e47fd670b
commit 9a0312dd19
4 changed files with 17 additions and 9 deletions
+1 -5
View File
@@ -139,8 +139,6 @@ HTTPS Clone 地址
复制。 复制。
今天创建的仓库先用来练习 Git。明天会把 Day_1 的 `CampusHelper` 应用文件复制到这个仓库中,这样 Git 历史和应用代码就在同一个地方;Day_1 的原目录会暂时保留,不需要删除。
--- ---
# 5. clone 到自己的电脑 # 5. clone 到自己的电脑
@@ -288,9 +286,7 @@ git push
Day_3.txt Day_3.txt
``` ```
恭喜: 恭喜你完成了第一次真正的 Git 提交。
> 🎉 你完成了第一次真正的 Git 提交。
--- ---
+4
View File
@@ -25,6 +25,8 @@ npx expo start
## 2. 写一个会变化的组件 ## 2. 写一个会变化的组件
先把下面三件事记住:普通变量改了以后,React 不一定会重新显示页面;`useState` 会同时提供“当前值”和“更新值的函数”;调用更新函数后,React 会重新渲染使用这个值的界面。
在 Day_4 的 `components/` 旁边新建 `CheckInCard.tsx`: 在 Day_4 的 `components/` 旁边新建 `CheckInCard.tsx`:
```tsx ```tsx
@@ -60,6 +62,8 @@ const styles = StyleSheet.create({
`count` 是当前值,`setCount` 负责更新。`current => current + 1` 表示“在上一次的值上加一”。把 `CheckInCard` 导入昨天的首页,放在 `ProfileCard` 下方;导入路径沿用 Day_4 的表,只把文件名改成 `CheckInCard`。 `count` 是当前值,`setCount` 负责更新。`current => current + 1` 表示“在上一次的值上加一”。把 `CheckInCard` 导入昨天的首页,放在 `ProfileCard` 下方;导入路径沿用 Day_4 的表,只把文件名改成 `CheckInCard`。
这里的方括号不是数组练习,而是一次取出两个值:第一个是当前次数 `count`,第二个是修改它的函数 `setCount`。不要直接写 `count = count + 1`;在 React 中应使用 `setCount(...)`。
## 今日任务 ## 今日任务
1. 点击“完成一次”,数字加 1,提示文字从“从一次尝试开始吧”变成“继续保持!”。 1. 点击“完成一次”,数字加 1,提示文字从“从一次尝试开始吧”变成“继续保持!”。
+4
View File
@@ -46,6 +46,8 @@ export const activities: Activity[] = [
## 3. 在首页渲染列表 ## 3. 在首页渲染列表
`ScrollView` 适合少量、手写的内容;`FlatList` 适合“由一份数据生成许多相似项目”的列表。今天会用 `FlatList` 替换昨天首页最外层的 `ScrollView`。`renderItem` 负责画一条活动,`keyExtractor` 告诉 React 每条活动的唯一身份,`ListHeaderComponent` 则把个人卡片和打卡卡片放到列表顶部。
从 `react-native` 导入 `FlatList`、`Text`、`View` 和 `StyleSheet`,再从 `data/activities.ts` 导入数据。相对路径规则与 Day_4 的 `components/` 相同,只需将 `components` 改为 `data`。 从 `react-native` 导入 `FlatList`、`Text`、`View` 和 `StyleSheet`,再从 `data/activities.ts` 导入数据。相对路径规则与 Day_4 的 `components/` 相同,只需将 `components` 改为 `data`。
参考核心写法: 参考核心写法:
@@ -74,6 +76,8 @@ export const activities: Activity[] = [
在 `StyleSheet.create` 中为 `activityCard`、`activityTitle`、`pageTitle`、`sectionTitle` 和 `content` 写样式。`content` 可以先写 `{ padding: 20, paddingBottom: 40 }`。把首页原来的外层 `ScrollView` 换成 `FlatList`,**不要把 `FlatList` 放进 `ScrollView`**;`ListHeaderComponent` 负责放置昨天已有的内容。 在 `StyleSheet.create` 中为 `activityCard`、`activityTitle`、`pageTitle`、`sectionTitle` 和 `content` 写样式。`content` 可以先写 `{ padding: 20, paddingBottom: 40 }`。把首页原来的外层 `ScrollView` 换成 `FlatList`,**不要把 `FlatList` 放进 `ScrollView`**;`ListHeaderComponent` 负责放置昨天已有的内容。
本日先只把“活动内容”抽到 `data/activities.ts`;活动卡片暂时写在 `renderItem` 中是有意的,等熟悉列表后再单独拆成组件。
## 今日任务 ## 今日任务
1. 至少展示 4 条活动,其中 1 条由你自己设计。 1. 至少展示 4 条活动,其中 1 条由你自己设计。
+5 -1
View File
@@ -22,6 +22,8 @@ npx expo start
在首页导入 `useState` 与 `Pressable`,在组件开头添加: 在首页导入 `useState` 与 `Pressable`,在组件开头添加:
这次状态不是一个数字,而是一组活动 ID,所以写成 `useState<string[]>([])`:尖括号里的 `string[]` 表示“字符串数组”,空的 `[]` 表示开始时还没有选中任何活动。下面的 `includes`、`filter` 和 `...current` 分别用于查找、移除和追加 ID;它们会生成新数组,不直接改掉旧数组。
```tsx ```tsx
const [joinedIds, setJoinedIds] = useState<string[]>([]); const [joinedIds, setJoinedIds] = useState<string[]>([]);
@@ -36,6 +38,8 @@ function toggleJoin(id: string) {
`joinedIds` 是“想参加的活动 ID”列表。点击未选中的活动时加入 ID,再点一次时移除。给 Day_6 的 `FlatList` 增加 `extraData={joinedIds}`,让列表知道选中状态变了;在 `renderItem` 的活动卡片里增加: `joinedIds` 是“想参加的活动 ID”列表。点击未选中的活动时加入 ID,再点一次时移除。给 Day_6 的 `FlatList` 增加 `extraData={joinedIds}`,让列表知道选中状态变了;在 `renderItem` 的活动卡片里增加:
`FlatList` 为了性能不会只因为外部变量变化就重画每一行。`extraData` 是在告诉它:“这一列还依赖 `joinedIds`,它变化时请重新显示”。如果漏掉它,按钮可能已经改了状态,但列表上的文字或颜色没有及时更新。
```tsx ```tsx
<Pressable onPress={() => toggleJoin(item.id)}> <Pressable onPress={() => toggleJoin(item.id)}>
<Text>{joinedIds.includes(item.id) ? '取消想参加' : '我想参加'}</Text> <Text>{joinedIds.includes(item.id) ? '取消想参加' : '我想参加'}</Text>
@@ -117,4 +121,4 @@ git status
## 选做:认识页面导航 ## 选做:认识页面导航
如果以上内容全部完成,还有余力,可以探索默认 Expo 模板自带的页面切换:找一找 `app/` 或 `src/app/` 中的页面文件,观察它们如何对应应用中的页面。默认模板通常已经包含 [Expo Router](https://docs.expo.dev/router/introduction/);不需要为了本题再安装一套导航库。这个选做内容不影响基本验收。 如果以上内容全部完成,还有余力,可以探索默认 Expo 模板自带的页面切换:找一找 `app/` 或 `src/app/` 中的页面文件,观察它们如何对应应用中的页面。默认模板通常已经包含 [Expo Router](https://docs.expo.dev/router/introduction/);不需要为了本题再安装一套导航库。这里不要求理解路由或 `_layout.tsx`,这个选做内容不影响基本验收。