JavaScript 标签

编辑

了解如何在 Expo Router 中使用 JavaScript 标签布局（React Navigation 底部标签）。

使用 JavaScript 标签导航器与 Expo Router

配置标签图标，嵌套导航器，并管理导航历史。

标签是在应用不同部分之间导航的常见方式。Expo Router 提供一种标签布局，帮助您在应用底部创建标签栏。最快的入门方式是使用模板。请参见快速开始安装以开始。

多种标签布局

Expo Router 提供三种类型的标签导航器：

JavaScript 标签：使用 React Navigation 的底部标签实现，如果您已经使用过 React Navigation，将提供熟悉的 API。
原生标签：使用平台的原生标签栏，提供原生的外观和感觉。
自定义标签：提供来自 expo-router/ui 的无头标签组件，以构建完全自定义的标签布局，以实现复杂的 UI 模式。

本指南涵盖 JavaScript 标签布局。有关其他标签布局，请参见：

原生标签

如果您想为标签栏实现原生的外观和感觉，请查看原生标签。

自定义标签

如果您的应用需要完全自定义的设计，而使用系统标签无法实现，请查看自定义标签。

开始使用 JavaScript 标签

您可以使用基于文件的路由来创建标签布局。以下是示例文件结构：

app

_layout.tsx

(tabs)

_layout.tsx

index.tsx

settings.tsx

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

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

app/_layout.tsx

import { Stack } from 'expo-router';

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

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

从文件结构来看，(tabs) 目录有三个文件。第一个是 (tabs)/_layout.tsx。该文件是标签栏和每个标签的主要布局文件。在里面，您可以控制标签栏和每个标签按钮的外观和行为。

app/(tabs)/_layout.tsx

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: '首页',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: '设置',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
        }}
      />
    </Tabs>
  );
}

最后，您有两个标签文件构成标签的内容：app/(tabs)/index.tsx 和 app/(tabs)/settings.tsx。

app/(tabs)/index.tsx & app/(tabs)/settings.tsx

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

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>标签 [首页|设置]</Text>
    </View>
  );
}

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

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

屏幕选项

标签布局包装了 React Navigation 的 Bottom Tabs Navigator。您可以使用 React Navigation 文档中提供的选项来自定义标签栏或每个标签。

高级

隐藏标签

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

app/(tabs)/_layout.tsx

import { Tabs } from 'expo-router';

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

动态路由

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

app/(tabs)/_layout.tsx

import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        // 动态路由的名称。
        name="[user]"
        options={{
          // 确保该标签始终链接到相同的 href。
          href: '/evanbacon',
          // 或者您可以使用 href 对象。
          href: {
            pathname: '/[user]',
            params: {
              user: 'evanbacon',
            },
          },
        }}
      />
    </Tabs>
  );
}

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