Skip to main content
Version: 6.x

导航解决方案和社区库

注意

本指南中列出的库可能尚未更新以支持最新版本的 React Navigation。请参阅该库的文档以了解它支持哪个版本的 React Navigation。

¥Libraries listed in this guide may not have been updated to work with the latest version of React Navigation. Please refer to the library's documentation to see which version of React Navigation it supports.

基于 React Navigation 构建的解决方案

¥Solutions built on top of React Navigation

索利托

¥Solito

React Navigation 和 Next.js 的小型封装器,可让你跨平台共享导航代码。此外,它还提供了一组使用 React Native + Next.js 构建跨平台应用的模式和示例。

¥A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms. Also, it provides a set of patterns and examples for building cross-platform apps with React Native + Next.js.

文档

¥Documentation

github.com/nandorojo/solito

Expo 路由

¥Expo Router

React Native 应用的基于文件的路由。使用 Expo Router,只需在项目中创建文件即可自动生成页面。

¥File-based router for React Native apps. With Expo Router pages are automatically generated by simply creating files in a project.

文档

¥Documentation

github.com/expo/router

¥Navio

构建在 React Navigation 之上的导航库。它的主要目标是通过在一个地方构建应用布局并使用 TypeScript 的强大功能提供路由名称自动补齐来改进 DX。

¥A navigation library built on top of React Navigation. It's main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion.

github.com/kanzitelli/rn-navio

Snack 演示

¥Demo on Snack

社区库

¥Community libraries

react-native-screens

该项目旨在向 React Native 公开原生导航容器组件,并且从 2.14.0 版本开始,React Navigation 可以与其集成。使用 react-native-screens 带来了多项好处,例如在 iOS 上支持 "可达性特性",以及改善两个平台上的内存消耗。

¥This project aims to expose native navigation container components to React Native and React Navigation can integrate with it since version 2.14.0. Using react-native-screens brings several benefits, such as support for the "reachability feature" on iOS, and improved memory consumption on both platforms.

github.com/software-mansion/react-native-screens

react-navigation-header-buttons

帮助你在导航栏中呈现按钮并处理样式,这样你就不必这样做。它尝试模仿原生导航栏按钮的外观,并尝试提供一个简单的界面供你交互。

¥Helps you to render buttons in the navigation bar and handle the styling so you don't have to. It tries to mimic the appearance of native navbar buttons and attempts to offer a simple interface for you to interact with.

github.com/vonovak/react-navigation-header-buttons

expo 演示

¥Demo on expo

react-navigation-props-mapper

提供简单的 HOC,将 React 导航属性直接映射到屏幕组件 - IE。你可以写 const user = this.props.activeUser,而不是 const user = this.props.route.params.activeUser

¥Provides simple HOCs that map react-navigation props to your screen components directly - ie. instead of const user = this.props.route.params.activeUser, you'd write const user = this.props.activeUser.

github.com/vonovak/react-navigation-props-mapper