安装 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
1
We recommend creating a new Expo app using create-expo-app to create a project with Expo Router library already installed and configured:
!!!IG6!!!
2
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.
1
2
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
LogBoxfromreact-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/entryto 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
mainproperty in package.json to point to the new entry file.
!!!IG2!!!
3
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!!!
4
Modify babel.config.js
Ensure you use babel-preset-expo as the preset, in the babel.config.js file or delete the file:
!!!IG5!!!
If you're upgrading from a version of Expo Router that is older than v3, remove the plugins: ['expo-router/babel']. expo-router/babel was merged in babel-preset-expo in SDK 50 (Expo Router v3).
5