安装 Expo 路由

了解如何通过使用 Expo Router 创建新项目或将库添加到现有项目来快速入门。

请按照以下步骤使用 Expo Router 库创建新项目或将其添加到现有项目中。

¥Find the steps below to create a new project with Expo Router library or add it to your existing project.

快速开始

¥Quick start

We recommend creating a new Expo app using create-expo-app to create a project with Expo Router library already installed and configured:

!!!IG6!!!

Now, you can start your project by running:

!!!IG7!!!

To view your app on a mobile device, we recommend starting with Expo Go. As your application grows in complexity and you need more control, you can create a development build.
Open the project in a web browser by pressing w in the Terminal UI. Press a for Android (Android Studio is required), or i for iOS (macOS with Xcode is required).

Manual installation

Follow the steps below if you have a project that was previously created with Expo but does not have Expo Router library installed.

Prerequisites

Make sure your computer is set up for running an Expo app.

Install dependencies

You'll need to install the following dependencies:

!!!IG11!!!

The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.

Setup entry point

For the property main, use the expo-router/entry as its value in the package.json. The initial client file is app/_layout.tsx.

!!!IG0!!!

Custom entry point to initialize and load side-effects

You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (app/_layout.tsx). Below are some of the common cases for a custom entry point:

Initializing global services like analytics, error reporting, and so on.
Setting up polyfills
Ignoring specific logs using LogBox from react-native

Create a new file in the root of your project, such as index.js. After creating this file, the project structure should look like this:

!!!IG10!!!

Import or add your custom configuration to the file. Then, import expo-router/entry to register the app entry. Remember to always import it last to ensure all configurations are properly set up before the app renders.

!!!IG1!!!

Update the main property in package.json to point to the new entry file.

!!!IG2!!!

Modify project configuration

Add a deep linking scheme in your app config:

!!!IG3!!!

If you are developing your app for web, install the following dependencies:

!!!IG8!!!

Then, enable Metro web support by adding the following to your app config:

!!!IG4!!!

Modify babel.config.js

Ensure you use babel-preset-expo as the preset, in the babel.config.js file or delete the file:

!!!IG5!!!

Clear bundler cache

After updating the Babel config file, run the following command to clear the bundler cache:

!!!IG9!!!

Update resolutions

If you're upgrading from an older version of Expo Router, ensure you remove all outdated Yarn resolutions or npm overrides in your package.json. Specifically, remove metro, metro-resolver, react-refresh resolutions from your package.json.