文档 • 妇女 快开始 • 妇女 API 参考 • 妇女 释放
@ label/ 导航
站台拥有导航功能. 反应描述.
@apexnative/navigation 给平台本身的导航提供反应原生应用程序. 堆叠、分页、模式、侧面
菜单、分割视图和覆盖是iOS和Android的真实容器: UINavigationController, (中文(简体) ),
UITabBarController床单和床单, UISplitViewController,Android后堆和材料组件.
您用 TypeScript 描述屏幕, 以及屏幕的排列方式; 本地侧显示屏幕并返回报告 .
状态 : npm上的预发; API在1.0前仍然可以更改. 当前版本在 页 次。 。 。 .
为什么
平台已经知道如何导航. iOS和Android对手势有多年的决定, 可访问性,每个屏幕大小,内存和多任务. 保持自己的导航模式的路由器必须 在JavaScript中镜像所有这一切,并赶上每一个OS发布. 这个库让 React 平台自己的 容器而不是替换它们,所以一个新的标签栏或OS工具栏会带着它的β而来,而不是一年后.
本地人的行为,不只是本地人的样子. 刷回,后键和拖取工作表是系统的 本身,具有与斯威夫特或克特林所写的应用程序相同的过渡,可访问性和内存使用. 没什么 在React中被重放为状态副本:JavaScript通过事件和钩子来读取平台状态.
说明,不要指挥. 本地导航通常以 JSON 版式和字符串 ids 说话,所以一个错误的屏幕名称 或丢失道具在运行时出现. 这里的屏幕,道具和根被键入,同样的错误是错误在 编辑.
| React 树上的路由器 | 按命令进行本地导航 | 这个图书馆 | |
|---|---|---|---|
| 谁是国家的主人 | 反应树上的对象 | 监督办 | 监督办 |
| 手势 | 原生或取自JS,同步回React | 系统本身 | 系统本身 |
| 你如何导航 | 导航器组件或文件作为 URL | JSON 版式和屏幕 ID | Stack, (中文(简体) ), Tabs, (中文(简体) ), SideMenu; 没有编号的命令 |
| 类型 | 输入的路由参数 | 字符串、 道具不受限制 | 检查名称、道具和根 |
仔细看看
屏幕是一个包含选项的组件:
import { Text } from 'react-native';
import { defineScreen } from '@apexnative/navigation';
function Details({ title }: { title?: string }) {
return <Text>{title ?? 'Details'}</Text>;
}
export const DetailsScreen = defineScreen({
component: Details,
options: (s, props) => s.title(props.title ?? 'Details'),
});
导航将屏幕和根命名为:
import { createNavigation } from '@apexnative/navigation';
export const Navigation = createNavigation({
screens: { Home: HomeScreen, Details: DetailsScreen },
root: 'Home',
});
任何屏幕都会打开另一个带有平台自身过渡功能的屏幕:
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 现在 |
| 网页 | 不是目标 |
安装
npm install @apexnative/navigation
npx apex-navigation setup
setup 显示本地文件中和本地文件中的变化 index.js,在写入前询问,并在一个
麦克 一个新的应用开始于 npx @apexnative/navigation init MyApp,以及 npx apex-navigation doctor 检查应用程序
机器和修复它所能。 这个 安装指南
有细节,和 快速开始 构建第一个应用程序
并用两屏.
来自另一个图书馆: 反应导航, (中文(简体) ), 曝光路由器, (中文(简体) ), 反应-内在导航。 。 。 .
原则
- 站台引领. 原生堆栈,分页,活页和手势,不是网络式路由器. URL 是一个切入点 在驱动通知、部件和快捷键中.
- 土著是真理的来源. 导航状态、屏幕生命周期、安全区域、键盘和主题来自 操作系统.
- App生命周期为一等. 冷起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 步骤.
- 新的OS特性,快. 支持新的iOS和Android与β一起放出地.
- 定制而不失去本土行为. 首先系统组件的选项, 您自己的本地组件 在本地的容器内.
- 表现是一项要求. 过渡和手势在本地运行; JavaScript 仍然远离关键路径.
- 变相和逻辑分开. 反应使屏幕。 应用程序的逻辑( 套接字、 会话、 服务) 存在
成像树外:
navigation在反射器外工作,和willMount在第一个程序之前准备应用程序 屏幕.
当其中两个拉开后,命令决定.
捐款
这个 显示大小写应用程序 每个功能都作为情景运行. 见 捐款额 编辑 行为守则。 。 。 .