This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
创建你的第一个应用
在本章中,指导你的 AI 代理创建一个新的 Expo 应用,并在你的手机上查看它的运行效果。
在本章中,你的代理将创建一个新的 Expo 应用,你将让它在手机上运行,并进行你的第一次修改。这就是你将在整个教程中重复的循环。
🌐 In this chapter, your agent creates a new Expo app, you get it running on your phone, and you make your first change. This is the loop you'll repeat for the rest of the tutorial.
1
在新文件夹中启动你的代理
🌐 Start your agent in a new folder
你的代理一次只能在一个文件夹内工作,因此请为此项目创建一个专用文件夹,并在那里启动代理。在终端中运行:
🌐 Your agent works inside one folder at a time, so create a dedicated folder for this project and start the agent there. In your terminal, run:
- mkdir StickerSmash- cd StickerSmash然后在该文件夹中启动你的代理:运行 claude 或 codex。如果你使用的是 Cursor,创建一个名为 StickerSmash 的新文件夹,通过 文件 > 打开文件夹 打开它,然后打开代理面板。
🌐 Then start your agent in that folder: run claude or codex. If you're using Cursor, create a new folder named StickerSmash, open it with File > Open Folder, and open the agent panel.
2
创建应用
🌐 Create the app
将以下提示粘贴到你的代理中:
🌐 Paste the following prompt into your agent:
Create a new Expo app in this folder (the current directory) by running npx create-expo-app@latest and choosing the SDK 54 template — I will test the app with Expo Go on my phone, which uses SDK 54. After it is created, run the project's reset-project script so we start from a minimal app, and delete the app-example folder that the script leaves behind. Don't start the development server; I will run that myself.
代理需要几分钟时间来下载模板并安装其依赖。完成后,它应报告项目已准备好,包含一个最小的 app 文件夹,其中有几个文件。
🌐 The agent takes a few minutes to download the template and install its dependencies. When it finishes, it should report that the project is ready, with a minimal app folder containing a couple of files.
3
在你的手机上运行这个应用
🌐 Run the app on your phone
这是在整个教程中你自己将执行的唯一命令。它会启动开发服务器,将你的应用流式传输到你的手机。打开一个新的终端窗口(保持第一个窗口中的代理运行),然后运行:
🌐 This is the one command you'll run yourself throughout the tutorial. It starts the development server that streams your app to your phone. Open a new terminal window (leave your agent running in the first one), then run:
- cd StickerSmash- npx expo start终端中出现了一个二维码。要打开应用:
🌐 A QR code appears in the terminal. To open the app:
- 安卓:打开 Expo Go 并点击 扫描二维码。
- iOS:打开默认相机应用并将其对准二维码。
你应该会在手机上看到一个几乎空白的屏幕。那就是你的应用。在接下来的教程中,请保持这个终端窗口打开,并将手机放在身边。
🌐 You should see a mostly empty screen on your phone. That's your app. Keep this terminal window open and your phone nearby for the rest of the tutorial.
手机无法连接?
你的手机和电脑必须连接到同一个 Wi-Fi 网络。如果它们已经连接但应用仍然无法加载,请使用 Ctrl + C 停止服务器,然后以隧道模式重新启动,它可以跨网络工作:
- npx expo start --tunnel当你在手机和终端中使用相同的 Expo 账户登录时,你也可以在 Expo Go 的 项目 标签下找到你的项目。
🌐 You can also find your project under the Projects tab in Expo Go when you're signed in to the same Expo account on your phone and in the terminal.
4
进行你的第一次更改
🌐 Make your first change
现在闭合循环:要求代理进行可见更改,并观察它出现在你的手机上。将以下提示粘贴到你的代理中:
🌐 Now close the loop: ask the agent for a visible change and watch it land on your phone. Paste the following prompt into your agent:
Change the home screen so it shows the text "Home screen" in white, centered on a dark background with the color #25292e.
你应该看到:在代理完成后的几秒钟内,你手机上的应用会重新加载,显示一个中央有白色“主屏幕”文字的黑屏:
这就是整个工作流程——你提出指令,代理构建内容,你的手机显示结果。
🌐 That's the whole workflow — you prompt, the agent builds, your phone shows the result.
当某事看起来不对
🌐 When something looks wrong
迟早会出现结果与你要求的不符的情况。这是正常的,修复它是工作流程的一部分:
🌐 Sooner or later a result won't match what you asked for. That's normal, and fixing it is part of the workflow:
- 描述,而不是诊断。 告诉代理你确切看到的内容以及你预期的结果:“文本是居中的,但背景仍然是白色的。”你不需要猜测原因。
- 逐字粘贴错误。 如果你的手机显示红色错误屏幕或终端打印错误信息,请将整个信息复制到代理中。错误信息是为程序员编写的,而你的代理就是一个程序员。
- 请代理检查它的工作。 类似“有什么东西坏了——回顾你刚做的修改,找出问题并修复它”的提示非常有效。
- 如果应用卡住,摇动你的手机,然后在出现的菜单中点击重新加载。如果这没有帮助,使用 Ctrl + C 停止开发服务器,然后再次运行
npx expo start。
接下来的章节以一个简短的提醒结束,将内容联系回本节。
🌐 The next chapters end with a short reminder linking back to this section.
概括
🌐 Summary
Chapter 2: Create your first app
你创建了一个应用,在手机上运行它,并通过一个提示就进行了修改。
在下一章,你将把这个空屏幕变成真正的东西:导航标签、照片查看器和图片选择器。