添加贴纸

编辑页面

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

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

添加 emoji 选择器

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

Prompt

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

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

移动并调整贴纸大小

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

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.

Mark this chapter as read

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

Next: Chapter 5: Save your creation