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

您可以在screenOptions的{{1}}道具中使用header属性（如果它是一个普通的标题）：

Stack.Navigator

或为每个屏幕从<Stack.Navigator screenOptions={{ header: YourHeader }} > // ... </Stack.Navigator>到header中的options属性：

Stack.Screen

如果标题没有出现，则可能是屏幕正在渲染<AppStack.Screen name='YourScreen' component={YourComponent} options={{ header: YourHeader }} />或zIndex较高的东西。

文档说elevation将收到YourHeader，但没有说明这些道具是什么。根据代码，它实际上被命名为StackHeaderProps，并被定义为here。

在撰写本文时，道具有：

HeaderProps

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

1 个答案: