Question

我有一个问题，我在主屏幕中使用堆栈导航器，并且正在其中渲染作业组件，在该作业组件中我有一个名称标题。因此，当作业组件在主屏幕中呈现并且用户单击该标题时，我希望将其带到作业描述屏幕，但我也想将该标题数据传递到描述屏幕。使用堆栈导航器将数据从一个屏幕传递到另一个屏幕很简单。但是我发现很难将数据从一个屏幕传递到组件再到另一个屏幕。我设法通过Jobs组件从一个屏幕导航到另一个屏幕，但无法通过Jobs组件将数据传递到工作描述屏幕。

这是我在主屏幕上渲染作业组件的方式

<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>

Answer 1

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

示例：

 {/* 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>

React Native：使用堆栈导航器

1 个答案: