UI Kitten 的 Top Navigation 组件如何在 React Native Stack Navigator 中用作自定义 header

Question

I Have a custom header component designed using UI Kitten "Top Navigation" component (link below to examples) i would like to use that as a header on main page instead of the header Stack Navigator provides

https://akveo.github.io/react-native-ui-kitten/docs/components/top-navigation/overview#topnavigationaction

lets say use custom "Top Navigation" component called AppHeader in NotificationScreen

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import routes from './routes';
import AppHeader from '../components/AppHeader';
import NotificationScreen from '../screens/notification/NotificationScreen';
import UserProfileScreen from '../screens/userProfile/UserProfileScreen';

const {Navigator, Screen} = createStackNavigator();

const StackNavigatorPage = () => (
  <Navigator>
    <Screen name={routes.NOTIFICATION_SCREEN} component={NotificationScreen} />
    <Screen name={routes.USER_PROFILE_SCREEN} component={UserProfileScreen} />
  </Navigator>
);

export default StackNavigatorPage;

Answer 1

i figured it out and decided to leave the question and answer here in case someone might find this useful. Please let me know if this helped you as well

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import routes from './routes';
import AppHeader from '../components/AppHeader';
import NotificationScreen from '../screens/notification/NotificationScreen';
import UserProfileScreen from '../screens/userProfile/UserProfileScreen';
import HomeScreen from '../screens/dashboard/HomeScreen';

const {Navigator, Screen} = createStackNavigator();

const StackNavigatorPage = () => (
  <Navigator>
    <Screen
      name={routes.HOME_SCREEN}
      component={HomeScreen}
      options={({navigation}) => {
        return {
          header: () => <AppHeader navigation={navigation} />,
        };
      }}
    />
    <Screen name={routes.NOTIFICATION_SCREEN} component={NotificationScreen} />
    <Screen name={routes.USER_PROFILE_SCREEN} component={UserProfileScreen} />
  </Navigator>
);

export default StackNavigatorPage;