Javascript 如何在列表和项目之间导航？

我试图从列表中打开一个项目，但我的项目代码在另一个js中。当我尝试使用onPress方法时，没有任何操作。我也在使用Swipeout

这是我的JobList.js，我在这里呈现我的项目列表

class JobList extends Component {
  onJobDetails = (job) => {
    this.props.navigate('JobDetails', job);
  }
  render() {
    const { navigation } = this.props;
    var renderJobs = () => {
      return this.props.jobs.map((job) => {
        return (
          <JobItem 
            key={job._id} 
            title={job.title} 
            shortDescription={job.shortDescription} 
            logo={job.avatar} 
            company={job.company} 
            id={job._id}
            dispatch={this.props.dispatch}
            onPress={() => this.onJobDetails(job)}
          />
        )
      })
    }
    return (
      <View style={styles.container}>
        <ScrollView>
          {renderJobs()}
        </ScrollView>
      </View>
    );
  }
};

类作业列表扩展组件{
onJobDetails=（作业）=>{
this.props.navigate（'JobDetails'，job）；
}
render（）{
const{navigation}=this.props；
var renderJobs=（）=>{
返回此.props.jobs.map（（作业）=>{
返回(
this.onJobDetails（作业）}
/>
)
})
}
返回(
{renderJobs（）}
);
}
};

这是我的JobItem.js

class JobItem extends Component {
  render() {
    return (
      <Swipeout {...swipeSettings}>
        <View style={styles.jobContainer}>
          <View>
            <Text style={styles.postTitle}>{this.props.title}</Text>
            <Text style={styles.postShortDescription}>{this.props.shortDescription}</Text>
          </View>
          <View>
          <Image 
            style={styles.postLogo} 
            source={{uri: '' + this.props.logo + ''}}/>
          </View>
        </View>
      </Swipeout>
    )
  }
};

类JobItem扩展组件{
render（）{
返回(
{this.props.title}
{this.props.shortDescription}
)
}
};

---

你知道我该如何解决这个问题吗？

你需要将

onPress

prop传递给子组件才能工作

<Swipeout {...swipeSettings}>
   <TouchableWithoutFeedback onPress={this.props.onPress}>
     //... other children here
   </TouchableWithoutFeedback>
</Swipeout>

//... 这里的其他孩子