2.4 KiB
2.4 KiB
Day_1:环境配置与第一个 React Native 应用
今天只做一件事:让 React Native 开发环境跑起来。
预计用时:30~45 分钟。
今日目标
- 安装 VS Code、Node.js LTS 与 Git
- 在手机安装 Expo Go
- 创建并启动一个 Expo 项目
- 修改一行文字并在手机或模拟器中看到变化
1. 安装工具
安装以下工具并保持默认设置:
- VS Code
- Node.js LTS
- Git
- 手机上的 Expo Go(Android 可从 Google Play 获取;iOS 可从 App Store 获取)
打开 VS Code 的“终端 → 新建终端”,依次检查:
node --version
npm --version
git --version
三条命令都应输出版本号;若没有,请重启终端后检查安装步骤。
2. 创建项目
在准备放置练习代码的位置执行:
npx create-expo-app@latest CampusHelper
cd CampusHelper
npx expo start
终端会显示二维码。让电脑和手机连接同一网络,再用 Expo Go 扫码打开项目;也可按提示在 Android 或 iOS 模拟器中启动。
3. 认识项目
新版模板的目录可能略有不同,但先找到入口屏幕(常见为 app/index.tsx 或 App.tsx)。React Native 常见组件包括:
View 一块布局区域
Text 文字
Pressable 可点击区域
Image 图片
4. 第一次修改
将入口页面中可见的标题改成:
Hello, APP!
这是我的第一个 React Native 应用。
保存后,Expo 通常会自动刷新手机中的页面。没有刷新时,回到 Expo Go 后手动刷新。
今日任务
把文字改成属于你自己的介绍,至少包括姓名、专业和一句“我想学习的技术”。不要直接提交示例文字。
验收标准
node --version、npm --version、git --version都能运行CampusHelper项目已创建- Expo 开发服务器已启动
- 手机或模拟器成功显示应用
- 修改后的文字已经显示
常见问题
**手机打不开二维码:**先确认手机和电脑处于同一局域网;不方便时,可在 Expo 的终端界面切换为 tunnel 连接。
**npx 找不到:**通常是 Node.js 未安装成功,重新打开终端并执行 node --version 检查。
**修改后没更新:**确认文件已保存,并在 Expo Go 中执行刷新。