# @apexnative/navigation 中文文档 规范地址：https://npmcn.com/package/%40apexnative/navigation/ 版本：1\.0\.0-alpha\.11 npm 元数据更新时间：2026-10-31T07:55:43.784Z 中文译文更新时间：2026-11-07T06:28:15.597Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40apexnative/navigation 原文对照：https://npmcn.com/package/%40apexnative/navigation/?lang=original 项目主页：https://github.com/apexnative/navigation#readme 源码仓库：https://github.com/apexnative/navigation ## 关键信息（来自 npm 元数据） - 包体积（解压后）：7.3 MB，1442 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \*，react-native \>=0\.85\.0 - 首次发布：2026-10-21T19:44:33.363Z - 最新版本发布：2026-10-31T07:55:43.397Z - 近 30 天下载量：2038（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：13（近 12 个月 13 个） ## 中文简介 React Industrial 的原生导航:平台堆栈,制表符,模式和在iOS,iPadOS和Android上的侧菜单 ## 安装 ```sh npm install @apexnative/navigation ``` 也可以使用：`pnpm add @apexnative/navigation`、`yarn add @apexnative/navigation`、`bun add @apexnative/navigation` ## README ![@apexnative/navigation: native navigation for React Native on iOS, iPadOS and Android](https://raw.githubusercontent.com/apexnative/navigation/main/.github/assets/navigation-banner-light.png) [![npm version](https://img.shields.io/npm/v/@apexnative/navigation?label=npm&color=cb3837)](https://www.npmjs.com/package/@apexnative/navigation) [![npm downloads](https://img.shields.io/npm/dm/@apexnative/navigation)](https://www.npmjs.com/package/@apexnative/navigation) [![CI](https://img.shields.io/github/actions/workflow/status/apexnative/navigation/ci.yml?branch=main&label=CI)](https://github.com/apexnative/navigation/actions/workflows/ci.yml) ![Platforms: iOS, iPadOS, Android](https://img.shields.io/badge/platforms-iOS%20%7C%20iPadOS%20%7C%20Android-informational) ![React Native 0.85 or newer, New Architecture](https://img.shields.io/badge/React%20Native-0.85%2B%20%C2%B7%20New%20Architecture-61dafb) ![TypeScript types included](https://img.shields.io/npm/types/@apexnative/navigation) [![License: MIT](https://img.shields.io/npm/l/@apexnative/navigation)](https://github.com/apexnative/navigation/blob/main/LICENSE) [**文档**](https://navigation.apexnative.dev/docs/start/introduction) • 妇女 [快开始](https://navigation.apexnative.dev/docs/start/quick-start) • 妇女 [API 参考](https://navigation.apexnative.dev/api/starting-the-app/createNavigation) • 妇女 [释放](https://github.com/apexnative/navigation/releases) # @ label/ 导航 **站台拥有导航功能. 反应描述.** `@apexnative/navigation` 给平台本身的导航提供反应原生应用程序. 堆叠、分页、模式、侧面 菜单、分割视图和覆盖是iOS和Android的真实容器: `UINavigationController`, (中文(简体) ), `UITabBarController`床单和床单, `UISplitViewController`,Android后堆和材料组件. 您用 TypeScript 描述屏幕, 以及屏幕的排列方式; 本地侧显示屏幕并返回报告 . > **状态 :** npm上的预发; API在1.0前仍然可以更改. 当前版本在 [页 次](https://github.com/apexnative/navigation/releases)。 。 。 . ## 为什么 **平台已经知道如何导航.** iOS和Android对手势有多年的决定, 可访问性,每个屏幕大小,内存和多任务. 保持自己的导航模式的路由器必须 在JavaScript中镜像所有这一切,并赶上每一个OS发布. 这个库让 React 平台自己的 容器而不是替换它们,所以一个新的标签栏或OS工具栏会带着它的β而来,而不是一年后. **本地人的行为,不只是本地人的样子.** 刷回,后键和拖取工作表是系统的 本身,具有与斯威夫特或克特林所写的应用程序相同的过渡,可访问性和内存使用. 没什么 在React中被重放为状态副本:JavaScript通过事件和钩子来读取平台状态. **说明,不要指挥.** 本地导航通常以 JSON 版式和字符串 ids 说话,所以一个错误的屏幕名称 或丢失道具在运行时出现. 这里的屏幕,道具和根被键入,同样的错误是错误在 编辑. | | React 树上的路由器 | 按命令进行本地导航 | 这个图书馆 | | --- | --- | --- | --- | | **谁是国家的主人** | 反应树上的对象 | 监督办 | 监督办 | | **手势** | 原生或取自JS,同步回React | 系统本身 | 系统本身 | | **你如何导航** | 导航器组件或文件作为 URL | JSON 版式和屏幕 ID | `Stack`, (中文(简体) ), `Tabs`, (中文(简体) ), `SideMenu`; 没有编号的命令 | | **类型** | 输入的路由参数 | 字符串、 道具不受限制 | 检查名称、道具和根 | ## 仔细看看 屏幕是一个包含选项的组件: ```tsx import { Text } from 'react-native'; import { defineScreen } from '@apexnative/navigation'; function Details({ title }: { title?: string }) { return {title ?? 'Details'}; } export const DetailsScreen = defineScreen({ component: Details, options: (s, props) => s.title(props.title ?? 'Details'), }); ``` 导航将屏幕和根命名为: ```ts import { createNavigation } from '@apexnative/navigation'; export const Navigation = createNavigation({ screens: { Home: HomeScreen, Details: DetailsScreen }, root: 'Home', }); ``` 任何屏幕都会打开另一个带有平台自身过渡功能的屏幕: ```ts const navigation = useNavigation(); navigation.push('Details', { props: { title: 'Order 42' } }); // navigation.push('Detail') or a prop Details doesn't take: a TypeScript error ``` ## 里面有什么东西 - **集装箱:** 本地堆栈、标签、模式和工作表、侧菜单、在 iPad 上分割视图以及覆盖、嵌入 彼此:堆栈的分页,模式中的堆栈,侧菜单中的分页. - **屏幕 UI 作为选项 :** 上边栏、条按钮、搜索、工具栏和浮动动作按钮、状态 栏和系统栏. - **无安全区域代码 :** 每个屏幕都保持其上下两侧的屏障和剪接本身;底部是免费的,并添加一个列表 `useSafeAreaInsets().bottom`。 。 。 . - **原生屏幕 :** SwiftUI, UIKit 和 Confose 屏幕被按下、 呈现和放入标签与 React 相同的方式 屏幕. - **一个反应树当你想要它:** 每个屏幕默认为自己的反作用根; 与 `appProvider` 所有屏幕 共享一棵树. - **该应用的生命周期:** 冷起步、放出屏幕、深层链接、通知和在登录上切换根 和注册. - **国家行动倡议**, (中文(简体) ), `apex-navigation`:设置一个应用程序,检查它(`doctor`),添加屏幕、深链接、图标和溅出 屏幕,升级导航,从另一个导航库迁移一个应用程序,并为命令和 向 AI 编码代理 提供文件`mcp`) (中文(简体) ). ## 当它适合 - 在iPhone,iPad和Android上,应该看起来像平台的样子和行为. - 有本土屏幕的Apps,或者一个同样写作斯威夫特或克特林的团队. - 应用中启动,过渡和内存都很重要. 它不适应一个同样飞入网络的应用程序, 或一个在每一个平台上 绘制相同的完全定制的用户界面 Java脚本. ## 所需资源 | | | | --- | --- | | 原生反应 | 0.85或更新,新建筑(无桥,法布里克) | | iOS 和 iPadOS 系统 | 15.1或较新 | | 机器人 | 7.0或较新(MinSdk 24) | | 博览 | 不为 `setup` 现在 | | 网页 | 不是目标 | ## 安装 ```sh npm install @apexnative/navigation npx apex-navigation setup ``` `setup` 显示本地文件中和本地文件中的变化 `index.js`,在写入前询问,并在一个 麦克 一个新的应用开始于 `npx @apexnative/navigation init MyApp`,以及 `npx apex-navigation doctor` 检查应用程序 机器和修复它所能。 这个 [安装指南](https://navigation.apexnative.dev/docs/start/installation) 有细节,和 [快速开始](https://navigation.apexnative.dev/docs/start/quick-start) 构建第一个应用程序 并用两屏. 来自另一个图书馆: [反应导航](https://navigation.apexnative.dev/docs/migration/from-react-navigation), (中文(简体) ), [曝光路由器](https://navigation.apexnative.dev/docs/migration/from-expo-router), (中文(简体) ), [反应-内在导航](https://navigation.apexnative.dev/docs/migration/from-react-native-navigation)。 。 。 . ## 原则 1. **站台引领.** 原生堆栈,分页,活页和手势,不是网络式路由器. URL 是一个切入点 在驱动通知、部件和快捷键中. 2. **土著是真理的来源.** 导航状态、屏幕生命周期、安全区域、键盘和主题来自 操作系统. 3. **App生命周期为一等.** 冷起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 步骤. 4. **新的OS特性,快.** 支持新的iOS和Android与β一起放出地. 5. **定制而不失去本土行为.** 首先系统组件的选项, 您自己的本地组件 在本地的容器内. 6. **表现是一项要求.** 过渡和手势在本地运行; JavaScript 仍然远离关键路径. 7. **变相和逻辑分开.** 反应使屏幕。 应用程序的逻辑( 套接字、 会话、 服务) 存在 成像树外: `navigation` 在反射器外工作,和 `willMount` 在第一个程序之前准备应用程序 屏幕. 当其中两个拉开后,命令决定. ## 捐款 这个 [显示大小写应用程序](https://github.com/apexnative/navigation/tree/main/example) 每个功能都作为情景运行. 见 [捐款额](https://github.com/apexnative/navigation/blob/main/CONTRIBUTING.md) 编辑 [行为守则](https://github.com/apexnative/navigation/blob/main/CODE_OF_CONDUCT.md)。 。 。 . ## 许可证 [麻省理工学院](https://github.com/apexnative/navigation/blob/main/LICENSE) ## 常见问题 ### @apexnative/navigation 是什么？ React Industrial 的原生导航:平台堆栈,制表符,模式和在iOS,iPadOS和Android上的侧菜单 ### 如何安装 @apexnative/navigation？ 在项目目录运行 npm install @apexnative/navigation，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\>=0\.85\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 apex-navigation，可以用 npx apex-navigation 直接运行。 ### @apexnative/navigation 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @apexnative/navigation 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @apexnative/navigation 可以商用吗？ @apexnative/navigation 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @apexnative/navigation 的下载量有多少？ 根据 npm 官方下载统计，@apexnative/navigation 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,038 次，日均约 68 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @apexnative/navigation 还在维护吗？ 最新版本 1\.0\.0-alpha\.11 发布于 2026/10/31（7 天前）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2026/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。