在 Expo 和 React Native 应用中的导航

了解在 Expo 和 React Native 项目中集成导航的推荐方法。


核心的 React Native 库不包含内置的导航解决方案,因此你可以选择最适合你需求的导航库。对于 Expo 和 React Native 应用,通常的选择是 React NavigationExpo Router

🌐 The core React Native library does not include a built-in navigation solution, so you can choose a navigation library that best fits your needs. For Expo and React Native apps, it is generally a choice between React Navigation or Expo Router.

为什么 React Native 应用需要导航库

🌐 Why React Native apps needs a navigation library

React Native 核心包括基本的 UI 组件、触摸处理、设备 API 和网络功能,但不包括存储、相机、地图、大多数设备传感器以及 导航 等功能!这些功能由社区库提供支持。

🌐 React Native core includes basic UI components, touch handling, device APIs and networking, but excludes, among other things, storage, camera, maps, most device sensors, and navigation! These are intended to be covered by community libraries.

React 导航

🌐 React Navigation

React Navigation 是一个基于组件的导航库,在整个 React Native 生态系统中被广泛使用。它允许你完全通过代码组合堆栈、标签和抽屉导航器,从而实现复杂的流程、自定义过渡效果以及应用特定的用户体验模式。

🌐 React Navigation is a component-based navigation library widely used across the React Native ecosystem. It lets you compose stack, tab, and drawer navigators entirely in code so you can implement complex flows, custom transitions, and app-specific UX patterns.

该库提供针对特定平台的界面风格,带有流畅的动画和手势,统一的移动端和网页路由,自动深度链接、静态配置的类型路由,并且高度可定制。

🌐 The library offers platform-specific look-and-feel with smooth animations and gestures, unified mobile and web routing, automatic deep links, type routes with static configuration, and is highly customizable.

React Navigation:入门

了解如何开始使用 React Navigation。

Expo 路由(建议用于 Expo 项目)

🌐 Expo Router (recommended for Expo projects)

Expo Router 是一个基于文件的路由库,适用于 Expo 和 React Native 项目,并且构建在 React Navigation 之上。通过遵循 app 目录约定,它将文件转换为路由,并与 Expo 集成,用于 Expo CLI 和打包,无需额外设置。该库还增加了诸如类型化路由、动态路由、开发中的延迟打包、网页静态渲染以及自动深度链接等功能。

🌐 Expo Router is a file-based routing library for Expo and React Native projects and is a built on top of React Navigation. By following the app directory convention, it turns files into routes and is integrated with Expo for Expo CLI and bundling without additional setup. The library also adds features such as typed routes, dynamic routes, lazy bundling in development, static rendering for the web, and automatic deep linking.

使用 npx create-expo-app@latest 创建的新 Expo 项目默认包含 Expo Router,因此你可以快速实现跨平台导航,同时在需要时仍然可以使用 React Navigation API。

🌐 New Expo projects created with npx create-expo-app@latest include Expo Router by default so you can ship cross-platform navigation quickly while still being able to reach for React Navigation APIs when needed.

Expo 路由简介

Expo Router 是一个开源路由库,适用于使用 Expo 构建的 Universal React Native 应用。

安装

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

核心理念

了解 Expo 中文件路由的核心概念。