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

Question

我可以在 renderItem 中完美导航，但是当我在我在 header 中使用的组件中尝试时，当我单击它时它说“undefinded is not an object (evaluating '_this.props.navigation.navigate')

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

Answer 1

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

例如：

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} ... />
  );
}

Answer 2

我通过导航道具传递给 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>
        );

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

How to use React Navigation with an element inside of a FlatList's Header?

react-native

react-navigation

react-native-flatlist

flatlist