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

保存你的创作

在本章中,指导你的 AI 代理将装饰过的照片保存到你的手机上,并可选择让它也在浏览器中工作。


在本章中,你将添加最后一个核心功能:将照片、贴纸等保存到手机的相册中。

🌐 In this chapter, you'll add the final core feature: saving the photo, sticker and all, to your phone's photo library.

1

保存到你的照片库

🌐 Save to your photo library

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

🌐 Paste the following prompt into your agent:

Prompt
Add a "Save" option to the row of options, with a download icon. When I tap it, capture just the photo with the sticker on it (not the whole screen) using the react-native-view-shot library, and save the result to my phone's photo library using the expo-media-library library. Ask for permission the first time if needed, and show an alert confirming that the image was saved.

你应该看到的内容:第一次点击 保存 时,系统会请求访问你照片的权限。点击 允许,应用会显示一个确认信息。打开你手机的照片图库:你的照片已经保存了贴纸,可以随时分享。

2

让它在网页上运行(可选)

🌐 Make it work on the web (optional)

你的应用不仅仅是一个手机应用。同一个项目可以在网页浏览器中运行。在运行开发服务器的终端窗口中,按 W ,应用会在你的浏览器中打开。一切都可以正常工作,除了保存:用于在手机上捕捉图片的库在网页上无法使用。

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

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

🌐 Paste the following prompt into your agent:

Prompt
Make the Save option also work when the app runs in a web browser. The react-native-view-shot library doesn't support the web, so when the platform is web, use the dom-to-image library to capture the image and download it as a file instead.

你应该看到的内容:在浏览器中,选择一张照片,添加一个贴纸,然后点击保存。图片将以文件形式下载。这就是在 Expo 应用中处理平台差异的方式:一个应用,在需要时有小的特定平台分支。

概括

🌐 Summary

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.

下一个:Chapter 6: Finishing touches