fix: 调整后四日学习节奏
This commit is contained in:
+1
-5
@@ -139,8 +139,6 @@ HTTPS Clone 地址
|
||||
|
||||
复制。
|
||||
|
||||
今天创建的仓库先用来练习 Git。明天会把 Day_1 的 `CampusHelper` 应用文件复制到这个仓库中,这样 Git 历史和应用代码就在同一个地方;Day_1 的原目录会暂时保留,不需要删除。
|
||||
|
||||
---
|
||||
|
||||
# 5. clone 到自己的电脑
|
||||
@@ -288,9 +286,7 @@ git push
|
||||
Day_3.txt
|
||||
```
|
||||
|
||||
恭喜:
|
||||
|
||||
> 🎉 你完成了第一次真正的 Git 提交。
|
||||
恭喜你完成了第一次真正的 Git 提交。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -25,6 +25,8 @@ npx expo start
|
||||
|
||||
## 2. 写一个会变化的组件
|
||||
|
||||
先把下面三件事记住:普通变量改了以后,React 不一定会重新显示页面;`useState` 会同时提供“当前值”和“更新值的函数”;调用更新函数后,React 会重新渲染使用这个值的界面。
|
||||
|
||||
在 Day_4 的 `components/` 旁边新建 `CheckInCard.tsx`:
|
||||
|
||||
```tsx
|
||||
@@ -60,6 +62,8 @@ const styles = StyleSheet.create({
|
||||
|
||||
`count` 是当前值,`setCount` 负责更新。`current => current + 1` 表示“在上一次的值上加一”。把 `CheckInCard` 导入昨天的首页,放在 `ProfileCard` 下方;导入路径沿用 Day_4 的表,只把文件名改成 `CheckInCard`。
|
||||
|
||||
这里的方括号不是数组练习,而是一次取出两个值:第一个是当前次数 `count`,第二个是修改它的函数 `setCount`。不要直接写 `count = count + 1`;在 React 中应使用 `setCount(...)`。
|
||||
|
||||
## 今日任务
|
||||
|
||||
1. 点击“完成一次”,数字加 1,提示文字从“从一次尝试开始吧”变成“继续保持!”。
|
||||
|
||||
@@ -46,6 +46,8 @@ export const activities: Activity[] = [
|
||||
|
||||
## 3. 在首页渲染列表
|
||||
|
||||
`ScrollView` 适合少量、手写的内容;`FlatList` 适合“由一份数据生成许多相似项目”的列表。今天会用 `FlatList` 替换昨天首页最外层的 `ScrollView`。`renderItem` 负责画一条活动,`keyExtractor` 告诉 React 每条活动的唯一身份,`ListHeaderComponent` 则把个人卡片和打卡卡片放到列表顶部。
|
||||
|
||||
从 `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` 负责放置昨天已有的内容。
|
||||
|
||||
本日先只把“活动内容”抽到 `data/activities.ts`;活动卡片暂时写在 `renderItem` 中是有意的,等熟悉列表后再单独拆成组件。
|
||||
|
||||
## 今日任务
|
||||
|
||||
1. 至少展示 4 条活动,其中 1 条由你自己设计。
|
||||
|
||||
+5
-1
@@ -22,6 +22,8 @@ npx expo start
|
||||
|
||||
在首页导入 `useState` 与 `Pressable`,在组件开头添加:
|
||||
|
||||
这次状态不是一个数字,而是一组活动 ID,所以写成 `useState<string[]>([])`:尖括号里的 `string[]` 表示“字符串数组”,空的 `[]` 表示开始时还没有选中任何活动。下面的 `includes`、`filter` 和 `...current` 分别用于查找、移除和追加 ID;它们会生成新数组,不直接改掉旧数组。
|
||||
|
||||
```tsx
|
||||
const [joinedIds, setJoinedIds] = useState<string[]>([]);
|
||||
|
||||
@@ -36,6 +38,8 @@ function toggleJoin(id: string) {
|
||||
|
||||
`joinedIds` 是“想参加的活动 ID”列表。点击未选中的活动时加入 ID,再点一次时移除。给 Day_6 的 `FlatList` 增加 `extraData={joinedIds}`,让列表知道选中状态变了;在 `renderItem` 的活动卡片里增加:
|
||||
|
||||
`FlatList` 为了性能不会只因为外部变量变化就重画每一行。`extraData` 是在告诉它:“这一列还依赖 `joinedIds`,它变化时请重新显示”。如果漏掉它,按钮可能已经改了状态,但列表上的文字或颜色没有及时更新。
|
||||
|
||||
```tsx
|
||||
<Pressable onPress={() => toggleJoin(item.id)}>
|
||||
<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`,这个选做内容不影响基本验收。
|
||||
|
||||
Reference in New Issue
Block a user