arthur
90 lines
2.7 KiB
Markdown
90 lines
2.7 KiB
Markdown
# 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`）。有些新版模板还会使用 `app/(tabs)/index.tsx`。本周只需要找到“首页”并修改它，不需要现在学习页面导航。
|
||
|
||
文件名中的 `.tsx` 表示“可以写 JSX 的 TypeScript 文件”。如果你的模板使用 `.js` 或 `.jsx`，先沿用模板已有的文件类型，不要为了改后缀而重建项目。
|
||
|
||
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 中执行刷新。
|