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 屏幕:解释这个应用是做什么的,并注明我是构建者。

Next Steps

Expo Skills

Browse the full list of skills your agent can use, and see example prompts for each skill.

Expo MCP Server

Explore everything your agent can do with Expo's tools, including triggering builds and reading crash reports.

Need help, or want to show off what you’ve built? Join the Expo community on Discord.

总结

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