版本: 6.x

配置标题栏

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

设置标题

Screen 组件接受 options 属性，该属性可以是对象或返回对象的函数，其中包含各种配置选项。我们用于标题的选项是 title，如以下示例所示。

标题

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

Header title

在标题中使用参数

为了在标题中使用参数，我们需要将屏幕的 options 属性设置为返回配置对象的函数。您可能很想尝试在 options 中使用 this.props，但由于它是在组件渲染之前定义的，因此 this 并不指向组件的实例，因此无法使用任何属性。相反，如果我们将 options 设置为函数，那么 React Navigation 将使用包含 { navigation, route } 的对象调用它——在这种情况下，我们只关心 route，它与传递给屏幕属性的 route 属性相同。您可能还记得，我们可以通过 route.params 获取参数，因此我们在下面提取参数并将其用作标题。

标题中的参数

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

传递给options 函数的参数是一个包含以下属性的对象。

navigation - 屏幕的 navigation prop。
route - 屏幕的 route prop

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

使用`setOptions` 更新`options`

通常需要从已挂载的屏幕组件本身更新活动屏幕的options 配置。我们可以使用navigation.setOptions 来实现。

更新导航选项

/* Inside of render() of React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

调整标题样式

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

headerStyle：一个将应用于包裹标题的View 的样式对象。如果在其中设置backgroundColor，那么它将是标题的颜色。
headerTintColor：后退按钮和标题都使用此属性作为其颜色。在下面的示例中，我们将色调颜色设置为白色（#fff），因此后退按钮和标题将为白色。
headerTitleStyle：如果我们想自定义标题的fontFamily、fontWeight 和其他Text 样式属性，可以使用它来实现。

标题样式

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

Custom header styles

这里有几点需要注意

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

在屏幕之间共享公共`options`

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

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

现在，任何属于Stack.Navigator的屏幕都将拥有我们精彩的品牌样式。当然，如果我们需要覆盖这些选项，一定有办法吧？

用自定义组件替换标题

有时您需要比更改标题的文本和样式更强的控制权——例如，您可能希望在标题位置渲染图像，或将标题变成按钮。在这些情况下，您可以完全覆盖用于标题的组件并提供您自己的组件。

自定义标题组件

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

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

Header custom title

注意

您可能想知道，为什么是headerTitle，而我们提供的是组件而不是像以前那样的title？原因是headerTitle是特定于标题的属性，而title也将用于选项卡栏、抽屉等。headerTitle默认情况下是一个显示title的Text组件。

其他配置

您可以在createNativeStackNavigator参考中阅读原生堆栈导航器中屏幕的可用options的完整列表。

总结

您可以在屏幕组件的options道具中自定义标题。阅读API 参考中的所有选项列表。
options道具可以是对象或函数。当它是一个函数时，它将提供一个包含navigation和route道具的对象。
您还可以在初始化堆栈导航器时在堆栈导航器配置中指定共享的screenOptions。该道具优先于该配置。

设置标题​

在标题中使用参数​

使用setOptions 更新options​

调整标题样式​

在屏幕之间共享公共options​

用自定义组件替换标题​

其他配置​

总结​