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

将照片保存到你的照片库

将以下提示粘贴到你的 agent 中:

Prompt
添加一个“保存”选项到选项行中,并带上下载图标。当我点击它时,使用 react-native-view-shot 库只捕获带有贴纸的照片(不是整个屏幕),并使用 expo-media-library 库将结果保存到我手机的照片库中。第一次需要时请求权限,并显示一个提醒,确认图像已保存。

你应该看到的效果:第一次点击 保存 时会请求保存到照片的权限。点击 允许,应用会显示确认信息。打开你手机的相册:你的照片已经在那里,贴纸也已经合成进去,可以随时分享。

2

让它也能在网页上工作(可选)

你的应用不只是手机应用。同一个项目也可以在网页浏览器中运行。在运行开发服务器的终端窗口中,按 W,应用就会在浏览器中打开。除了 保存 以外一切都能正常工作:用于在手机上捕获图像的库在网页上不起作用。

想修复网页上的保存选项吗?

将以下提示粘贴到你的 agent 中:

Prompt
让保存选项在应用运行于网页浏览器时也能正常工作。react-native-view-shot 库不支持 web,因此当平台为 web 时,改用 dom-to-image 库来捕获图像并将其作为文件下载。

你应该看到的效果:在浏览器中,选择一张照片,添加一个贴纸,然后点击 保存。图像会作为文件下载。这就是 Expo 应用处理平台差异的方式:一个应用,在需要的地方加入少量针对特定平台的分支。

总结

Chapter 5: Save your creation

StickerSmash is feature-complete: pick a photo, smash a sticker on it, and save the result, on your phone and even in the browser. One chapter to go.

In the next chapter, you'll polish the status bar, splash screen, and app icon, and take your next steps.

Next: Chapter 6: Finishing touches