导航解决方案和社区库
本指南中列出的库可能尚未更新以与最新版本的 React Navigation 兼容。请参阅库的文档以查看它支持的 React Navigation 版本。
构建于 React Navigation 之上的解决方案
Solito
React Navigation 和 Next.js 的一个微小封装器,可让您跨平台共享导航代码。此外,它还提供了一组使用 React Native + Next.js 构建跨平台应用程序的模式和示例。
Expo Router
用于 React Native 应用程序的基于文件的路由器。借助 Expo Router,只需在项目中创建文件即可自动生成页面。
Navio
一个构建在 React Navigation 之上的导航库。它的主要目标是通过在一个地方构建应用程序布局并利用 TypeScript 的强大功能来提供路由名称自动完成功能,从而改善 DX。
github.com/kanzitelli/rn-navio
社区库
react-native-paper
React Native Paper 库为其 Material Bottom Tabs 提供了 React Navigation 集成。Material Bottom Tabs 是屏幕底部的 Material Design 主题标签栏,可让您在不同的路由之间切换,并带有动画效果。
callstack.github.io/react-native-paper/docs/guides/bottom-navigation
react-native-screens
该项目旨在向 React Native 公开原生导航容器组件,并且 React Navigation 自 2.14.0 版本起可以与之集成。使用 react-native-screens
带来了几个好处,例如支持 iOS 上的 “便捷访问功能”,以及改进了两个平台上的内存消耗。
github.com/software-mansion/react-native-screens
react-navigation-header-buttons
帮助你在导航栏中渲染按钮并处理样式,这样你就无需自己处理。它尝试模仿原生导航栏按钮的外观,并尝试为你提供一个简单的交互界面。
github.com/vonovak/react-navigation-header-buttons
react-navigation-props-mapper
提供简单的 HOC,将 react-navigation props 直接映射到你的屏幕组件 - 即。你将编写 const user = this.props.activeUser
,而不是 const user = this.props.route.params.activeUser
。
github.com/vonovak/react-navigation-props-mapper
react-native-bottom-tabs
该项目旨在向 React Native 公开原生底部标签组件。它在 iOS 上公开 SwiftUI 的 TabView,在 Android 上公开 Material Design 标签栏。使用 react-native-bottom-tabs
可以带来一些好处,包括多平台支持和原生感觉的标签栏。