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

设置头部标题

Screen 组件接受options prop，它是一个对象或返回对象的函数，其中包含各种配置选项。我们使用的标题是title，如下例所示。

  1. function StackScreen() {
  2.   return (
  3.     <Stack.Navigator>
  4.       <Stack.Screen
  5.         name="Home"
  6.         component={HomeScreen}
  7.         options={{ title: 'My home' }} // 是一个对象 或者 返回对象的函数
  8.       />
  9.     </Stack.Navigator>
  10.   );
  11. }

在头部标题使用params

为了在title中使用 params，我们需要options将屏幕的 prop 设为返回配置对象的函数。
它可能是非常吸引人的使用options 的this.prop，但由于它是在渲染组件之前定义的，this不引用组件的实例，因此没有可用的 props。相反，如果我们创建一个options函数，那么 React Navigation将使用包含的对象调用它{ navigation, route }。在这种情况下，我们关心的是route，它与作为 props 传递给屏幕道具的对象相同route。
你可能还记得我们可以通过获取参数route.params，因此我们在下面执行此操作以提取参数并将其用作标题。

  1. function StackScreen() {
  2.   return (
  3.     <Stack.Navigator>
  4.       <Stack.Screen
  5.         name="Home"
  6.         component={HomeScreen}
  7.         options={{ title: 'My home' }}
  8.       />
  9.       <Stack.Screen
  10.         name="Profile"
  11.         component={ProfileScreen}
  12.         options={({ route }) => ({ title: route.params.name })} // 接受的上一个屏幕传过来的 title
  13.       />
  14.     </Stack.Navigator>
  15.   );
  16. }

传入options函数的参数是具有以下属性的对象：

这的意思就是说 oiption={({navigation, route}) => {}}可以这么使用。
我们一般情况下只使用route就行了，但是在特殊的情况下还是会用到navigation。

使用setOptions更新options

有时候options需要从已经进入的屏幕组件本身更新活动屏幕的配置。我们可以使用navigation.setOptions

  1. /* Inside of render() of React class */
  2. // 这个是进入页面以后，获取到值以后再去更新导航组件的options
  3. <Button
  4.   title="Update the title"
  5.   onPress={() => navigation.setOptions({ title: 'Updated!' })}
  6. />

自定义header样式

  • headerStyle：将应用于View包装标题的样式对象。如果你设置backgroundColor，那么它将是你的标题的颜色。
  • headerTintColor：后退按钮和标题都使用这个属性作为它们的颜色。在下面的示例中，我们将色调颜色设置为白色 ( #fff)，因此后退按钮和标题标题将为白色。
  • headerTitleStyle: 如果我们想自定义标题的fontFamily,fontWeight和其他Text样式属性，我们可以使用它来完成。
    1. function StackScreen() {
    2. return (
    3.   <Stack.Navigator>
    4.     <Stack.Screen
    5.       name="Home"
    6.       component={HomeScreen}
    7.       options={{
    8.         title: 'My home',
    9.         headerStyle: {
    10.           backgroundColor: '#f4511e',
    11.         },
    12.         headerTintColor: '#fff',
    13.         headerTitleStyle: {
    14.           fontWeight: 'bold',
    15.         },
    16.       }}
    17.     />
    18.   </Stack.Navigator>
    19. );
    20. }
    image.png
    这里有几点需要注意：
  1. 在 iOS 上，状态栏文本和图标是黑色的，这在深色背景上看起来不太好。我们不会在这里讨论它，但您应该确保将状态栏配置为适合您的屏幕颜色，如状态栏指南中所述。
  2. 我们设置的配置只适用于主屏幕；当我们导航到详细信息屏幕时，默认样式又回来了。现在我们来看看options如何在屏幕之间共享。

    共享options到其他的屏幕

    通常希望在许多屏幕上以类似的方式配置标题。例如，您的公司品牌颜色可能是红色，因此您希望标题背景颜色为红色，色调颜色为白色。方便的是，这些是我们在运行示例中使用的颜色，您会注意到，当您导航到DetailsScreen这些颜色时，颜色会恢复为默认值。如果我们必须将options标题样式属性从复制HomeScreen到DetailsScreen，以及我们在应用程序中使用的每个屏幕组件，那不是很糟糕吗？谢天谢地，我们没有。我们可以将配置向上移动到native stack navigator下的prop属性screenOptions。
    1. function StackScreen() {
    2. return (
    3.  <Stack.Navigator
    4.    screenOptions={{ // 注意这个属性
    5.      headerStyle: {
    6.        backgroundColor: '#f4511e',
    7.      },
    8.      headerTintColor: '#fff',
    9.      headerTitleStyle: {
    10.        fontWeight: 'bold',
    11.      },
    12.    }}
    13.  >
    14.    <Stack.Screen
    15.      name="Home"
    16.      component={HomeScreen}
    17.      options={{ title: 'My home' }}
    18.    />
    19.  </Stack.Navigator>
    20. );
    21. }
    现在，任何属于我们的屏幕StackScreen都会有我们自己的品牌风格。当然，如果还有其他需要，那必须还有另一种方法来覆盖这些选项。

    使用自定义组件替换标题栏

    有时，您需要的不仅仅是更改标题的文本和样式，还需要更多的控制——例如，您可能想要渲染图像来代替标题，或者将标题变成一个按钮。在这些情况下，您可以完全覆盖用于标题的组件并提供您自己的组件。 ```javascript function LogoTitle() { return ( 配置标题栏 - 图2 ); }

function StackScreen() { return ( }} /> ); } ```

您可能想知道，为什么headerTitle我们提供一个组件而不是title像以前那样？原因是这headerTitle是一个特定于native stack navigator的属性，headerTitle默认为Text显示title.

附加配置

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

小结

  • options您可以自定义屏幕组件道具内的标题。阅读API 参考中的完整选项列表。
  • options prop属性可以是对象或函数。当它是一个函数时，它被提供一个带有navigationand属性的对象route。
  • 您还可以screenOptions在初始化时在stack natigation配置中指定共享。prop属性值优先于该配置。