React Navigation 5没有标题道具?自定义标头组件

Question

如何在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
}} /> 

Answer 1

您可以使用Stack.Navigator中screenOptions道具中的header属性(如果它是公共标头(：

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

或者每个屏幕的Stack.Screen中options中的header属性：

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

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

---

文档说明header组件接收的道具，但您也可以在类型文件(在GitHub上(中查看，搜索StackHeaderProps。