React Navigation5.x第五章配置导航头

我们已经演示过如何设置导航头的标题，现在我们一起来探讨一下导航头的其他设置。

设置导航头的标题

Screen组件都有一个options属性，这个属性可能是一个js对象或者是一个返回js对象的方法。这个属性包含了很多可配置的选项。而其中的title就是最常用的之一。

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

在title中使用参数

为了在title中使用参数，我们需要把options属性定义为一个返回配置对象的方法。很多人尝试使用this.props来替代options。这个是错误的，因为这个定义是在组件被渲染之前，所以不能用this来指代当前组件。如果我们将options定义为一个方法，React Navigation就可以调用它并为其传入两个可供使用的参数{navigation,route}。在本章中我们重点关注这个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属性
• route   --   屏幕组件的route属性

上面的例子我们只用到了route属性，但是在其他的场景中你可以根据需要使用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的样式。如果你为其设置了背景色，那么导航头的背景色就是你设置的颜色

headerTintColor:回退按钮和title都是使用这个属性来设置他们的颜色。在下面的例子中，我们设置tint colot为白色，所以回退按钮和title就显示的是白色。

headerTitleStyle:如果我们向自定义字体，字体粗细和其他文本样式，我们就可以设置这个属性。

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>
  );
}

这里有几点需要注意：

在IOS上，状态栏文本和图标是黑色的，所以你将背景色设置为暗色的话可能看起来不是很好。我们不在这里探讨这个问题，但是你应该知道配置状态栏的背景色以便于跟你的导航头的颜色不冲突。

以上的设置仅仅只在home页面有效，当我们跳转到details页面的时候，依然会显示默认的颜色。接下来我们就探讨如何将iptions的设置共享给其他的屏幕组件。

与其他屏幕组件共享options

通常我们会用同样的方式来设置多个页面的导航头。比如，你的公司的主题色是红色，你想让导航头的背景色为橘红色，前景色为白色。就像上面那张图中所示的一样，你会注意到当你跳转到DetailsScreen页面的时候，导航头的颜色又变成了默认的。当然我们也可以将HomeScreen页面的options同样设置到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>
  );
}

在上面的例子中，任何属于StackScreen的页面都将会有相同样式的导航头了。

使用自定义的组件来替换title

有的时候你想对title做更多的设置，比如，你想在原title所在的位置渲染一张图片，或者将title放进一个按钮中，在这些场景中你完全可以使用自定义的组件来覆盖title。

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>
  );
}

你可能想要问为什么使用 headerTitle 这个组件来替代title。原因就是headerTitle其实是堆栈导航器的一个属性，默认情况下headerTtile是一个text组件，所以显示的就是title文本内容。

其他的一些配置

你可以查看页面的可用options列表来了解更多的配置选项。

总结

• 阅读相关API的配置选项，通过设置这些options你可以自定义你的页面组件中的导航头。
• options属性可以是一个对象或方法。当他是一个方法的时候他需要返回一个由navigation和route属性的对象。
• 你可以通过设置screenOptions来为堆栈导航器设置相同的导航头，其优先级高于单独配置。