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

最后润色

在本章中,指导你的 AI 代理美化状态栏、启动画面和应用图标,然后继续你的下一步构建工作。


应用可以正常运行了。现在让它看起来更完整。在本章中,你将打磨那些用户未察觉却注意到的细节:状态栏、启动画面和应用图标。

🌐 The app works. Now make it feel finished. In this chapter, you'll polish the details users notice without realizing it: the status bar, the splash screen, and the app icon.

1

修复状态栏

🌐 Fix the status bar

看看你应用的最顶部:时钟和电池图标是深色的,这使得它们在深色背景下很难阅读。将以下提示粘贴到你的代理中:

🌐 Look at the very top of your app: the clock and battery icons are dark, which makes them hard to read against the dark background. Paste the following prompt into your agent:

Prompt
The phone's status bar (the clock and battery icons at the top of the screen) is hard to read against our dark background. Use the expo-status-bar library to make the status bar text light on every screen.

你应该看到的:屏幕顶部的时钟、电池和信号图标现在是浅色且可读的:

2

设置应用图标和启动画面

🌐 Set the app icon and splash screen

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

🌐 The asset pack you downloaded earlier includes an app icon and a splash screen image. Paste the following prompt into your agent:

Prompt
Set the app's icon to assets/images/icon.png, and configure the splash screen using the expo-splash-screen config plugin so it shows assets/images/splash-icon.png centered on a #25292e background on Android, iOS, and web.

你应该看到的内容:这些设置位于应用的配置中,因此请重新启动开发服务器以应用它们:在终端中按 Ctrl + C ,再次运行 npx expo start,然后从 Expo Go 重新打开应用。项目加载时,你会短暂看到启动屏幕。

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

🌐 One caveat: the app icon on your home screen won't change, because you're running your project inside Expo Go, which is its own app with its own icon. Your icon takes over when you create a standalone build of your app. See development builds when you're ready for that step.

如果结果与你预期的不符,请告诉代理你看到的内容——当某些东西看起来不对时部分有操作手册。

你开发了一个应用

🌐 You built an app

花一点时间来欣赏这里发生的事情:你从零搭建了一个开发环境,然后指导一个 AI 代理构建一个真正的应用,具备导航、照片选择、手势驱动的贴纸以及保存功能(适用于 Android、iOS 和网络),而无需编写代码。

🌐 Take a second to appreciate what happened here: you set up a development environment from nothing, then directed an AI agent to build a real app with navigation, photo picking, gesture-driven stickers, and saving (for Android, iOS, and the web) without writing code.

更重要的是,你学会了这个循环:提示、构建、验证、重新提示。这个循环不会因为本教程而结束。现在试着在你自己的想法上运用它:

🌐 More importantly, you learned the loop: prompt, build, verify, re-prompt. That loop doesn't end with this tutorial. Try it on your own ideas right now:

Prompt
Let me place more than one sticker on the photo.
Prompt
Add a share button that opens the system share sheet so I can send my creation to friends.
Prompt
Fill in the About screen: explain what the app does and credit me as the builder.

下一步

🌐 Next steps

Expo 技能

浏览你的代理可以使用的完整技能列表,并查看每个技能的示例提示。

Expo MCP 服务器

使用 Expo 的工具探索你的代理可以做的一切,包括触发构建和读取崩溃报告。

需要帮助或想展示你所制作的东西?加入 Discord 上的 Expo 社区。

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

概括

🌐 Summary

Chapter 6: Finishing touches

恭喜!你通过指导 AI 代理从零开始构建了 StickerSmash,并用状态栏、启动画面和应用图标对它进行了完善。

好奇你的代理实际上写了什么?Expo 教程构建了相同的应用,一步步解释代码。

下一个:Expo 教程