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, the app earns its name: you'll pick an emoji from a sliding panel, smash it onto your photo, and move it around with your fingers.
1
添加表情符号选择器
🌐 Add the emoji picker
一旦选择了一张照片,应用应从“选择照片”模式切换到“装饰照片”模式。将以下提示粘贴到你的代理中:
🌐 Once a photo is chosen, the app should switch from "picking a photo" mode to "decorating it" mode. Paste the following prompt into your agent:
When a photo has been chosen (either picked from the library or by tapping "Use this photo"), replace the two buttons with a row of options: a "Reset" option on the left that brings back the original buttons, and a circular "+" button in the middle. Tapping "+" should slide up a modal from the bottom titled "Choose a sticker" that shows the emoji images from the assets/images folder in a horizontally scrolling list. When I tap an emoji, close the modal and place that emoji on top of the photo as a sticker.
你应该看到的内容:选择照片后,按钮会更改为新的选项行。点击 + 会弹出一个表情符号面板;你可以横向滚动列表。点击一个表情符号会关闭面板,并将表情符号显示在你的照片上:
2
移动并调整贴纸大小
🌐 Move and resize the sticker
贴在一个地方的贴纸并不有趣。将以下提示粘贴到你的代理中:
🌐 A sticker stuck in one spot isn't much fun. Paste the following prompt into your agent:
Make the sticker interactive using the react-native-gesture-handler and react-native-reanimated libraries: I want to drag the sticker around with my finger to place it anywhere on the photo, and double-tap it to double its size (double-tapping again should shrink it back). The movement and resizing should animate smoothly.
你应该看到的内容:用手指在照片上拖动表情符号,双击它可以放大或缩小。
这一步是对你角色的一个很好的提醒:代理可以读取它自己的代码,但它无法感受手势。只有你可以确认拖动是否正确。如果贴纸出现延迟、跳动或弹回,请准确地向代理描述这些情况。
🌐 This step is a good reminder of your role: the agent can read its own code, but it can't feel a gesture. Only you can confirm that dragging feels right. If the sticker lags, jumps, or snaps back, describe exactly that to the agent.
如果结果与你预期的不符,请告诉代理你看到的情况。当出现异常情况部分有操作指南。
概括
🌐 Summary
Chapter 4: Add stickers
你的照片现在戴上了一个可拖动、可调整大小的表情贴纸。唯一缺少的就是一种保存你作品的方法。
在下一章中,你将把装饰过的照片保存到你手机的照片库中。