React Native Router Flux : 장면 간 매개 변수 전달

항목 목록 (작업)이 있고 항목 (작업)을 선택하면 새 장면이 열리고 있습니다. 선택한 항목의 ID를 Redux를 사용하지 않고 목록이있는 장면에서 선택한 항목 (작업)에 대한 세부 정보가있는 다른 장면으로 전달하려고합니다.React Native Router Flux : 장면 간 매개 변수 전달

라우터

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> 
    ); 
    } 
}

출처

2017-03-06 migu

생성자 내부 this.props에 액세스하려면 당신은 super(props)를 호출해야합니다.

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

출처

2017-03-06 04:11:08 vinayr

감사합니다. 이 모범 사례입니까, 아니면 이것을 처리하기 위해 Redux를 설정해야합니까? – migu

많은 장면에서 소품을 사용하면 redux가 더 좋습니다. 그렇지 않으면 위의 내용이 충분해야합니다. – vinayr

가장 좋은 방법은 순수 함수로 구성 요소를 정의한다 :

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

otherFunctions() { 
    ... 
}

출처

2017-03-06 11:07:31 ddobby94

React Native Router Flux : 장면 간 매개 변수 전달

답변

관련 문제