Question

我的反应导航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;

但是，当我点击从另一个屏幕导航到此屏幕时，我收到此错误：TypeError: this.props.header is not a function. (In 'this.props.header({ isOpen: this.state.is_visible })', 'this.props.header' is an instance of Object)。我看过类似错误的其他问题已经提到将道具传递给构造函数并且需要传递this.renderItem而不是this.renderItem()，这两个我已经完成了，所以我想知道问题是否存在来自这个屏幕在StackNavigator中并通过单击ListItem导航到的事实。我的直觉是否正确？如果是这样，我该如何解决这个问题？

Answer 1

似乎标头道具接受一个函数，而不仅仅是像内容那样的组件。

Answer 2

现在您直接将object传递给标题prop，因此它不会接受回调函数。

您可以尝试以下方法将回调传递给标题。

<强> PassportScreen.js

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

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

<强> ChildComponent.js

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

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

2 个答案: