当我使用一个类组件作为另一个组件的自定义标头时使用反应导航堆栈时"Cannot call a class as a function"我收到错误

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; 

我正在导入它并在堆栈导航器中使用它作为我的另一个组件的自定义标头。

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',
},
);

但它给出了"无法将类作为函数调用"错误。当我不将其用作自定义标题时，我不再看到错误，但当然，在我的食物组件中也看不到标题。

我在这里做错了什么？提前谢谢。

Answer 1

尝试将其放在标题中：<FoodHeader />

const MainStack = createStackNavigator(
{
Profile: {
screen: Profile,
navigationOptions: {
header: null,
},
},
Food: {
screen: Food,
navigationOptions: {
header: <FoodHeader /> 
},
},
},
{
initialRouteName: 'Dashboard',
},
);