跳到主要内容
版本：7.x

配置标题栏

我们已经了解了如何配置标题标题，但让我们再次回顾一下，然后再继续介绍其他选项——重复是学习的关键！

设置标题标题​

每个屏幕都有 options，它是一个对象或一个返回对象的函数，其中包含各种配置选项。我们用于标题标题的选项是 title，如下例所示。

const MyStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'My home',
      },
    },
  },
});
在 Snack 上尝试

Header title

在标题中使用参数​

为了在标题中使用参数，我们需要将屏幕的 options 设置为一个返回配置对象的函数。如果我们将 options 设置为一个函数，那么 React Navigation 将使用包含 { navigation, route } 的对象来调用它 - 在这种情况下，我们只关心 route，它与作为 route 属性传递给你的屏幕属性的对象相同。你可能还记得，我们可以通过 route.params 获取参数，因此我们在下面这样做来提取一个参数并将其用作标题。

const MyStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'My home',
      },
    },
    Profile: {
      screen: ProfileScreen,
      options: ({ route }) => ({
        title: route.params.name,
      }),
    },
  },
});
在 Snack 上尝试

传递给 options 函数的参数是一个具有以下属性的对象

在上面的示例中，我们只需要 route 对象，但在某些情况下，你可能也想使用 navigation。

使用 setOptions 更新 options​

通常需要在已挂载的屏幕组件本身中更新活动屏幕的 options 配置。我们可以使用 navigation.setOptions 来做到这一点

<Button
  onPress={() =>
    navigation.setOptions({ title: 'Updated!' })
  }
>
  Update the title
</Button>
在 Snack 上尝试

调整标题样式​

自定义标题样式时，有三个关键属性可以使用：headerStyle、headerTintColor 和 headerTitleStyle。

  • headerStyle：一个样式对象，将应用于包裹标题的视图。如果你在其上设置 backgroundColor，那将是你的标题颜色。
  • headerTintColor：后退按钮和标题都使用此属性作为它们的颜色。在下面的示例中，我们将色调颜色设置为白色 (#fff)，这样后退按钮和标题标题都将是白色。
  • headerTitleStyle：如果我们想自定义标题的 fontFamily、fontWeight 和其他 Text 样式属性，我们可以使用它来完成。
const MyStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'My home',
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      },
    },
  },
});
在 Snack 上尝试

Custom header styles

这里有几件事需要注意

  1. 在 iOS 上，状态栏文本和图标是黑色的，这在深色背景下看起来不太好。我们在这里不会讨论它，但你应该确保配置状态栏以适应你的屏幕颜色 如状态栏指南中所述。
  2. 我们设置的配置仅适用于主屏幕；当我们导航到详情屏幕时，默认样式会恢复。我们现在将看看如何在屏幕之间共享 options。

在屏幕之间共享通用 options​

通常希望在许多屏幕上以类似的方式配置标题。例如，你的公司品牌颜色可能是红色，因此你希望标题背景颜色为红色，色调颜色为白色。方便的是，这些是我们正在运行的示例中使用的颜色，你会注意到，当你导航到 DetailsScreen 时，颜色会恢复为默认值。如果我们必须将 options 标题样式属性从 Home 复制到 Details，以及复制到我们在应用程序中使用的每个屏幕，那岂不是太糟糕了吗？值得庆幸的是，我们不必这样做。我们可以将配置移至 screenOptions 下的本机堆栈导航器。

const MyStack = createNativeStackNavigator({
  screenOptions: {
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
  screens: {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
});
在 Snack 上尝试

现在，属于此导航器的任何屏幕都将具有我们精彩的品牌样式。当然，如果我们需要，必须有一种方法可以覆盖这些选项，对吗？

用自定义组件替换标题​

有时你需要比仅仅更改标题的文本和样式更多的控制——例如，你可能想要渲染一个图像来代替标题，或者将标题变成一个按钮。在这些情况下，你可以完全覆盖用于标题的组件并提供你自己的组件。

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

const MyStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        headerTitle: (props) => <LogoTitle {...props} />,
      },
    },
  },
});
在 Snack 上尝试
注意

你可能想知道，当我们提供组件时，为什么是 headerTitle 而不是像以前那样的 title？原因是 headerTitle 是标题特有的属性，而 title 也将用于标签栏、抽屉等。headerTitle 默认为显示 title 的 Text 组件。

其他配置​

你可以在 createNativeStackNavigator 参考中阅读本机堆栈导航器内屏幕可用的完整 options 列表。

总结​

  • 你可以在屏幕的 options 属性中自定义标题。在 API 参考中阅读完整的选项列表。
  • options 属性可以是对象或函数。当它是函数时，它会提供一个包含 navigation 和 route 对象的对象。
  • 你还可以在初始化堆栈导航器时在堆栈导航器配置中指定共享的 screenOptions。这将应用于导航器中的所有屏幕。