Expo Router UI

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

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

更新日志

Bundled version:

~5.1.10

expo-router/ui 是 expo-router 库的一个子模块，它导出用于构建自定义标签页布局的组件和 hooks，而不是使用 expo-router 提供的默认 React Navigation 导航器。

有关面向原生和 Web 应用的基于文件路由库的更多信息，请参阅 Expo Router 参考文档。

安装

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

安装 Expo Router

了解如何在你的项目中安装 Expo Router。

在 app 配置中进行配置

如果你正在使用默认模板创建新项目，expo-router 的配置插件已经在你的 app 配置中完成设置。

Example app.json with config plugin

app.json

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

用法

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

自定义标签页布局

API

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

Components

`TabContext`

Android

iOS

tvOS

Web

Type: React.Element<ProviderProps<ExpoTabsNavigatorScreenOptions>>

`TabList`

Android

iOS

tvOS

Web

Type: React.Element<TabListProps>

Wrapper component for TabTriggers. TabTriggers within the TabList define the tabs.

Example

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

TabListProps

`asChild`

Android

iOS

tvOS

Web

Optional • Type: boolean

Forward props to child component and removes the extra <View>. Useful for custom wrappers.

Inherited Props

ViewProps

`Tabs`

Android

iOS

tvOS

Web

Type: React.Element<TabsProps>

Root component for the headless tabs.

See: useTabsWithChildren for a hook version of this component.

Example

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

TabsProps

`asChild`

Android

iOS

tvOS

Web

Optional • Type: boolean

Forward props to child component and removes the extra <View>. Useful for custom wrappers.

`options`

Android

iOS

tvOS

Web

Optional • Type: UseTabsOptions

Inherited Props

ViewProps

`TabSlot`

Android

iOS

tvOS

Web

Type: React.Element<TabSlotProps>

Renders the current tab.

See: useTabSlot for a hook version of this component.

Example

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

TabSlotProps

`detachInactiveScreens`

Android

iOS

tvOS

Web

Optional • Type: boolean

Remove inactive screens.

`renderFn`

Android

iOS

tvOS

Web

Optional • Type: defaultTabsSlotRender

Override how the Screen component is rendered.

Inherited Props

ComponentProps<ScreenContainer>

`TabTrigger`

Android

iOS

tvOS

Web

Type: React.Element<TabTriggerProps>

Creates a trigger to navigate to a tab. When used as child of TabList, its functionality slightly changes since the href prop is required, and the trigger also defines what routes are present in the Tabs.

When used outside of TabList, this component no longer requires an href.

Example

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

TabTriggerProps

`asChild`

Android

iOS

tvOS

Web

Optional • Type: boolean

Forward props to child component. Useful for custom wrappers.

`href`

Android

iOS

tvOS

Web

Optional • Type: Href

Name of tab. Required when used within a TabList.

`name`

Android

iOS

tvOS

Web

Type: string

Name of tab. When used within a TabList this sets the name of the tab. Otherwise, this references the name.

`reset`

Android

iOS

tvOS

Web

Optional • Literal type: union

Resets the route when switching to a tab.

Acceptable values are: SwitchToOptions[reset] | 'onLongPress'

Inherited Props

PressablePropsWithoutFunctionChildren

`useTabSlot`

Android

iOS

tvOS

Web

Type: React.Element<TabSlotProps>

Returns a ReactElement of the current tab.

Example

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

  return slot;
}

Hooks

`useTabSlot(namedParameters)`

Android

iOS

tvOS

Web

Parameter	Type
namedParameters(optional)	`TabSlotProps`

Returns a ReactElement of the current tab.

Returns:

Element

Example

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

  return slot;
}

`useTabsWithChildren(options)`

Android

iOS

tvOS

Web

Parameter	Type
options	`UseTabsWithChildrenOptions`

Hook version of Tabs. The returned NavigationContent component should be rendered. Using the hook requires using the <TabList /> and <TabTrigger /> components exported from Expo Router.

The useTabsWithTriggers() hook can be used for custom components.

See: Tabs for the component version of this hook.

Example

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

 return <NavigationContent />
}

`useTabsWithTriggers(options)`

Android

iOS

tvOS

Web

