init
This commit is contained in:
arthur
@@ -0,0 +1,85 @@
|
||||
# Day_1：环境配置与第一个 React Native 应用
|
||||
|
||||
> 今天只做一件事：让 React Native 开发环境真正跑起来。
|
||||
|
||||
预计用时：30～45 分钟。
|
||||
|
||||
## 今日目标
|
||||
|
||||
- 安装 VS Code、Node.js LTS 与 Git
|
||||
- 在手机安装 Expo Go
|
||||
- 创建并启动一个 Expo 项目
|
||||
- 修改一行文字并在手机或模拟器中看到变化
|
||||
|
||||
## 1. 安装工具
|
||||
|
||||
安装以下工具并保持默认设置：
|
||||
|
||||
1. [VS Code](https://code.visualstudio.com/)
|
||||
2. [Node.js LTS](https://nodejs.org/)
|
||||
3. [Git](https://git-scm.com/)
|
||||
4. 手机上的 Expo Go（Android 可从 Google Play 获取；iOS 可从 App Store 获取）
|
||||
|
||||
打开 VS Code 的“终端 → 新建终端”，依次检查：
|
||||
|
||||
```bash
|
||||
node --version
|
||||
npm --version
|
||||
git --version
|
||||
```
|
||||
|
||||
三条命令都应输出版本号；若没有，请重启终端后检查安装步骤。
|
||||
|
||||
## 2. 创建项目
|
||||
|
||||
在准备放置练习代码的位置执行：
|
||||
|
||||
```bash
|
||||
npx create-expo-app@latest CampusHelper
|
||||
cd CampusHelper
|
||||
npx expo start
|
||||
```
|
||||
|
||||
终端会显示二维码。让电脑和手机连接同一网络，再用 Expo Go 扫码打开项目；也可按提示在 Android 或 iOS 模拟器中启动。
|
||||
|
||||
## 3. 认识项目
|
||||
|
||||
新版模板的目录可能略有不同，但先找到入口屏幕（常见为 `app/index.tsx` 或 `App.tsx`）。React Native 常见组件包括：
|
||||
|
||||
```text
|
||||
View 一块布局区域
|
||||
Text 文字
|
||||
Pressable 可点击区域
|
||||
Image 图片
|
||||
```
|
||||
|
||||
## 4. 第一次修改
|
||||
|
||||
将入口页面中可见的标题改成：
|
||||
|
||||
```text
|
||||
Hello, APP!
|
||||
这是我的第一个 React Native 应用。
|
||||
```
|
||||
|
||||
保存后，Expo 通常会自动刷新手机中的页面。没有刷新时，回到 Expo Go 后手动刷新。
|
||||
|
||||
## 今日任务
|
||||
|
||||
把文字改成属于你自己的介绍，至少包括姓名、专业和一句“我想学习的技术”。不要直接提交示例文字。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- [ ] `node --version`、`npm --version`、`git --version` 都能运行
|
||||
- [ ] `CampusHelper` 项目已创建
|
||||
- [ ] Expo 开发服务器已启动
|
||||
- [ ] 手机或模拟器成功显示应用
|
||||
- [ ] 修改后的文字已经显示
|
||||
|
||||
## 常见问题
|
||||
|
||||
**手机打不开二维码：**先确认手机和电脑处于同一局域网；不方便时，可在 Expo 的终端界面切换为 tunnel 连接。
|
||||
|
||||
**`npx` 找不到：**通常是 Node.js 未安装成功，重新打开终端并执行 `node --version` 检查。
|
||||
|
||||
**修改后没更新：**确认文件已保存，并在 Expo Go 中执行刷新。
|
||||
+1314
File diff suppressed because it is too large
Load Diff
+497
@@ -0,0 +1,497 @@
|
||||
# Day_3：Git 入门——给代码一个“存档点”
|
||||
|
||||
> 今天学习 APP 开发中非常重要的工具：Git。
|
||||
>
|
||||
> 不管以后学习 React Native、Kotlin、KMP 还是后端，你都会继续使用它。
|
||||
|
||||
预计用时：40～60 分钟
|
||||
|
||||
## 今日目标
|
||||
|
||||
完成今天后，你应该能够：
|
||||
|
||||
- 理解 Git 大概是做什么的
|
||||
- clone 一个仓库
|
||||
- 查看 Git 状态
|
||||
- add 修改
|
||||
- commit 修改
|
||||
- push 到远程
|
||||
- pull 最新代码
|
||||
|
||||
暂时不用学习复杂 Git。
|
||||
|
||||
---
|
||||
|
||||
# 1. Git 是什么？
|
||||
|
||||
假设你写项目时这样保存：
|
||||
|
||||
```text
|
||||
最终版.zip
|
||||
最终版2.zip
|
||||
最终版真的最终版.zip
|
||||
最终版真的最终版修改.zip
|
||||
```
|
||||
|
||||
这显然很痛苦。
|
||||
|
||||
Git 可以帮你保存项目的修改历史。
|
||||
|
||||
你可以把：
|
||||
|
||||
```text
|
||||
commit
|
||||
```
|
||||
|
||||
理解成：
|
||||
|
||||
> 给当前代码拍一张快照。
|
||||
|
||||
---
|
||||
|
||||
# 2. Git 最基本的流程
|
||||
|
||||
暂时只需要记住：
|
||||
|
||||
```text
|
||||
修改文件
|
||||
↓
|
||||
git add
|
||||
↓
|
||||
git commit
|
||||
↓
|
||||
git push
|
||||
↓
|
||||
远程仓库
|
||||
```
|
||||
|
||||
其中：
|
||||
|
||||
```text
|
||||
add
|
||||
```
|
||||
|
||||
表示：
|
||||
|
||||
> 我准备提交这些修改。
|
||||
|
||||
```text
|
||||
commit
|
||||
```
|
||||
|
||||
表示：
|
||||
|
||||
> 保存一个版本。
|
||||
|
||||
```text
|
||||
push
|
||||
```
|
||||
|
||||
表示：
|
||||
|
||||
> 把本地版本上传到服务器。
|
||||
|
||||
---
|
||||
|
||||
# 3. 配置自己的身份
|
||||
|
||||
第一次使用 Git，需要告诉 Git 你是谁。
|
||||
|
||||
打开终端：
|
||||
|
||||
```bash
|
||||
git config --global user.name "你的名字"
|
||||
```
|
||||
|
||||
例如：
|
||||
|
||||
```bash
|
||||
git config --global user.name "Arthur"
|
||||
```
|
||||
|
||||
再填写邮箱：
|
||||
|
||||
```bash
|
||||
git config --global user.email "你的邮箱"
|
||||
```
|
||||
|
||||
查看：
|
||||
|
||||
```bash
|
||||
git config --global --list
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. 创建自己的练习仓库
|
||||
|
||||
进入社团 Git 平台。
|
||||
|
||||
创建一个自己的仓库，例如：
|
||||
|
||||
```text
|
||||
app-rookie-你的名字
|
||||
```
|
||||
|
||||
创建仓库时建议：
|
||||
|
||||
```text
|
||||
初始化 README
|
||||
```
|
||||
|
||||
这样仓库不是空的。
|
||||
|
||||
找到仓库的：
|
||||
|
||||
```text
|
||||
HTTPS Clone 地址
|
||||
```
|
||||
|
||||
复制。
|
||||
|
||||
---
|
||||
|
||||
# 5. clone 到自己的电脑
|
||||
|
||||
先进入你准备保存代码的位置：
|
||||
|
||||
```bash
|
||||
cd 你的目录
|
||||
```
|
||||
|
||||
然后：
|
||||
|
||||
```bash
|
||||
git clone 复制下来的地址
|
||||
```
|
||||
|
||||
例如：
|
||||
|
||||
```bash
|
||||
git clone <你的仓库地址>
|
||||
```
|
||||
|
||||
成功后：
|
||||
|
||||
```bash
|
||||
ls
|
||||
```
|
||||
|
||||
应该出现：
|
||||
|
||||
```text
|
||||
app-rookie-你的名字
|
||||
```
|
||||
|
||||
进入：
|
||||
|
||||
```bash
|
||||
cd app-rookie-你的名字
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 6. 看看 Git 在干什么
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
如果没有修改，通常会看到类似：
|
||||
|
||||
```text
|
||||
nothing to commit
|
||||
working tree clean
|
||||
```
|
||||
|
||||
意思是：
|
||||
|
||||
> 当前代码没有没有保存的修改。
|
||||
|
||||
---
|
||||
|
||||
# 7. 修改一个文件
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
echo "Day 3 Git Practice" > Day_3.txt
|
||||
```
|
||||
|
||||
再：
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
这一次你应该看到：
|
||||
|
||||
```text
|
||||
Day_3.txt
|
||||
```
|
||||
|
||||
出现在未跟踪文件中。
|
||||
|
||||
---
|
||||
|
||||
# 8. git add
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
git add Day_3.txt
|
||||
```
|
||||
|
||||
再次：
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
文件状态发生了变化。
|
||||
|
||||
现在表示：
|
||||
|
||||
> 我准备把 Day_3.txt 放进下一次 commit。
|
||||
|
||||
---
|
||||
|
||||
# 9. 第一个 commit
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
git commit -m "docs: finish day 3 git practice"
|
||||
```
|
||||
|
||||
这里：
|
||||
|
||||
```text
|
||||
-m
|
||||
```
|
||||
|
||||
后面的文字就是：
|
||||
|
||||
> 这次修改做了什么。
|
||||
|
||||
---
|
||||
|
||||
# 10. push
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
git push
|
||||
```
|
||||
|
||||
根据平台设置，第一次可能需要登录。
|
||||
|
||||
完成后打开网页刷新仓库。
|
||||
|
||||
如果你看到：
|
||||
|
||||
```text
|
||||
Day_3.txt
|
||||
```
|
||||
|
||||
恭喜：
|
||||
|
||||
> 🎉 你完成了第一次真正的 Git 提交。
|
||||
|
||||
---
|
||||
|
||||
# 11. git log
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
git log --oneline
|
||||
```
|
||||
|
||||
你可能看到：
|
||||
|
||||
```text
|
||||
abc1234 docs: finish day 3 git practice
|
||||
...
|
||||
```
|
||||
|
||||
这就是你的提交历史。
|
||||
|
||||
---
|
||||
|
||||
# 12. pull 是什么？
|
||||
|
||||
如果服务器上的代码比你的电脑更新：
|
||||
|
||||
需要：
|
||||
|
||||
```bash
|
||||
git pull
|
||||
```
|
||||
|
||||
你可以尝试：
|
||||
|
||||
1. 在 Git 网页上修改 `README.md`
|
||||
2. 直接在网页提交修改
|
||||
3. 回到本地
|
||||
4. 执行：
|
||||
|
||||
```bash
|
||||
git pull
|
||||
```
|
||||
|
||||
观察本地文件有没有更新。
|
||||
|
||||
---
|
||||
|
||||
# 今日任务
|
||||
|
||||
完成以下过程：
|
||||
|
||||
```text
|
||||
创建个人仓库
|
||||
↓
|
||||
clone
|
||||
↓
|
||||
创建 Day_3.txt
|
||||
↓
|
||||
git add
|
||||
↓
|
||||
git commit
|
||||
↓
|
||||
git push
|
||||
↓
|
||||
网页确认文件存在
|
||||
```
|
||||
|
||||
然后再做第二次修改：
|
||||
|
||||
把：
|
||||
|
||||
```text
|
||||
Day 3 Git Practice
|
||||
```
|
||||
|
||||
改成：
|
||||
|
||||
```text
|
||||
Day 3 Git Practice
|
||||
I know how to use Git now.
|
||||
```
|
||||
|
||||
再次：
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "docs: update day 3 practice"
|
||||
git push
|
||||
```
|
||||
|
||||
最后：
|
||||
|
||||
```bash
|
||||
git log --oneline
|
||||
```
|
||||
|
||||
应该至少看到两个自己的 commit。
|
||||
|
||||
---
|
||||
|
||||
# 验收标准
|
||||
|
||||
- [ ] 知道 Git 是版本管理工具
|
||||
- [ ] 成功 clone 仓库
|
||||
- [ ] 会执行 `git status`
|
||||
- [ ] 会执行 `git add`
|
||||
- [ ] 会执行 `git commit`
|
||||
- [ ] 会执行 `git push`
|
||||
- [ ] 知道 `git pull` 是做什么的
|
||||
- [ ] 仓库里至少存在两个自己的 commit
|
||||
|
||||
提交：
|
||||
|
||||
```text
|
||||
git log --oneline
|
||||
```
|
||||
|
||||
的截图。
|
||||
|
||||
---
|
||||
|
||||
# 常见问题
|
||||
|
||||
## `not a git repository`
|
||||
|
||||
先执行：
|
||||
|
||||
```bash
|
||||
pwd
|
||||
```
|
||||
|
||||
很可能：
|
||||
|
||||
> 你没有进入仓库目录。
|
||||
|
||||
执行：
|
||||
|
||||
```bash
|
||||
cd app-rookie-你的名字
|
||||
```
|
||||
|
||||
然后再试。
|
||||
|
||||
这就是为什么 Day_2 要学习目录。
|
||||
|
||||
---
|
||||
|
||||
## `nothing to commit`
|
||||
|
||||
通常表示：
|
||||
|
||||
> 你没有新的修改可以提交。
|
||||
|
||||
先：
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
看看发生了什么。
|
||||
|
||||
---
|
||||
|
||||
## push 被拒绝
|
||||
|
||||
先不要乱执行：
|
||||
|
||||
```text
|
||||
--force
|
||||
```
|
||||
|
||||
先尝试：
|
||||
|
||||
```bash
|
||||
git pull
|
||||
```
|
||||
|
||||
如果仍然失败：
|
||||
|
||||
把完整报错提交到工单或询问学长学姐。
|
||||
|
||||
---
|
||||
|
||||
# Bonus
|
||||
|
||||
尝试执行：
|
||||
|
||||
```bash
|
||||
git diff
|
||||
```
|
||||
|
||||
然后修改一个文件，再执行一次。
|
||||
|
||||
看看 Git 是如何显示代码变化的。
|
||||
|
||||
---
|
||||
@@ -0,0 +1,75 @@
|
||||
# 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 或模拟器中正常预览
|
||||
@@ -0,0 +1,67 @@
|
||||
# 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 需要知道状态发生了变化，才能安排重新渲染。
|
||||
@@ -0,0 +1,92 @@
|
||||
# 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
@@ -0,0 +1,100 @@
|
||||
# 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、课程表、失物招领等一个新页面。
|
||||
@@ -1,450 +1,36 @@
|
||||
# DailyChallenge_APP
|
||||
|
||||
APP部 2026 纳新每日一题（开发基础 / 命令行 / Git / 微信小程序）
|
||||
APP 部 2026 纳新每日一题（开发基础 / 命令行 / Git / React Native）。
|
||||
|
||||
请克隆仓库以获取每日一题。
|
||||
|
||||
## 学习方式
|
||||
|
||||
每天一个文件夹（`Day_1 ~ Day_7`），**先看教程再动手做**，每天控制在 **30～60 分钟以内**：
|
||||
|
||||
1. 打开当天文件夹的 `README.md`
|
||||
2. 先阅读 `README.md` 中的内容，了解当天需要使用的知识
|
||||
3. 再完成任务，遇到问题时优先尝试查阅文档、搜索或使用 AI 辅助
|
||||
4. 将运行结果、截图或代码提交到**当日工单**评论区
|
||||
|
||||
---
|
||||
|
||||
## 提交方式
|
||||
|
||||
请在对应的每日工单下方“撰写”区域提交你的代码、运行截图或仓库链接，然后点击“评论”。
|
||||
|
||||
如果页面显示“登录 并参与到对话中”，请先点击“登录”并注册你的账户。
|
||||
|
||||
推荐从第一天开始保留自己的练习仓库，例如：
|
||||
|
||||
```text
|
||||
DailyChallenge_APP_你的名字/
|
||||
├── Day_1/
|
||||
├── Day_2/
|
||||
├── Day_3/
|
||||
├── ...
|
||||
└── Day_7/
|
||||
```
|
||||
|
||||
后续会学习使用 Git 管理这些代码。
|
||||
|
||||
---
|
||||
每个 `Day_1` ~ `Day_7` 文件夹中都有当天教学与任务。建议每天投入 30～60 分钟：先读 `README.md`，再完成任务，并将代码、运行截图或仓库链接提交到当天工单。
|
||||
|
||||
## 课程安排
|
||||
|
||||
| 目录 | 内容 |
|
||||
| --- | --- |
|
||||
| `Day_1` | 环境配置：VS Code + 终端 + 微信开发者工具 |
|
||||
| `Day_1` | 环境配置：VS Code、Node.js、Git、Expo Go 与第一个 React Native 应用 |
|
||||
| `Day_2` | 命令行基础：目录、文件与路径 |
|
||||
| `Day_3` | Git 入门：clone / add / commit / pull / push |
|
||||
| `Day_4` | 小程序页面基础：WXML + WXSS |
|
||||
| `Day_5` | 小程序交互：事件、data 与 `setData` |
|
||||
| `Day_6` | 页面与组件：列表、页面跳转与简单数据展示 |
|
||||
| `Day_7` | 完成一个简单微信小程序 |
|
||||
| `Day_4` | React Native 页面基础：组件、JSX 与 StyleSheet |
|
||||
| `Day_5` | React Native 交互：事件、state 与 `useState` |
|
||||
| `Day_6` | 列表与导航：`FlatList`、参数与详情页 |
|
||||
| `Day_7` | 综合完成一个 React Native 校园助手应用 |
|
||||
|
||||
每个目录包含：当日题目（`README.md`）、学习资料、任务要求、提示以及参考解答。
|
||||
> **定位目标：**帮助零基础同学建立开发习惯，理解项目、组件、状态、事件、列表与导航，并能阅读和修改一个简单的 React Native 应用。
|
||||
|
||||
> **定位目标：**这一阶段主要帮助零基础同学建立最基本的软件开发习惯，理解文件、终端、Git、页面、数据和事件之间的关系，并能够看懂和修改一个简单的小程序项目。
|
||||
## 技术栈
|
||||
|
||||
---
|
||||
本阶段使用 React Native + Expo：
|
||||
|
||||
## 每日内容简介
|
||||
- React：用组件描述界面，用 state 管理会变化的数据。
|
||||
- React Native：将 React 组件渲染为 Android / iOS 原生界面。
|
||||
- Expo：提供适合入门的项目脚手架、开发服务器与真机预览流程。
|
||||
- React Navigation：处理多页面应用的页面跳转。
|
||||
|
||||
### Day_1：搭建你的开发环境
|
||||
入门阶段不需要 Android Studio 或 Xcode；使用 Expo Go 扫码即可在手机上预览。
|
||||
|
||||
完成最基本的开发环境配置：
|
||||
## 最终项目：CampusHelper
|
||||
|
||||
- 安装 VS Code
|
||||
- 安装 Chrome / Edge
|
||||
- 安装微信开发者工具
|
||||
- 学会打开终端
|
||||
- 成功打开并运行第一个示例项目
|
||||
第七天将完成一个小型校园助手应用，至少包含个人信息卡片、学习打卡计数器、校园活动列表，以及活动详情页与报名状态切换。
|
||||
|
||||
当天不要求掌握编程知识。
|
||||
|
||||
目标只有一个：
|
||||
|
||||
> **让开发环境真正跑起来。**
|
||||
|
||||
---
|
||||
|
||||
### Day_2：程序员如何操作文件？
|
||||
|
||||
学习最基本的命令行概念：
|
||||
|
||||
```text
|
||||
当前目录
|
||||
文件
|
||||
文件夹
|
||||
绝对路径
|
||||
相对路径
|
||||
```
|
||||
|
||||
以及常见命令：
|
||||
|
||||
```bash
|
||||
cd
|
||||
dir / ls
|
||||
mkdir
|
||||
pwd
|
||||
```
|
||||
这一部分虽然看起来和 APP 开发没有直接关系，但今后使用：
|
||||
|
||||
```text
|
||||
Git
|
||||
Gradle
|
||||
Node.js
|
||||
开发服务器
|
||||
项目脚本
|
||||
```
|
||||
|
||||
都会频繁接触终端。
|
||||
|
||||
---
|
||||
|
||||
### Day_3：第一次使用 Git
|
||||
|
||||
学习最基本的版本控制流程：
|
||||
|
||||
```text
|
||||
工作区
|
||||
↓
|
||||
git add
|
||||
↓
|
||||
git commit
|
||||
↓
|
||||
本地仓库
|
||||
↓
|
||||
git push
|
||||
↓
|
||||
远程仓库
|
||||
```
|
||||
|
||||
主要使用：
|
||||
|
||||
```bash
|
||||
git clone
|
||||
git status
|
||||
git add .
|
||||
git commit -m "..."
|
||||
git pull
|
||||
git push
|
||||
```
|
||||
|
||||
当天任务是：
|
||||
|
||||
> 将自己的练习文件第一次提交到 Git 仓库。
|
||||
|
||||
暂时不要求掌握：
|
||||
|
||||
```text
|
||||
rebase
|
||||
reset
|
||||
cherry-pick
|
||||
复杂分支管理
|
||||
```
|
||||
|
||||
这些会在真正参与项目后逐步学习。
|
||||
|
||||
---
|
||||
|
||||
### Day_4：第一个微信小程序页面
|
||||
|
||||
正式进入微信小程序。
|
||||
|
||||
学习：
|
||||
|
||||
```text
|
||||
WXML
|
||||
WXSS
|
||||
页面结构
|
||||
基础组件
|
||||
文字
|
||||
图片
|
||||
按钮
|
||||
简单布局
|
||||
```
|
||||
|
||||
理解最重要的两个概念：
|
||||
|
||||
```text
|
||||
WXML = 页面结构
|
||||
WXSS = 页面样式
|
||||
```
|
||||
|
||||
当天任务可以完成一个：
|
||||
|
||||
> **APP 部个人介绍页面**
|
||||
|
||||
例如显示：
|
||||
|
||||
```text
|
||||
姓名
|
||||
专业
|
||||
兴趣方向
|
||||
想学习的技术
|
||||
联系方式
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Day_5：让页面“动起来”
|
||||
|
||||
学习小程序中的：
|
||||
|
||||
```text
|
||||
事件
|
||||
data
|
||||
setData
|
||||
bindtap
|
||||
```
|
||||
|
||||
理解：
|
||||
|
||||
```text
|
||||
用户点击
|
||||
↓
|
||||
触发事件
|
||||
↓
|
||||
执行函数
|
||||
↓
|
||||
数据发生变化
|
||||
↓
|
||||
界面更新
|
||||
```
|
||||
|
||||
当天任务：
|
||||
|
||||
> 完成一个简单的计数器或 Todo 页面。
|
||||
|
||||
例如：
|
||||
|
||||
```text
|
||||
当前次数：0
|
||||
|
||||
[ +1 ]
|
||||
[ -1 ]
|
||||
[ 重置 ]
|
||||
```
|
||||
|
||||
重点不是功能复杂，而是第一次理解：
|
||||
|
||||
> **页面其实是数据的一种表现。**
|
||||
|
||||
---
|
||||
|
||||
### Day_6：从一个页面到一个小应用
|
||||
|
||||
学习：
|
||||
|
||||
```text
|
||||
列表渲染
|
||||
wx:for
|
||||
条件渲染
|
||||
页面跳转
|
||||
简单的数据传递
|
||||
```
|
||||
|
||||
当天任务可以完成一个：
|
||||
|
||||
> **校园活动列表**
|
||||
|
||||
首页：
|
||||
|
||||
```text
|
||||
APP 部新人培训
|
||||
程序设计比赛
|
||||
社团招新宣讲
|
||||
```
|
||||
|
||||
点击某一个活动后进入详情页。
|
||||
|
||||
开始建立：
|
||||
|
||||
```text
|
||||
列表页
|
||||
↓
|
||||
详情页
|
||||
```
|
||||
|
||||
这种真实 APP 中非常常见的页面关系。
|
||||
|
||||
---
|
||||
|
||||
### Day_7：综合小测
|
||||
|
||||
最后一天不再学习大量新知识。
|
||||
|
||||
使用前几天的知识完成一个简单小程序，例如：
|
||||
|
||||
## Campus Helper Mini
|
||||
|
||||
可以包含：
|
||||
|
||||
```text
|
||||
首页
|
||||
活动列表
|
||||
活动详情
|
||||
个人页面
|
||||
```
|
||||
|
||||
最低要求：
|
||||
|
||||
- 至少两个页面
|
||||
- 使用 WXML
|
||||
- 使用 WXSS
|
||||
- 至少一次点击事件
|
||||
- 至少一次 `setData`
|
||||
- 至少一次列表渲染
|
||||
- 至少一次页面跳转
|
||||
- 使用 Git 提交代码
|
||||
- 编写简单的 `README.md`
|
||||
|
||||
Bonus：
|
||||
|
||||
- 本地缓存
|
||||
- 表单输入
|
||||
- 搜索 / 筛选
|
||||
- 调用简单的公开 API
|
||||
- 自定义组件
|
||||
|
||||
---
|
||||
|
||||
## 环境准备
|
||||
|
||||
`Day_1` 会详细介绍。
|
||||
|
||||
### 编辑器
|
||||
|
||||
VS Code
|
||||
|
||||
<https://code.visualstudio.com/>
|
||||
|
||||
### 微信开发者工具
|
||||
|
||||
微信官方提供的小程序开发环境。
|
||||
|
||||
后续的 WXML、WXSS、JavaScript 和页面调试都会在这里完成。
|
||||
|
||||
### 浏览器
|
||||
|
||||
推荐：
|
||||
|
||||
- Chrome
|
||||
- Edge
|
||||
|
||||
浏览器的开发者工具也是今后调试 Web 页面、接口和网络请求的重要工具。
|
||||
|
||||
### Git
|
||||
|
||||
用于：
|
||||
|
||||
```text
|
||||
获取代码
|
||||
保存修改记录
|
||||
提交作业
|
||||
团队协作
|
||||
```
|
||||
|
||||
后续 APP 部正式项目原则上都会使用 Git 进行代码管理。
|
||||
|
||||
---
|
||||
|
||||
## 与 Kotlin / KMP 学习的关系
|
||||
|
||||
APP 部目前主要包含：
|
||||
|
||||
```text
|
||||
微信小程序
|
||||
+
|
||||
Kotlin / Kotlin Multiplatform
|
||||
```
|
||||
|
||||
本仓库主要用于技术扫盲和小程序开发启蒙。
|
||||
|
||||
Kotlin / KMP 方向已有独立教程：
|
||||
|
||||
```text
|
||||
From Kotlin to Kotlin-Multiplatform
|
||||
```
|
||||
|
||||
本每日一题主要负责所有方向共同需要的基础能力：
|
||||
|
||||
```text
|
||||
开发环境
|
||||
命令行
|
||||
项目目录
|
||||
Git
|
||||
页面
|
||||
事件
|
||||
数据
|
||||
调试
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 关于 AI
|
||||
|
||||
欢迎使用 AI。
|
||||
|
||||
在现在的软件开发过程中，能够正确使用 AI 本身也是一种能力。
|
||||
|
||||
你可以让 AI：
|
||||
|
||||
```text
|
||||
解释报错
|
||||
解释一段代码
|
||||
寻找某个 API 的使用方法
|
||||
帮助检查代码
|
||||
给出修改建议
|
||||
```
|
||||
|
||||
但不建议直接：
|
||||
|
||||
```text
|
||||
复制题目
|
||||
↓
|
||||
让 AI 完整生成
|
||||
↓
|
||||
不阅读代码
|
||||
↓
|
||||
直接提交
|
||||
```
|
||||
|
||||
换句话说，
|
||||
|
||||
> **AI 生成的代码，我大概知道每一部分是在干什么；修改一个需求时，我知道应该去哪里改。**
|
||||
|
||||
如果你能够做到这一点，本阶段的学习目标就已经基本达成。
|
||||
|
||||
---
|
||||
|
||||
## 最后的目标
|
||||
|
||||
完成这一阶段以后，不要求你能够独立开发一个完整 APP。
|
||||
|
||||
希望你至少能够做到：
|
||||
|
||||
```text
|
||||
看到一个项目
|
||||
↓
|
||||
知道怎么把它 clone 下来
|
||||
↓
|
||||
知道应该在哪个目录运行
|
||||
↓
|
||||
能够阅读基本项目结构
|
||||
↓
|
||||
能够修改一个简单页面
|
||||
↓
|
||||
能够处理点击事件和页面数据
|
||||
↓
|
||||
能够通过 Git 提交自己的修改
|
||||
```
|
||||
|
||||
做到这些，你就已经具备继续学习微信小程序、Kotlin / KMP，以及参加 APP 部真实项目开发所需要的第一层基础。
|
||||
完成后，你应能从项目目录启动开发服务器、修改一个组件、处理点击事件、更新 state、渲染列表、在页面间传递参数，并用 Git 保存修改。
|
||||
|
||||
Reference in New Issue
Block a user