Question

目前，我有：

return(
  <View style={{flex: 1, paddingTop:20}}>
    <FlatList
      data={this.state.dataSource}
      renderItem={(data) => <EventCard eventinfo = {data.item} navigation= 
           {this.props.navigation}/>}
      keyExtractor={(item) => item.eventname}
    />

和

const EventCard = ({eventinfo, navigation}) => {
return (
    <TouchableOpacity style={{backgroundColor: 'transparent'}} onPress= {() 
     => navigation.navigate('CurrRes')}>

我不明白为什么无法在事件卡中评估导航，并且导航无法正常工作。任何帮助，将不胜感激。

（是，导航导入到第一个文件中，并且项目运行，但是当按下一个平面列表项时崩溃）

我得到的错误是

undefined is not an object (evaluating 'navigation.navigate')

Answer 1

这是我发现可以更好地解释它的一个例子。您需要访问的道具不同于具有解构功能的普通函数。

const Child = (props) => {
return (
  <div style={{backgroundColor: props.eyeColor}} />
 )
}

https://medium.com/@PhilipAndrews/react-how-to-access-props-in-a-functional-component-6bd4200b9e0b

Answer 2

没关系，我必须导出带有导航的实际列表，以便每个嵌套的无状态组件都可以导航。抱歉！

React Native，将导航传递给无状态Flatlist组件

2 个答案: