当我使用react-navigation-stack将类组件用作另一个组件的自定义标头时，出现“无法将类作为函数调用”错误。

Question

这是我的班级组件，我想为我的食物组件使用自定义标头。

import React from 'react';
import {Text, View, Image, TouchableOpacity} from 'react-native';
import {styles} from './Food.Styled';

class FoodHeader extends React.Component {
  render() {
   return (
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <Image
            style={styles.icon}
            source={require('../../../../images/images.jpeg')}
          />
          <Text style={styles.foodTxt}>FOOD</Text>
        </View>
        <View style={styles.botContainer}>
          <View style={styles.leftBotCont1}>
            <View style={styles.txtCont1}>
              <Text style={styles.txt1}>Monday</Text>
              <TouchableOpacity style={styles.txt2Con}>
                <Text style={styles.txt2}> (Click to change)</Text>
              </TouchableOpacity>
              {/* <DateTimePicker
              isVisible={isDateTimePickerVisible}
              onConfirm={handleDatePicked}
              onCancel={hideDateTimePicker}
            /> */}
            </View>

            <View style={styles.txtCont2}>
              <Text style={styles.txt3}>October 28</Text>
              <Image
                style={styles.icon1}
                source={require('../../../../images/images.jpeg')}
              />
            </View>
          </View>
          <View style={styles.rightBotCont}>
            <Image
              style={styles.icon2}
              source={require('../../../../images/images.jpeg')}
            />
          </View>
        </View>
      </View>
    );
  }
}

export default FoodHeader; 

我正在导入它，并将其在stackNavigator中用作另一个组件的自定义标头。

import {Food} from './src/modules/food';
import {FoodHeader} from './src/modules/food/foodheader';

const MainStack = createStackNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        header: null,
      },
    },
    Food: {
      screen: Food,
      navigationOptions: {
        header: FoodHeader,
      },
    },
  },

  {
    initialRouteName: 'Dashboard',
  },
);

但是会出现“无法将类作为函数调用”错误。当我不将其用作自定义标头时，就不会再看到该错误了，但是当然我在食品组件中也看不到标头。

我在这里做错了什么？预先感谢。

这是我的班级组件，我想为食品组件使用自定义标头。从'react'导入React；从'react-native'导入{Text，View，Image，TouchableOpacity}；从...导入{styles}。

Answer 1

尝试将此放在标题内：<FoodHeader />