diff --git a/Day_3/README.md b/Day_3/README.md index 538b256..c70f139 100644 --- a/Day_3/README.md +++ b/Day_3/README.md @@ -137,11 +137,9 @@ app-rookie-你的名字 HTTPS Clone 地址 ``` -复制。 - -今天创建的仓库先用来练习 Git。明天会把 Day_1 的 `CampusHelper` 应用文件复制到这个仓库中,这样 Git 历史和应用代码就在同一个地方;Day_1 的原目录会暂时保留,不需要删除。 - ---- +复制。 + +--- # 5. clone 到自己的电脑 @@ -288,9 +286,7 @@ git push Day_3.txt ``` -恭喜: - -> 🎉 你完成了第一次真正的 Git 提交。 +恭喜你完成了第一次真正的 Git 提交。 --- diff --git a/Day_5/README.md b/Day_5/README.md index da7c2b8..d69768c 100644 --- a/Day_5/README.md +++ b/Day_5/README.md @@ -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,提示文字从“从一次尝试开始吧”变成“继续保持!”。 diff --git a/Day_6/README.md b/Day_6/README.md index 8ee40bd..97432a9 100644 --- a/Day_6/README.md +++ b/Day_6/README.md @@ -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 条由你自己设计。 diff --git a/Day_7/README.md b/Day_7/README.md index 04fc3ed..ab750fd 100644 --- a/Day_7/README.md +++ b/Day_7/README.md @@ -22,6 +22,8 @@ npx expo start 在首页导入 `useState` 与 `Pressable`,在组件开头添加: +这次状态不是一个数字,而是一组活动 ID,所以写成 `useState([])`:尖括号里的 `string[]` 表示“字符串数组”,空的 `[]` 表示开始时还没有选中任何活动。下面的 `includes`、`filter` 和 `...current` 分别用于查找、移除和追加 ID;它们会生成新数组,不直接改掉旧数组。 + ```tsx const [joinedIds, setJoinedIds] = useState([]); @@ -36,6 +38,8 @@ function toggleJoin(id: string) { `joinedIds` 是“想参加的活动 ID”列表。点击未选中的活动时加入 ID,再点一次时移除。给 Day_6 的 `FlatList` 增加 `extraData={joinedIds}`,让列表知道选中状态变了;在 `renderItem` 的活动卡片里增加: +`FlatList` 为了性能不会只因为外部变量变化就重画每一行。`extraData` 是在告诉它:“这一列还依赖 `joinedIds`,它变化时请重新显示”。如果漏掉它,按钮可能已经改了状态,但列表上的文字或颜色没有及时更新。 + ```tsx toggleJoin(item.id)}> {joinedIds.includes(item.id) ? '取消想参加' : '我想参加'} @@ -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`,这个选做内容不影响基本验收。