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

Question

我有一个使用 UI Kitten“顶部导航”组件设计的自定义 header 组件（link 下面的示例）我想将其用作 header 在主页上而不是 header Stack Navigator 提供

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

假设在 NotificationScreen

中使用名为 AppHeader 的自定义“顶部导航”组件

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

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;