Javascript 错误：使用StackNavigator时，this.props.header不是函数

我的react navigation StackNavigator中有一个屏幕，如下所示：

import React from 'react';
import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native';
import { List, ListItem } from 'react-native-elements';
import Accordion from '@ercpereda/react-native-accordion';

export default class PassportScreen extends React.Component {
    static navigationOptions = {
        title: 'Passport Recovery',
    };

    constructor(props) {
        super(props);
        this.renderItem = this.renderItem.bind(this);
    }

    renderItem(item) {
        return (
            <View>
                <Accordion
                    header={item.item.key}
                    content={item.item.content}
                />
            </View>
        )
    }

    render() {
        const instructions = [
            {
                key: <Text>1. Fill out a passport application form</Text>,
                content: <Text>Content</Text>
            },
            {
                key: <Text>2. Fill out a lost/missing passport statement</Text>,
                content: <Text>Content</Text>
            },
            ///...etc
        ];

        return (
            <ScrollView>
                <FlatList
                    data={instructions}
                    renderItem={this.renderItem}
                />
            </ScrollView>
        )
    }
}

module.exports = PassportScreen;

从“React”导入React；
从“react native”导入{FlatList，ScrollView，StyleSheet，Text，View}；
从“react native elements”导入{List，ListItem}；
从“@ercpereda/react native Accordion”导入手风琴；
导出默认类PassportScreen扩展React.Component{
静态导航选项={
标题：“护照恢复”，
};
建造师（道具）{
超级（道具）；
this.renderItem=this.renderItem.bind（this）；
}
renderItem（项目）{
返回(
)
}
render（）{
常量指令=[
{
关键：1.填写护照申请表，
内容：内容
},
{
钥匙：2.填写遗失/遗失护照声明，
内容：内容
},
///…等等
];
返回(
)
}
}
module.exports=护照屏幕；

但是，当我从另一个屏幕单击导航到此屏幕时，会出现以下错误：

TypeError:this.props.header不是函数。（在'this.props.header'中）({
isOpen:此.state.u可见
})“，”this.props.header“是对象的一个实例）

。

---

我看到的其他类似错误的问题提到将道具传递给构造函数，需要传递

this.renderItem

，而不是

this.renderItem（）

，这两个问题我都已经做过了，所以我想知道这个问题是否是因为这个屏幕在StackNavigator中，并且是通过单击ListItem导航到的。我的直觉正确吗？如果是这样的话，我该如何解决这个问题呢？

似乎header道具接受一个函数，而不仅仅是像content那样的组件。

现在您直接将一个

对象

传递给header

道具

，因此它不会接受回调函数

您可以尝试以下方法，以便向标头传递回调

PassportScreen.js

customFunc = (callback) => {
  console.log(callback)
}

renderItem = (item) => { // Useful to bind `this` 
        return (
            <View>
                <Accordion
                    header={this.customFunc}
                    content={item.item.content}
                />
            </View>
        )
    }

this.props.header('I'm setting the callback here')