This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
构建主屏幕
编辑页面
在本章中，指导你的 AI 代理添加标签导航、照片查看器和图像选择器。
在这一章中，应用开始看起来像 StickerSmash：两个导航标签页、一个照片查看器，以及一个可以打开手机相册的按钮。
1
添加导航标签页
大多数应用不止一个屏幕，底部会有标签页用于在它们之间切换。将以下提示粘贴到你的代理中：
为应用添加一个包含两个标签页的标签栏：一个 Home 标签页，显示当前主页；一个 About 标签页，当前先显示一个写着“About screen”的屏幕。使用 Expo Router 进行导航。整体使用深色主题：屏幕背景、标题栏和标签栏都使用 #25292e，文字使用白色，选中标签的颜色使用黄色（#ffd33d）。给每个标签页配上合适的图标，例如 Home 用房子图标，About 用信息圆圈图标。
你应该看到的效果：应用底部有一个包含 Home 和 About 的标签栏。你所在的标签会以黄色高亮，点击另一个标签会切换屏幕：
2
添加照片查看器
接下来，为主页添加主要内容：一张大照片和两个按钮。我们已经准备好了一个资源包，里面包含占位照片和你后面会用到的 emoji 贴纸。将以下提示粘贴到你的代理中：
从 https://docs.expo.dev/static/images/tutorial/sticker-smash-assets.zip 下载这个应用所需的图片资源，并将它们解压到 assets/images 文件夹中，替换任何同名文件。然后完善 Home 屏幕：在屏幕中央显示 background-image.png 大图，使用圆角；在它下方竖直排列两个按钮：“Choose a photo”——一个醒目的按钮，带黄色边框、白色背景、深色文字，以及一个小图片图标——以及一个普通的“Use this photo”按钮，白色文字。使用 expo-image 库来显示这张图片。
想自己下载资源吗？
如果你的代理无法下载或解压文件，你可以手动完成：下载 sticker-smash-assets.zip，解压后，将图片复制到 StickerSmash 文件夹中的 assets/images 文件夹里，替换任何同名文件。然后让代理使用上面的提示来构建这个屏幕，但去掉它的第一句话。
你应该看到的效果：一张横跨海面的木质栈道照片占据屏幕的大部分区域，下面有两个按钮：
3
如果结果与你预期不符，请告诉代理你看到的内容。上一章中的 当显示不对时 部分提供了应对方法。
摘要
Chapter 3: Build the home screen
The app now has navigation, a styled home screen, and a working photo picker. You haven't touched a line of code.
In the next chapter, you'll add an emoji picker modal and play with the sticker using gestures.