React Navigation 5 没有标题道具？自定义标题组件答案

【问题标题】：React Navigation 5 no header prop? Custom header componentReact Navigation 5 没有标题道具？自定义标题组件
【发布时间】：2020-07-30 10:13:36
【问题描述】：

如何在 React Navigation 5 中实现自定义标题组件？

header有一个变量，但是给它分配一个组件不显示任何东西，是否需要为每个屏幕分配headerLeft，headerTitle和headerRight？

        <Stack.Screen name="IndexScreen" component={IndexScreen}
          options={{
            header: () => <HeaderComponent /> 
          }} /> //shows nothing

        <Stack.Screen name="IndexScreen" component={IndexScreen}
          options={{
            headerLeft: () => <HeaderLeftComponent />, 
            headerTitle: () => <HeaderTitleComponent />, 
            headerRight: () => <HeaderRightComponent /> // to much repetition
          }} />

【问题讨论】：

你的HeaderComponent 是什么样的，因为它对我有用。创建一个零食也可能是一个好主意，以使其更易于调试。
@Bas 我设法让一个自定义组件用作标题并制作了一个零食：snack.expo.io/@johanmelin/4c7d80。现在我只是好奇如何将所有标题逻辑放入此组件中，例如 headerRight: () =>
使用设置简单创建对象不起作用 const HeaderSettings = { header: HeaderComponent }
我可以让设置和标题组件同时工作，但不能同时工作。 options={{ ...HeaderSettings, header: props => , }}

标签： react-native react-navigation

【解决方案1】：

你可以在Stack.Navigator 中使用screenOptions 属性中的header 属性（如果它是一个公共标头）：

<Stack.Navigator
  screenOptions={{
    header: YourHeader
  }}
>
  // ...
</Stack.Navigator>

或options 中的header 属性来自Stack.Screen 用于每个屏幕：

<AppStack.Screen
  name='YourScreen'
  component={YourComponent}
  options={{ header: YourHeader }}
/>

如果您的标头未显示，可能是屏幕正在渲染具有更高zIndex 或elevation 的内容。

文档说明header 组件接收哪些道具，但您也可以在types file（GitHub 上）上查看，搜索StackHeaderProps。

【讨论】：