From 9b7ab80fc1564a924601de89f4b374609de2c1ce Mon Sep 17 00:00:00 2001 From: arthur <2433368947@qq.com> Date: Fri, 18 Sep 2026 12:16:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E4=B8=89=E6=97=A5=E6=8A=80?= =?UTF-8?q?=E6=9C=AF=E6=89=AB=E7=9B=B2=E5=AE=A1=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Day_1/README.md | 2 +- Day_2/README.md | 95 ++++++++++++++------------------------------- Day_3/README.md | 18 ++------- Day_4/README.md | 75 ------------------------------------ Day_5/README.md | 67 -------------------------------- Day_6/README.md | 92 -------------------------------------------- Day_7/README.md | 100 ------------------------------------------------ README.md | 4 +- 8 files changed, 35 insertions(+), 418 deletions(-) delete mode 100644 Day_4/README.md delete mode 100644 Day_5/README.md delete mode 100644 Day_6/README.md delete mode 100644 Day_7/README.md diff --git a/Day_1/README.md b/Day_1/README.md index c797eda..329d09f 100644 --- a/Day_1/README.md +++ b/Day_1/README.md @@ -1,6 +1,6 @@ # Day_1：环境配置与第一个 React Native 应用 -> 今天只做一件事：让 React Native 开发环境真正跑起来。 +> 今天只做一件事：让 React Native 开发环境跑起来。 预计用时：30～45 分钟。 diff --git a/Day_2/README.md b/Day_2/README.md index abac90a..2b88833 100644 --- a/Day_2/README.md +++ b/Day_2/README.md @@ -1,8 +1,7 @@ # Day_2：命令行基础——不用鼠标操作文件 -> 今天暂时不写界面，先掌握 React Native 项目同样离不开的命令行基础。 -> -> 我们来学习一个程序员每天都会接触的工具：**命令行（Command Line）**。 +> 今天暂时不写界面，先掌握任何项目都离不开的基础： +> **命令行（Command Line）**。 预计用时：30～45 分钟 @@ -21,9 +20,7 @@ - Windows 与 macOS 的命令行有什么区别 - 为什么很多开发命令必须在“正确的目录”中执行 -今天不要求背命令。 - -真正需要建立的是： +今天需要理解的是： > **“我现在在哪里？我要去哪里？我要操作哪个文件？”** @@ -40,9 +37,7 @@ 可以直接在 VS Code 中点击： ```text -终端 -→ -新建终端 +终端 → 新建终端 ``` 通常会打开： @@ -54,7 +49,24 @@ PowerShell 你可能看到： ```text -PS C:\Users\Arthur> +PS C:\Users\Arthur\...\your_project> +``` + +也可以使用 Windows 自带的： +```text +cmd 或 Powershell +``` + +通过： + +```text +Win + R +``` + +打开“运行”，然后搜索： + +```text +cmd 或 Powershell ``` --- @@ -64,9 +76,7 @@ PS C:\Users\Arthur> 同样可以直接使用 VS Code： ```text -Terminal -→ -New Terminal +终端 → 新建终端 ``` 通常会打开： @@ -101,9 +111,9 @@ Terminal --- -# 2. Windows 和 macOS 的命令一样吗？ +# 终端命令 -有些一样，有些不一样。 +基于不同系统，Windows 和 macOS 的终端命令略有差异。 今天会使用的命令大部分在两个系统中都可以使用。 @@ -118,10 +128,6 @@ Terminal | 清屏 | `cls` / `clear` | `clear` | | 创建空文件 | `New-Item` | `touch` | -所以你会发现： - -> Windows PowerShell 和 macOS Terminal 的基本使用方式其实非常接近。 - 后面的教程如果没有特别说明： ```bash @@ -172,7 +178,7 @@ C:\Users\Arthur /Users/arthur ``` -虽然路径长得不一样，但表达的是同一个概念： +这行文字表达的概念是： > **你当前所在的位置。** @@ -342,7 +348,7 @@ Windows 和 macOS 都建议养成这个习惯： ```text CampusHelper app-rookie -my-project +my_project ``` 这种没有空格的名字。 @@ -421,17 +427,6 @@ Documents > 上一级目录。 -所以以后如果看到： - -```text -./ -../ -``` - -不要觉得它是什么特殊代码。 - -它们本质上只是在描述位置。 - --- # 9. 创建文件夹 @@ -526,11 +521,7 @@ projects notes ``` -到这里你已经在： - -> **完全不用鼠标** - -的情况下创建了三个文件夹。 +到这里： **完全不用鼠标** 的情况下，你已经创建了三个文件夹。 --- @@ -1282,33 +1273,3 @@ cd - --- -# 今天最重要的一句话 - -以后当你看到： - -```text -找不到文件 -找不到项目 -找不到配置 -not a git repository -``` - -不要第一时间慌。 - -先执行： - -```bash -pwd -``` - -然后： - -```bash -ls -``` - -问自己： - -> **我现在在哪里？我要操作的东西真的在这里吗？** - -这会解决很多未来的开发问题。 diff --git a/Day_3/README.md b/Day_3/README.md index e283a3d..4e23b71 100644 --- a/Day_3/README.md +++ b/Day_3/README.md @@ -2,7 +2,7 @@ > 今天学习 APP 开发中非常重要的工具：Git。 > -> 不管以后学习 React Native、Kotlin、KMP 还是后端，你都会继续使用它。 +> 不管以后学习 React Native、Kotlin、KMP 还是后端，你都会继续使用它。 预计用时：40～60 分钟 @@ -35,17 +35,7 @@ 这显然很痛苦。 -Git 可以帮你保存项目的修改历史。 - -你可以把： - -```text -commit -``` - -理解成： - -> 给当前代码拍一张快照。 +而 Git 可以帮你简洁优雅地保存项目的修改历史。 --- @@ -125,7 +115,7 @@ git config --global --list # 4. 创建自己的练习仓库 -进入社团 Git 平台。 +进入 GitHub。 创建一个自己的仓库，例如： @@ -342,7 +332,7 @@ git pull git pull ``` -观察本地文件有没有更新。 +观察本地文件的变化。 --- diff --git a/Day_4/README.md b/Day_4/README.md deleted file mode 100644 index c25471b..0000000 --- a/Day_4/README.md +++ /dev/null @@ -1,75 +0,0 @@ -# Day_4：第一个 React Native 页面——组件、JSX 与 StyleSheet - -> 今天不写复杂逻辑，只做出一个像样的页面。 - -预计用时：40～60 分钟。 - -## 今日目标 - -- 理解组件与 JSX -- 使用 `View`、`Text`、`Image` -- 使用 `StyleSheet` 编写样式 -- 完成 CampusHelper 的个人信息卡片 - -## 1. React Native 页面是什么 - -React Native 用组件描述页面： - -```text -View = 布局容器 -Text = 文字 -Image = 图片 -StyleSheet = 样式规则 -``` - -与 Web 不同，不能直接写 `div`、`p`；文字必须放在 `Text` 中。 - -## 2. 一个最小页面 - -在入口屏幕中尝试下面的代码： - -```tsx -import { StyleSheet, Text, View } from 'react-native'; - -export default function HomeScreen() { - return ( - - Hello APP - 这是我的第一个 React Native 页面。 - - ); -} - -const styles = StyleSheet.create({ - page: { flex: 1, padding: 24, backgroundColor: '#F5F7FB' }, - title: { fontSize: 28, fontWeight: '700', marginBottom: 12 }, -}); -``` - -`style={styles.title}` 表示把 `styles` 中名为 `title` 的样式应用到文字。 - -## 3. 制作个人信息卡片 - -在页面中加入以下结构，并替换成你自己的信息： - -```tsx - - 小明 - 计算机科学与技术 - 方向：移动端开发 - -``` - -为 `card` 添加 `padding`、`backgroundColor`、`borderRadius` 和 `marginTop`；为 `name` 设置更大的 `fontSize` 和 `fontWeight: '700'`。 - -## 今日任务 - -完成一张个人信息卡片，至少展示：姓名、专业、感兴趣的方向、想学习的技术。自行调整背景、间距、字号或圆角，使页面有自己的风格。 - -## 验收标准 - -- [ ] 使用了 `View` 和 `Text` -- [ ] 使用 `StyleSheet.create` -- [ ] 页面显示四项个人信息 -- [ ] 卡片具有间距、背景色和圆角 -- [ ] 在 Expo Go 或模拟器中正常预览 diff --git a/Day_5/README.md b/Day_5/README.md deleted file mode 100644 index c0b3f53..0000000 --- a/Day_5/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Day_5：让页面动起来——事件、state 与 useState - -预计用时：40～60 分钟。 - -## 今日目标 - -- 理解“事件 → 函数 → state 更新 → 界面更新” -- 使用 `Pressable` -- 使用 `useState` -- 完成学习打卡计数器 - -## 1. state 是什么 - -页面中会变化的数据叫状态（state）。在函数组件中，用 `useState` 保存它： - -```tsx -import { useState } from 'react'; - -const [count, setCount] = useState(0); -``` - -`count` 是当前数值；`setCount` 是更新它的方式。调用后，React 会重新渲染受影响的界面。 - -## 2. 加一个按钮 - -```tsx -import { Pressable, Text, View } from 'react-native'; - - - 今日学习次数：{count} - setCount(count + 1)}> - +1 - - -``` - -用户点击 `Pressable`，触发 `onPress`，再通过 `setCount` 更新数值；`Text` 中的 `{count}` 会显示新值。 - -## 今日任务：学习打卡计数器 - -在昨天的个人信息卡片下方加入计数器： - -```text -今日学习打卡 -当前完成：0 次 -[ +1 ] [ -1 ] [ 重置 ] -``` - -要求：`+1` 增加一次；`-1` 减少一次但不能小于 0；重置按钮使次数回到 0；为按钮添加明显的背景色、内边距和圆角。 - -`-1` 的逻辑可以写成： - -```tsx -setCount((current) => Math.max(0, current - 1)); -``` - -## 验收标准 - -- [ ] 使用 `useState` -- [ ] 使用至少一个 `Pressable` -- [ ] `+1`、`-1`、重置均可用 -- [ ] 数值不会小于 0 -- [ ] 点击后界面会立即更新 - -## 思考题 - -为什么不要写 `count++`，而要调用 `setCount`？提示：React 需要知道状态发生了变化，才能安排重新渲染。 diff --git a/Day_6/README.md b/Day_6/README.md deleted file mode 100644 index 5907786..0000000 --- a/Day_6/README.md +++ /dev/null @@ -1,92 +0,0 @@ -# Day_6：列表与导航——从一个页面到一个小应用 - -> 今天第一次制作“列表页 → 详情页”。 - -预计用时：45～60 分钟。 - -## 今日目标 - -- 使用数组保存列表数据 -- 用 `FlatList` 高效渲染列表 -- 使用 Expo Router 的 `Link` 或 `router.push` 跳转 -- 在详情页读取路由参数 - -## 1. 准备活动数据 - -在首页定义数据： - -```tsx -const activities = [ - { id: '1', title: 'APP 部新人培训', time: '周五 19:00', place: '信息学院' }, - { id: '2', title: '程序设计比赛', time: '周六 14:00', place: '教学楼' }, - { id: '3', title: '社团招新宣讲', time: '周日 18:30', place: '大学生活动中心' }, -]; -``` - -每一项都是对象，`id` 用来识别活动，其他字段是要显示的信息。 - -## 2. 使用 FlatList - -`FlatList` 是 React Native 推荐的长列表组件。最小写法如下： - -```tsx -import { FlatList, Text, View } from 'react-native'; - - item.id} - renderItem={({ item }) => ( - - {item.title} - {item.time} · {item.place} - - )} -/> -``` - -## 3. 创建详情页 - -Expo Router 模板中，为活动详情新建 `app/activity/[id].tsx`。`[id]` 表示 URL 中可变的参数，例如 `/activity/2`。 - -首页可用 `router.push` 前往详情： - -```tsx -import { router } from 'expo-router'; - -router.push({ pathname: '/activity/[id]', params: { id: item.id } }); -``` - -详情页通过 `useLocalSearchParams` 读取参数： - -```tsx -import { useLocalSearchParams } from 'expo-router'; - -const { id } = useLocalSearchParams<{ id: string }>(); -``` - -根据 `id` 从活动数组中查找对应数据，再展示标题、时间、地点与介绍。页面返回按钮由 Expo Router 的 Stack 默认提供；若没有，请检查根布局是否使用了 `Stack`。 - -## 今日任务：校园活动列表 - -完成首页活动列表和活动详情页： - -```text -首页 - ├─ APP 部新人培训 - ├─ 程序设计比赛 - └─ 社团招新宣讲 - ↓ - 活动详情 -``` - -详情页至少显示活动名称、时间、地点、活动介绍。点击不同活动，必须显示不同内容。 - -## 验收标准 - -- [ ] 首页至少显示 3 条活动 -- [ ] 使用 `FlatList` -- [ ] 每个列表项都有稳定的 `id` -- [ ] 点击列表项能跳到详情页 -- [ ] 使用 `router.push`（或 `Link`）传递 `id` -- [ ] 详情页用 `useLocalSearchParams` 读取 `id` -- [ ] 不同活动展示不同详情 diff --git a/Day_7/README.md b/Day_7/README.md deleted file mode 100644 index 72be53f..0000000 --- a/Day_7/README.md +++ /dev/null @@ -1,100 +0,0 @@ -# Day_7：综合小测——CampusHelper - -> 把前六天学到的东西真正组合成一个 React Native 应用。 - -预计用时：60～90 分钟。 - -今天可以查阅前面的 README、官方文档、报错信息或 AI；但请确保你知道提交的代码大致在做什么。 - -## 最终任务 - -完成 CampusHelper，至少包含： - -```text -首页 - ├─ 个人信息卡片 - ├─ 学习打卡计数器 - └─ 校园活动列表 - ↓ - 活动详情 - └─ 报名状态切换 -``` - -## 功能要求 - -### 1. 个人信息卡片 - -首页显示姓名、专业、APP 部新人身份和学习方向。 - -### 2. 学习打卡 - -显示当前次数，提供 `+1`、`-1`、重置按钮；次数不能小于 0。 - -### 3. 活动列表 - -至少三条活动，每条展示名称、时间和地点。请使用 `FlatList`。 - -### 4. 活动详情 - -点击活动进入详情页，展示标题、时间、地点和介绍。不同活动必须显示不同内容。 - -### 5. 报名按钮 - -详情页增加可切换状态的按钮： - -```text -[ 报名活动 ] ↔ [ 已报名 ] -``` - -参考实现： - -```tsx -const [joined, setJoined] = useState(false); - - setJoined((current) => !current)}> - {joined ? '已报名' : '报名活动'} - -``` - -## 最低验收标准 - -- [ ] 项目能通过 `npx expo start` 正常运行 -- [ ] 至少有首页和活动详情页两个页面 -- [ ] 使用 `View`、`Text`、`StyleSheet` -- [ ] 使用 `useState` -- [ ] 使用 `Pressable` 和 `onPress` -- [ ] 使用 `FlatList` -- [ ] 使用 Expo Router 页面跳转并传递参数 -- [ ] 有一个能改变状态的报名按钮 -- [ ] 页面有基本样式且没有明显红色报错 - -## Git 要求 - -完成项目后，在项目目录执行： - -```bash -git status -git add . -git commit -m "feat: finish CampusHelper React Native app" -git push -git log --oneline -``` - -## 项目 README - -为你的项目添加 `README.md`，写明：项目名称、已完成功能、你学到的 React Native 知识点，以及启动方式： - -```bash -npm install -npx expo start -``` - -## 提交内容 - -在 Day_7 工单提交首页截图、活动详情截图、Git 提交记录截图，以及一句你在这七天中收获最大或最难理解的知识点。 - -## Bonus - -- 用 `AsyncStorage` 持久化报名状态； -- 设计自己的色彩、卡片和按钮风格； -- 增加 Todo、课程表、失物招领等一个新页面。 diff --git a/README.md b/README.md index 590f6c7..749160b 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native | `Day_6` | 列表与导航：`FlatList`、参数与详情页 | | `Day_7` | 综合完成一个 React Native 校园助手应用 | -> **定位目标：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。 +> **目的：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。 ## 技术栈 @@ -27,7 +27,7 @@ APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native - Expo：提供适合入门的项目脚手架、开发服务器与真机预览流程。 - React Navigation：处理多页面应用的页面跳转。 -入门阶段不需要 Android Studio 或 Xcode；使用 Expo Go 扫码即可在手机上预览。 +不需要 Android Studio、Xcode 或微信开发者工具；使用 Expo Go 扫码即可在手机上预览。 ## 最终项目：CampusHelper