feat: 前三日技术扫盲审查
This commit is contained in:
arthur
+1
-1
@@ -1,6 +1,6 @@
|
||||
# Day_1：环境配置与第一个 React Native 应用
|
||||
|
||||
> 今天只做一件事：让 React Native 开发环境真正跑起来。
|
||||
> 今天只做一件事：让 React Native 开发环境跑起来。
|
||||
|
||||
预计用时：30～45 分钟。
|
||||
|
||||
|
||||
+28
-67
@@ -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
|
||||
```
|
||||
|
||||
问自己：
|
||||
|
||||
> **我现在在哪里？我要操作的东西真的在这里吗？**
|
||||
|
||||
这会解决很多未来的开发问题。
|
||||
|
||||
+3
-13
@@ -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
|
||||
```
|
||||
|
||||
观察本地文件有没有更新。
|
||||
观察本地文件的变化。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<View style={styles.page}>
|
||||
<Text style={styles.title}>Hello APP</Text>
|
||||
<Text>这是我的第一个 React Native 页面。</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.name}>小明</Text>
|
||||
<Text style={styles.meta}>计算机科学与技术</Text>
|
||||
<Text style={styles.meta}>方向：移动端开发</Text>
|
||||
</View>
|
||||
```
|
||||
|
||||
为 `card` 添加 `padding`、`backgroundColor`、`borderRadius` 和 `marginTop`；为 `name` 设置更大的 `fontSize` 和 `fontWeight: '700'`。
|
||||
|
||||
## 今日任务
|
||||
|
||||
完成一张个人信息卡片，至少展示：姓名、专业、感兴趣的方向、想学习的技术。自行调整背景、间距、字号或圆角，使页面有自己的风格。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- [ ] 使用了 `View` 和 `Text`
|
||||
- [ ] 使用 `StyleSheet.create`
|
||||
- [ ] 页面显示四项个人信息
|
||||
- [ ] 卡片具有间距、背景色和圆角
|
||||
- [ ] 在 Expo Go 或模拟器中正常预览
|
||||
@@ -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';
|
||||
|
||||
<View>
|
||||
<Text>今日学习次数：{count}</Text>
|
||||
<Pressable onPress={() => setCount(count + 1)}>
|
||||
<Text>+1</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
```
|
||||
|
||||
用户点击 `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 需要知道状态发生了变化，才能安排重新渲染。
|
||||
@@ -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';
|
||||
|
||||
<FlatList
|
||||
data={activities}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<View>
|
||||
<Text>{item.title}</Text>
|
||||
<Text>{item.time} · {item.place}</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
```
|
||||
|
||||
## 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`
|
||||
- [ ] 不同活动展示不同详情
|
||||
-100
@@ -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);
|
||||
|
||||
<Pressable onPress={() => setJoined((current) => !current)}>
|
||||
<Text>{joined ? '已报名' : '报名活动'}</Text>
|
||||
</Pressable>
|
||||
```
|
||||
|
||||
## 最低验收标准
|
||||
|
||||
- [ ] 项目能通过 `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、课程表、失物招领等一个新页面。
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user