文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn
存档Expo SnackDiscord and forums新闻邮件

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

添加导航标签页

大多数应用不止一个屏幕，底部会有标签页用于在它们之间切换。将以下提示粘贴到你的代理中：

Prompt
Add a tab bar to the app with two tabs: a Home tab showing the current home screen, and an About tab with a screen that says "About screen" for now. Use Expo Router for navigation. Style everything with a dark theme: the color #25292e for the screen backgrounds, headers, and tab bar, white text, and yellow (#ffd33d) as the color of the selected tab. Give each tab a fitting icon from the @expo/vector-icons library, such as a house for Home and an info circle for About.

你应该看到的效果：应用底部有一个包含 Home 和 About 的标签栏。你所在的标签会以黄色高亮，点击另一个标签会切换屏幕：

2

添加照片查看器

接下来，为主页添加主要内容：一张大照片和两个按钮。我们已经准备好了一个资源包，里面包含占位照片和你后面会用到的 emoji 贴纸。将以下提示粘贴到你的代理中：

Prompt
Download the image assets needed for this app from https://docs.expo.dev/static/images/tutorial/sticker-smash-assets.zip and extract them to the assets/images folder, replacing any files with the same names. Then improve the Home screen: display the background-image.png image large and centered on the screen, with rounded corners; stack two buttons vertically below it: “Choose a photo” — a prominent button with a yellow border, white background, dark text, and a small image icon — and a regular “Use this photo” button with white text. Use the expo-image library to display the image.
想自己下载资源吗？

如果你的代理无法下载或解压文件，你可以手动完成：下载 sticker-smash-assets.zip，解压后，将图片复制到 StickerSmash 文件夹中的 assets/images 文件夹里，替换任何同名文件。然后让代理使用上面的提示来构建这个屏幕，但去掉它的第一句话。

你应该看到的效果：一张横跨海面的木质栈道照片占据屏幕的大部分区域，下面有两个按钮：

3

从相册中选择照片

现在到了第一个真正的功能：选择你自己的照片。将以下提示粘贴到你的代理中：

Prompt
Add the expo-image-picker library. When I tap “Choose a photo”, open the device's photo library so I can select an image, and display the image I choose in place of the placeholder. If I cancel without selecting anything, keep showing the current photo.

你应该看到的效果：点击 Choose a photo 会打开手机相册。第一次时，手机会请求访问照片的权限。点击 Allow。你选中的照片会替换占位照片。

如果结果与你预期不符，请告诉代理你看到的内容。上一章中的 当显示不对时 部分提供了应对方法。

摘要

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.

Next: Chapter 4: Add stickers