This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

收尾工作

编辑页面

在本章中,指导你的 AI 代理完善状态栏、启动屏幕和应用图标,然后继续迈出作为构建者的下一步。


应用已经能运行了。现在让它看起来更完整一些。在这一章里,你将润色那些用户会注意到、却不一定会意识到的细节:状态栏、启动画面,以及应用图标。

1

修复状态栏

看看应用最顶部:时钟和电池图标是深色的,这让它们在深色背景上很难看清。把下面的提示粘贴到你的代理中:

Prompt
手机的状态栏(屏幕顶部的时钟和电池图标)在我们的深色背景上很难看清。请使用 expo-status-bar 库,让每个屏幕上的状态栏文字都显示为浅色。

你应该看到的效果:屏幕顶部的时钟、电池和信号图标现在变成了浅色,并且清晰可读:

2

设置应用图标和启动画面

你之前下载的资源包中包含一个应用图标和一张启动画面图片。把下面的提示粘贴到你的代理中:

Prompt
将应用图标设置为 assets/images/icon.png,并使用 expo-splash-screen 配置插件配置启动画面,使其在 Android、iOS 和 web 上都显示居中于 #25292e 背景上的 assets/images/splash-icon.png。

你应该看到的效果:这些设置保存在应用配置中,所以请重启开发服务器以应用它们:在终端中按 Ctrl + C,再次运行 npx expo start,然后从 Expo Go 重新打开应用。项目加载时,你会短暂看到启动画面。

有一点需要注意:主屏幕上的应用图标不会改变,因为你是在 Expo Go 中运行项目,而 Expo Go 本身就是一个带有自己图标的应用。当你为应用创建独立构建时,你设置的图标才会生效。准备好进行这一步时,请查看 开发构建。

你构建了一个应用

停下来花点时间想想这里发生了什么:你从零开始搭建了一个开发环境,然后指挥 AI 代理构建了一个真正的应用,包含导航、照片选择、手势驱动的贴纸,以及保存功能(适用于 Android、iOS 和网页),而且没有编写代码。

更重要的是,你学会了这个循环:提示、构建、验证、再次提示。这个循环不会在本教程结束后就停止。现在就用你自己的想法试试看:

Prompt
让我在照片上放置不止一个贴纸。
Prompt
添加一个分享按钮,打开系统分享面板,这样我就可以把我的作品发送给朋友。
Prompt
填写 About 屏幕:解释这个应用是做什么的,并注明我是构建者。

下一步

Expo Skills

浏览代理可使用的全部技能,并查看每种技能的示例提示。

Expo MCP server

探索代理使用 Expo 工具可以完成的所有操作,包括触发构建和读取崩溃报告。

需要帮助,或想展示你构建的内容?加入 Discord 上的 Expo 社区。

总结

Chapter 6: Finishing touches

Congratulations! You built StickerSmash from scratch by directing an AI agent, and polished it with a status bar, splash screen, and app icon.

Curious what your agent actually wrote? The Expo tutorial builds the same app, explaining the code one step at a time.

Next: Expo tutorial