Question

我有一个项目列表（作业），当选择一个项目（作业）时，正在打开一个新场景。我希望所选项目的ID从包含列表的场景传递到另一个场景，其中包含有关所选项目（作业）的详细信息，而不使用Redux。

路由器

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import JobsList from './components/JobsList';
import Job from './components/Job';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="jobs" component={JobsList} initial />
      <Scene key="Job" component={Job} title="Test" />
    </Router>
  );
};
export default RouterComponent;

职位列表

import React, { Component } from 'react';

export default class JobsList extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => { Actions.Job({ jobId: jobId }) }}>
      ...
      </TouchableOpacity>
    );
  }
}

工作

import React, { Component } from 'react';
export default class Job extends Component {
  constructor() {
    super();

    this.state = {
      job: {}
    };

    axios.get(
      // PROBLEM: this.props.jobId is empty
      `http://api.tidyme.dev:5000/${this.props.jobId}.json`,
      {
        headers: { Authorization: 'Token token=123' }
      }
    ).then(response => this.setState({
      job: response.data
    }));
  }

  render() {
    return (
      <Text>{this.state.job.customer.firstName}</Text>
    );
  }
}

Answer 1

如果要在构造函数中访问super(props)，则应调用this.props。

constructor(props) {
  super(props);
  console.log(this.props);
}

Answer 2

最佳做法是将组件定义为纯函数：

const Job = ({ job, JobId}) => {
return (
   <Text>{job.customer.firstName}</Text>
  );
}

otherFunctions() {
  ...
}

React Native Router Flux：在场景之间传递参数

2 个答案: