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

Question

我有一个项目（工作）列表，当一个项目（工作）被选中时，一个新的场景被打开。我希望在不使用 Redux 的情况下，将所选项目的 ID 从带有列表的场景传递到带有所选项目（作业）详细信息的另一个场景。

路由器

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

如果您想在构造函数中访问 this.props，您应该调用 super(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：在场景之间传递参数

React Native Router Flux: passing params between scenes

react-native

react-native-router-flux