中文网
🌐 Nodejs.cn
首页指南EAS参考学习

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：两个导航标签页、一个照片浏览器，以及一个打开手机照片库的按钮。

🌐 In this chapter, the app starts to look like StickerSmash: two navigation tabs, a photo viewer, and a button that opens your phone's photo library.

1

添加导航标签

🌐 Add navigation tabs

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

🌐 Most apps have more than one screen, with tabs along the bottom to switch between them. Paste the following prompt into your agent:

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.

你应该看到的内容：应用底部有一个带有首页和关于标签的标签栏。你所在的标签会以黄色高亮，点击另一个标签会切换屏幕：

2

添加照片查看器

🌐 Add the photo viewer

接下来，为主屏幕提供其主要内容：一张大照片和两个按钮。我们已经准备好了一个包含占位照片和你稍后使用的表情贴纸的素材包。将以下提示粘贴到你的代理中：

🌐 Next, give the home screen its main content: a large photo and two buttons. We've prepared an asset pack with the placeholder photo and the emoji stickers you'll use later. Paste the following prompt into your agent:

Prompt
Download the image assets for this app from https://expo.nodejs.cn/static/images/tutorial/sticker-smash-assets.zip and extract them into the assets/images folder, replacing any files with the same names. Then build out the Home screen: show the background-image.png photo large in the center of the screen with rounded corners, and below it two buttons stacked vertically: "Choose a photo" — a prominent button with a yellow border, a white background, a dark label, and a small picture icon — and a plain "Use this photo" button with white text. Use the expo-image library to display the image.
想自己下载资源吗？

如果你的代理无法下载或解压文件，请手动操作：下载 sticker-smash-assets.zip，解压它，然后将图片复制到你的 StickerSmash 文件夹内的 assets/images 文件夹中，替换同名文件。然后请代理根据上面的提示构建屏幕，但去掉提示的第一句。

🌐 If your agent can't download or extract the file, do it manually: download sticker-smash-assets.zip, unzip it, and copy the images into the assets/images folder inside your StickerSmash folder, replacing files with the same names. Then ask the agent to build the screen with the prompt above, minus its first sentence.

你应该看到的内容：一张几乎填满整个屏幕的木质栈道横跨海洋的照片，下面有两个按钮：

3

从你的相册中选择一张照片

🌐 Pick a photo from your library

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

🌐 Time for the first real feature: choosing your own photo. Paste the following prompt into your agent:

Prompt
Add the expo-image-picker library. When I tap "Choose a photo", open my phone's photo library so I can pick an image, and show the one I pick in place of the placeholder photo. If I cancel without picking anything, keep showing the current photo.

你应该看到的内容：点击 选择照片 会打开你手机的照片库。第一次操作时，手机会请求访问你的照片权限。点击 允许。你选择的照片会替换占位照片。

如果结果与你预期的不符，请告诉代理你看到的内容。上一章的当某些东西看起来不对时部分有操作手册。

概括

🌐 Summary

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.

下一个：Chapter 4: Add stickers