Expo 路由

Expo Router 子模块提供无头选项卡组件来创建自定义选项卡布局。

expo-router/ui 是 expo-router 库的一个子模块，它导出组件和钩子来构建自定义选项卡布局，而不是使用 expo-router 提供的默认 React 导航 导航器。

¥expo-router/ui is a submodule of expo-router library and exports components and hooks to build custom tab layouts, rather than using the default React Navigation navigators provided by expo-router.

查看 Expo 路由 参考以获取有关原生和 Web 应用的基于文件的路由库的更多信息。

¥See the Expo Router reference for more information about the file-based routing library for native and web app.

安装

¥Installation

要在项目中使用 expo-router/ui，你需要在项目中安装 expo-router。请按照 Expo Router 安装指南中的说明操作：

¥To use expo-router/ui in your project, you need to install expo-router in your project. Follow the instructions from the Expo Router's installation guide:

应用配置中的配置

¥Configuration in app config

如果你使用 default 模板创建新项目，则 expo-router 配置插件 会自动在应用配置中配置。

¥If you are using the default template to create a new project, expo-router config plugin is automatically configured in the app config automatically.

Example app.json with config plugin

{
"expo": {
  "plugins": ["expo-router"]
}
}

用法

¥Usage

有关自定义标签页布局指南中使用 expo-router/ui 的信息：

¥For information about using expo-router/ui in Custom tab layouts guide:

API

import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';

Components

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

<Tabs>
 <TabSlot />
 <TabList>
  <TabTrigger name="home" href="/" />
 </TabList>
</Tabs>

function MyTabSlot() {
  const slot = useTabSlot();

  return slot;
}

Hooks

function MyTabSlot() {
  const slot = useTabSlot();

  return slot;
}

export function MyTabs({ children }) {
 const { NavigationContent } = useTabsWithChildren({ children })

 return <NavigationContent />
}

export function MyTabs({ children }) {
  const { NavigationContent } = useTabsWithChildren({ triggers: [] })

  return <NavigationContent />
}

Types