React Navigation v5 使用自定义标头

Question

如果我在 React-Navigation V5 中将标头设置为关闭，是否可以拥有自定义标头？

我尝试过，但是headerLeftandheaderRight似乎什么也没做，例如，我有以下内容：

<Stack.Screen
  component={UploadStack}
  name="UploadStack"
  options={{ headerShown: false }}
/>

然后在我的UploadStack，我有

<Stack.Navigator initialRouteName="TrackUploadSelectionScreen">
      <Stack.Screen
        name="AddToPlaylistScreen"
        component={AddToPlaylistScreen}
      />
      <Stack.Screen
        name="TrackUploadSelectionScreen"
        component={TrackUploadSelectionScreen}
        options={{
          title: t('general.selectToUpload'),
          headerLeft: () =>
            Platform.select({
              ios: () => (
                <NavigationHeader.TextButton
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              ),
              android: () => (
                <NavigationHeader.IconButton
                  iconName="times"
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              )
            })
        }}
      />
</Stack.Navigator>

但它没有创造任何东西

Answer 1

我发现有效的方法是添加一个函数，将反应元素呈现到Stack.Navigator组件上的 header 属性。这将允许它出现在每个Stack.Screen子元素中。

示例如图所示，

<Stack.Navigator
  initialRouteName="Page1"
  screenOptions={{header: NavHeader}}
>
     <Stack.Screen name="Page1" component={Page1} />
     <Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>

NavHeader 组件可以是简单的 React 元素。在此示例中，您只需将其作为函数即可。

function NavHeader() {
    return <View>...</View>;
}