首页指南参考教程

项目结构

了解创建新 Expo 项目时的文件和文件夹结构。


当你创建新的 Expo 项目时,默认情况下会提供一些文件和文件夹。此页面列出了开发应用时你需要了解的基本文件和文件夹。

¥When you create a new Expo project, a few files and folders are provided by default. This page lists out the essential files and folders that are necessary for you to understand when developing your app.

App.js

App.js 文件是项目的默认屏幕。它是使用 npx expo start 运行开发服务器后加载的根文件。你可以编辑此文件以立即查看项目更新。一般来说,该文件将包含根级 React 上下文和导航。

¥The App.js file is the default screen of your project. It is the root file that loads after running the development server with npx expo start. You can edit this file to see the project update instantly. Generally, this file will contain root-level React Contexts and navigation.

Expo 路由 现已推出,并支持项目中基于文件的导航。使用 Expo Router,根文件(App.js)将变为 index.js,项目中的所有屏幕都将位于 app 文件夹中。

¥Expo Router is now available and supports file-based navigation in projects. With Expo Router, the root file (App.js) will become index.js, and all the screens in the project will be in the app folder.

app.json

app.json 文件包含项目的 配置选项。除了构建、提交和更新我们的应用之外,这些选项还会在开发时更改项目的行为。

¥The app.json file contains configuration options for the project. These options change the behavior of your project while developing, in addition to while building, submitting, and updating our app.

安装我们的 VS Code Expo 工具 扩展以获得智能感知。

¥Install our VS Code Expo Tools extension to get intellisense.

资源文件夹

¥assets folder

资源文件夹包含用于 Android 的 Adaptive-icon.png 和用于 iOS 的 icon.png 作为应用图标。它还包含 splash.png(项目启动屏幕的图片)和 favicon.png(如果应用在浏览器中运行)。

¥The assets folder contains adaptive-icon.png used for Android and an icon.png used for iOS as an app icon. It also contains splash.png which is an image for the project's splash screen and a favicon.png if the app runs in a browser.

The assets 目录不是特殊情况,我们的项目可以将图片和其他资源放置在项目结构中的任何位置。

¥directory is not special-cased, and our project can have images and other assets placed anywhere in our project structure.

其他标准文件

¥Other standard files

下面列出的标准文件是使用 Expo CLI 创建的每个项目的一部分。你可以编辑它们来自定义你的项目。

¥The standard files listed below are part of every project created with Expo CLI. You can edit them to customize your project.

.gitignore

.gitignore 允许你列出不希望 Git 跟踪的文件和文件夹。你可以修改这些文件以列出项目中的其他文件和文件夹。一般来说,默认列表对于大多数项目来说就足够了。

¥A .gitignore allows you to list files and folders that you don't want to be tracked by Git. You can modify the files to list other files and folders in your project. Generally, the default list is sufficient for most projects.

babel.config.js

应用 babel-preset-expo 预设,该预设扩展了默认的 React Native 预设,并添加了对装饰器、tree-shaking Web 包的支持,以及加载带有可选原生依赖的字体图标(如果已安装)。你还可以修改此文件以添加其他 Babel 插件或预设。

¥Applies the babel-preset-expo preset that extends the default React Native preset and adds support for decorators, tree-shaking web packages, and loading font icons with optional native dependencies if they're installed. You can also modify this file to add additional Babel plugins or presets.

package.json

package.json 文件包含项目的依赖、脚本和元数据。每当将新的依赖添加到你的项目时,它都会添加到此文件中。

¥The package.json file contains the project's dependencies, scripts and metadata. Anytime a new dependency is added to your project, it will be added to this file.

你还可以修改 scripts 以添加或删除它们。提供了四个默认脚本来触发项目的开发服务器,例如 expo startexpo start --androidexpo start --iosexpo start --web

¥You can also modify the scripts to add or remove them. Four default scripts are provided to trigger the development server of your project such as expo start, expo start --android, expo start --ios, and expo start --web.

Expo 中文网 - 粤ICP备13048890号