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

添加贴纸

编辑页面

在本章中,指导你的 AI 代理添加一个表情符号选择器模态框,并让贴纸对拖拽和点击手势做出响应。


在本章中,应用终于名副其实:你将从一个滑出式面板中选择一个 emoji,把它贴到你的照片上,并用手指拖动它。

1

添加 emoji 选择器

一旦选中了照片,应用就应该从“选择照片”模式切换到“装饰照片”模式。把下面的提示粘贴到你的代理中:

Prompt
当选择了一张照片后(无论是从图库中选取,还是通过点击“Use this photo”),将这两个按钮替换为一排选项:左侧是一个“Reset”选项,用于恢复原来的按钮,中间是一个圆形的“+”按钮。点击“+”后,应从底部滑出一个名为“Choose a sticker”的模态框,其中显示来自 assets/images 文件夹的 emoji 图片,并以水平滚动列表的形式呈现。当我点击某个 emoji 时,关闭模态框,并将该 emoji 作为贴纸放到照片上。

你应该看到:在选中照片后,按钮会变成新的选项行。点击 + 会从底部滑出一个 emoji 面板;你可以左右滚动列表。点击其中一个会关闭面板,并且该 emoji 会出现在你的照片上:

2

移动并调整贴纸大小

固定在一个位置的贴纸可没什么意思。把下面的提示粘贴到你的代理中:

Prompt
使用 react-native-gesture-handler 和 react-native-reanimated 库让贴纸变得可交互:我希望能用手指拖动贴纸,把它放到照片上的任何位置;并且可以通过双击把它放大到两倍大小(再次双击应将其缩小回去)。移动和缩放都应平滑地动画过渡。

你应该看到:用手指在照片上拖动 emoji,并通过双击让它放大和缩小。

这一步很好地提醒了你自己的角色:代理可以读取自己的代码,但它感受不到手势。只有你能确认拖动是否顺手。如果贴纸出现卡顿、跳动或回弹,请把这些具体现象准确描述给代理。

摘要

Chapter 4: Add stickers

Your photo now wears a draggable, resizable emoji sticker. All that's missing is a way to keep your creation.

In the next chapter, you'll save the decorated photo to your phone's photo library.

Next: Chapter 5: Save your creation