选项卡

了解如何在 Expo Router 中使用选项卡布局。

选项卡是在应用的不同部分之间导航的常用方式。Expo Router 提供选项卡布局，帮助你在应用底部创建选项卡栏。最快的入门方法是使用模板。请参阅 快速开始安装 以开始使用。

¥Tabs are a common way to navigate between different sections of an app. Expo Router provides a tabs layout to help you create a tab bar at the bottom of your app. The fastest way to get started is to use a template. See the quick start installation to get started.

继续阅读以向现有项目添加选项卡或自定义应用的选项卡。

¥Continue reading to add tabs to an existing project or to customize your app's tabs.

开始使用

¥Get started

你可以使用基于文件的路由来创建选项卡布局。这是一个示例文件结构：

¥You can use file-based routing to create a tabs layout. Here's an example file structure:

此文件结构在屏幕底部生成带有标签栏的布局。选项卡栏将有两个选项卡：主页和设置：

¥This file structure produces a layout with a tab bar at the bottom of the screen. The tab bar will have two tabs: Home and Settings:

你可以使用 app/_layout.tsx 文件定义应用的根布局：

¥You can use the app/_layout.tsx file to define your app's root layout:

import { Stack } from 'expo-router/stack';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

(tabs) 目录是一个特殊的目录名称，它告诉 Expo Router 使用 Tabs 布局。

¥The (tabs) directory is a special directory name that tells Expo Router to use the Tabs layout.

从文件结构来看，（tabs）目录有三个文件。第一个是 (tabs)/_layout.tsx。该文件是选项卡栏和每个选项卡的主要布局文件。在其中，你可以控制选项卡栏和每个选项卡按钮的外观和行为。

¥From the file structure, the (tabs) directory has three files. The first is (tabs)/_layout.tsx. This file is the main layout file for the tab bar and each tab. Inside it, you can control how the tab bar and each tab button look and behave.

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: 'blue' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
        }}
      />
    </Tabs>
  );
}

最后，你拥有构成选项卡内容的两个选项卡文件：app/(tabs)/index.tsx 和 app/(tabs)/settings.tsx。

¥Finally, you have the two tab files that make up the content of the tabs: app/(tabs)/index.tsx and app/(tabs)/settings.tsx.

import { View, Text, StyleSheet } from 'react-native';

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>Tab [Home|Settings]</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

名为 index.tsx 的选项卡文件是应用加载时的默认选项卡。第二个选项卡文件 settings.tsx 显示了如何向选项卡栏添加更多选项卡。

¥The tab file named index.tsx is the default tab when the app loads. The second tab file settings.tsx shows how you can add more tabs to the tab bar.

屏幕选项

¥Screen options

选项卡布局封装了 React Navigation 中的 底部选项卡导航器。你可以使用 组织账户 成员设置 自定义选项卡栏或每个选项卡。

¥The tabs layout wraps the Bottom Tabs Navigator from React Navigation. You can use the options presented in the React Navigation documentation to customize the tab bar or each tab.

高级

¥Advanced

隐藏选项卡

¥Hiding a tab

有时你希望路由存在但不显示在标签栏中。你可以传递 href: null 来禁用按钮：

¥Sometimes you want a route to exist but not show up in the tab bar. You can pass href: null to disable the button:

import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          href: null,
        }}
      />
    </Tabs>
  );
}

动态路由

¥Dynamic routes

你可以在标签栏中使用动态路由。例如，你有一个显示用户个人资料的 [user] 选项卡。你可以使用 href 选项链接到特定用户的个人资料。

¥You can use a dynamic route in a tab bar. For example, you have a [user] tab that shows a user's profile. You can use the href option to link to a specific user's profile.

import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        

{/* Name of the dynamic route.*/}


        name="[user]"
        options={{
          

{/* Ensure the tab always links to the same href.*/}


          href: '/evanbacon',
          

{/* OR you can use the href object.*/}


          href: {
            pathname: '/[user]',
            params: {
              user: 'evanbacon',
            },
          },
        }}
      />
    </Tabs>
  );
}

注意：在选项卡布局中添加动态路由时，请确保定义的动态路由是唯一的。你不能为同一个动态路由设置两个屏幕。例如，你不能有两个 [user] 选项卡。如果你需要多个动态路由，请创建自定义导航器。

¥Note: When adding a dynamic route in your tab layout, ensure that the dynamic route defined is unique. You cannot have two screens for the same dynamic route. For example, you cannot have two [user] tabs. If you need to have multiple dynamic routes, create a custom navigator.