导航解决方案和社区库
本指南中列出的库可能尚未更新以支持最新版本的 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.
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.
纳维奥
¥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
社区库
¥Community libraries
react-native-paper
React Native 论文 库为其 Material Bottom Tabs 提供 React Navigation 集成。Material Bottom Tabs 是屏幕底部的 Material Design 主题选项卡栏,可让你使用动画在不同路由之间切换。
¥The React Native Paper library provides React Navigation integration for its Material Bottom Tabs. Material Bottom Tabs is a material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation.
callstack.github.io/react-native-paper/docs/guides/bottom-navigation
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
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
react-native-bottom-tabs
该项目旨在将原生的 Bottom Tabs 组件公开给 React Native。它在 iOS 上公开 SwiftUI 的 TabView,在 Android 上公开材料设计标签栏。使用 react-native-bottom-tabs
可以带来多种好处,包括多平台支持和原生感觉的标签栏。
¥This project aims to expose the native Bottom Tabs component to React Native. It exposes SwiftUI's TabView on iOS and the material design tab bar on Android. Using react-native-bottom-tabs
can bring several benefits, including multi-platform support and a native-feeling tab bar.