This commit is contained in:
arthur
2026-09-17 11:13:35 +08:00
parent 46198aa8c9
commit 3284e63e89
8 changed files with 2248 additions and 432 deletions
+85
View File
@@ -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 中执行刷新。