Parameter	Type
options	`UseTabsWithTriggersOptions`

Alternative hook version of Tabs that uses explicit triggers instead of children.

Returns:

TabsContextValue

See: Tabs for the component version of this hook.

Example

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

  return <NavigationContent />
}

`useTabTrigger(options)`

Android

iOS

tvOS

Web

Parameter	Type
options	`TabTriggerProps`

Utility hook creating custom TabTrigger.

Returns:

UseTabTriggerResult

Types

`ExpoTabsNavigationProp`

Android

iOS

tvOS

Web

Type: NavigationProp<ParamList, RouteName, NavigatorID, TabNavigationState<ParamListBase>, ExpoTabsScreenOptions, TabNavigationEventMap>

`ExpoTabsNavigatorOptions`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, ExpoTabsScreenOptions, TabNavigationEventMap, ExpoTabsNavigationProp<ParamListBase>> | Omit<TabRouterOptions, 'initialRouteName'> | ExpoTabsNavigatorScreenOptions

`ExpoTabsNavigatorScreenOptions`

Android

iOS

tvOS

Web

Property	Type	Description
detachInactiveScreens(optional)	`boolean`	-
freezeOnBlur(optional)	`boolean`	-
lazy(optional)	`boolean`	-
unmountOnBlur(optional)	`boolean`	-

`ExpoTabsResetValue`

Android

iOS

tvOS

Web

Literal Type: string

Acceptable values are: 'always' | 'onFocus' | 'never'

`ExpoTabsScreenOptions`

Android

iOS

tvOS

Web

Type: Pick<BottomTabNavigationOptions, 'title' | 'lazy' | 'freezeOnBlur'> extended by:

Property	Type	Description
action	`NavigationAction`	-
params(optional)	`object`	-
title	`string`	-

`SwitchToOptions`

Android

iOS

tvOS

Web

Options for switchTab function.

Property	Type	Description
reset(optional)	`ExpoTabsResetValue`	Navigate and reset the history.

`TabNavigationEventMap`

Android

iOS

tvOS

Web

Property	Type	Description
tabLongPress	`{ data: undefined }`	Event which fires on long press on the tab in the tab bar.
tabPress	`{ canPreventDefault: true, data: undefined }`	Event which fires on tapping on the tab in the tab bar.

`TabsContextValue`

Android

iOS

tvOS

Web

Type: ReturnType<useNavigationBuilder>

The React Navigation custom navigator.

See: useNavigationBuilder hook from React Navigation for more information.

`TabsSlotRenderOptions`

Android

iOS

tvOS

Web

Options provided to the UseTabSlotOptions.

Property	Type	Description
detachInactiveScreens	`boolean`	Should the screen be unloaded when inactive.
index	`number`	Index of screen.
isFocused	`boolean`	Whether the screen is focused.
loaded	`boolean`	Whether the screen has been loaded.

`TabTriggerOptions`

Android

iOS

tvOS

Web

Property	Type	Description
href	`Href`	-
name	`string`	-

`Trigger`

Android

iOS

tvOS

Web

Type: extended by:

Property	Type	Description
isFocused	`boolean`	-
resolvedHref	`string`	-
route	`[number]`	-

`UseTabsOptions`

Android

iOS

tvOS

Web

Options to provide to the Tab Router.

Type: Omit<DefaultNavigatorOptions<ParamListBase, any, TabNavigationState<any>, ExpoTabsScreenOptions, TabNavigationEventMap, any>, 'children'> extended by:

Property	Type	Description
backBehavior(optional)	`TabRouterOptions[backBehavior]`	-

`UseTabsWithChildrenOptions`

Android

iOS

tvOS

Web

Type: PropsWithChildren<UseTabsOptions>

`UseTabsWithTriggersOptions`

Android

iOS

tvOS

Web

Type: UseTabsOptions extended by:

Property	Type	Description
triggers	`ScreenTrigger[]`	-

`UseTabTriggerResult`

Android

iOS

tvOS

Web

Property	Type	Description
getTrigger	`(name: string) => Trigger \| undefined`	-
switchTab	`(name: string, options: SwitchToOptions) => void`	-
trigger(optional)	`Trigger`	-
triggerProps	`TriggerProps`	-