fix: 调整后四日学习节奏
This commit is contained in:
+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