react-native - 如何将 React Navigation 与 FlatList 的 Header 内的元素一起使用？

Question

我可以在 renderItem 中完美导航，但是当我尝试在我在标题中使用的组件中单击它时说“未定义不是对象（评估'_this.props.navigation.navigate'）

这就是我试图在传递给 FlatLists 标题的组件中导航的方式 <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', { data: info })}>

Answer 1

我将导航道具传递给 ListHeaderComponent，它可以工作，因为渲染的元素给我带来了一些其他问题

我就是这样做的

return(
            <SafeAreaView style={styles.container}>
                <FlatList
                    ListHeaderComponent={
                        <>
                            <Header navigation={this.props.navigation}/>
                        </>
                    }
                    style={styles.scrollView}
                    numColumns='2'
                    columnWrapperStyle={{justifyContent: 'space-between'}}
                    data={ex}
                    renderItem={renderItem}
                    keyExtractor={(item, index) => index.toString()}
                />
            </SafeAreaView>
        );

Answer 2

只是一种预感，但我的猜测是组件被传递，ListHeaderComponent而不是带有navigationprop 的渲染元素。

例如：

function Parent(props) {
  // Here the FlatList will render the header as <MyHeader /> with no props
  // If this.props.navigation is called in MyHeader it will be undefined
  return (
    <FlatList ListHeaderComponent={MyHeader} ... />
  );
}

对比

function Parent(props) {
  // here MyHeader is rendered as an element first, passing through
  // the necessary navigation prop
  const headerElement = (<MyHeader navigation={props.navigation} />);
  return (
    <FlatList ListHeaderComponent={headerElement} ... />
  );
}