时间戳

首页 > 解决方案 > React Native：使用堆栈导航器将数据从屏幕传递到组件到另一个屏幕

reactjs - React Native：使用堆栈导航器将数据从屏幕传递到组件到另一个屏幕

问题描述

我有一个问题，我在主屏幕中使用堆栈导航器并且我正在其中呈现一个作业组件，在该作业组件中我有一个名称标题。因此，当工作组件在我的主屏幕中呈现并且用户单击该标题时，我想将他带到工作描述屏幕，但我也想将该标题数据传递到描述屏幕。 在此处输入图像描述 使用堆栈导航器将数据从一个屏幕传递到另一个屏幕是直截了当的。但是我发现很难将数据从一个屏幕传递到一个组件到另一个屏幕。我设法通过作业组件从一个屏幕导航到另一个屏幕，但无法通过作业组件将数据传递到职位描述屏幕。

这就是我在主屏幕中呈现作业组件的方式

<Jobs
            jobs={this.state.jobs}
            isSignedIn={this.state.isSignedIn}
            description={() =>
              this.props.navigation.navigate("JobDescription", {
                job: this.state.jobs,
              })
            }
          />

这是我的工作组件

 const Jobs = (props) =>
  props.jobs.map((job) => {
    return (
      <Card key={job.title}>
        <CardItem>
          <Body>
            <View>
              <TouchableOpacity onPress={props.description}>
                <Text
                  style={{
                    marginTop: 10,
                    marginLeft: 25,
                    color: "blue",
                    fontSize: 22,
                  }}
                >
                  {job.name}
                </Text>
              </TouchableOpacity>
            </View>

这是我的工作描述代码示例

 const JobDescription = (props) => {
  return (
    <Container>
      <Headers drawer={() => props.navigation.openDrawer()} />
      <ScrollView>
        <View style={{ padding: 10, marginTop: 30 }}>
          <Text style={{ fontSize: 30 }}>
            {props.navigation.getParam("name")}
          </Text>

标签： reactjsreact-nativenavigationstack-navigator

解决方案

似乎您正在通过“作业”导航参数传递作业数组。您可能希望传递您正在点击的作业，以便在 JobsDescription 组件中获取所选作业的所有相关数据，而不是所有作业数组。

例子：

 {/* Pass the selected job to the "description" method. */}
  <Jobs
    jobs={this.state.jobs}
    isSignedIn={this.state.isSignedIn}
    description={(selectedJob) =>
      this.props.navigation.navigate("JobDescription", {
        job: this.state.jobs,
        selectedJob
      })
    }
  />

const Jobs = (props) =>
  props.jobs.map((job) => {
    return (
      <Card key={job.title}>
        <CardItem>
          <Body>
            <View>
              <TouchableOpacity onPress={() => props.description(job)}>
                <Text
                  style={{
                    marginTop: 10,
                    marginLeft: 25,
                    color: "blue",
                    fontSize: 22,
                  }}
                >
                  {job.name}
                </Text>
              </TouchableOpacity>
            </View>

所以你可以做这样的事情


const JobDescription = (props) => {
  const { navigation } = props;
  // Getting the selected job data through the navigation parameter.
  const selectedJob = navigation.getParam("selectedJob");
  return (
    <Container>
      <Headers drawer={() => props.navigation.openDrawer()} />
      <ScrollView>
        <View style={{ padding: 10, marginTop: 30 }}>
          <Text style={{ fontSize: 30 }}>
            {selectedJob.title}
          </Text>

推荐阅读