Reagieren Native Navigation mit StackNavigator funktioniert nicht

Question

Ich habe eine große Hektik auf diese genommen. Ich versuche, auf eine andere Seite zu navigieren ..

wird die Seite i von

CandidateList.js kommt am

import React, {Component} from 'react'; 
import _ from 'lodash'; 
import {Text, View, Button, ListView} from 'react-native'; 
import {connect} from 'react-redux'; 
import {candidatesFetch, candidatePreviewNavigate} from '../actions/CandidatesActions'; 
//import {ListItem} from '../common' 
import ListItemRedux from './ListItemREDUX' 
//import {ListItemConst} from './ListItemConst' 
//import ListItem from './ListItem' 


class CandidatesList extends Component { 

    //var navi = {}; 

    constructor(props) { 

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

    static navigationOptions = ({navigation}) => { 
    const {navigate} = navigation; 
    //navi = navigate 
    console.log("This naviate is" , navigation); 


    return { 
     title  : <Text style={{alignSelf: 'center', color: "#206C97", fontWeight: 'normal'}}>List of 
     Candidates</Text>, 
     headerRight: (<Button title="Add New Candidate" 
          onPress={() => navigate('CandidatesForm')}/>), 
     headerLeft : null 
    } 
    } 

    componentWillMount() { 
    this.props.candidatesFetch(); 
    this.createDataSource(this.props) 
    } 

    componentWillReceiveProps(nextProps) { 
    this.createDataSource(nextProps) 
    } 

    createDataSource({candidates}) { 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 

    this.dataSource = ds.cloneWithRows(candidates) 
    } 

    //onListedItemPress() { 
    // const {navigate} = this.props; 
    // this.props.candidatePreviewNavigate({navigate}); 
    //} 




    renderRow(candidate, navigation) { 


    const onCandidatePress=()=>{ 

     const {navigate} = navigation; 
     console.log("The nav oooo is =>" , navigation); 
     this.props.candidatePreviewNavigate({navigate}).bind(this); 

    } 
    return <ListItemRedux onPress={()=>{onCandidatePress()}} candidate={candidate}/>; 
    } 

    render() { 
    //const {navigate} = this.props.navigation; 
    //console.log(this.props); 
    //console.log("This is render navigate", this.props); 
    return (
     <View> 
     <ListView 
      enableEmptySections 
      dataSource={this.dataSource} 
      renderRow={this.renderRow} 
     /> 
     <View style={{margin: 10}}> 
      <Button title="Add new Candidate" 
        onPress={() => navigate('CandidatesForm')}/> 
     </View> 
     </View> 
    ) 
    } 


} 

const mapStateToProps = (state, props) => { 

    const candidates = _.map(state.fetch, (val, uid) => { 
    return {...val, uid}; 
    }); 
    const {navigate} = props.navigation 

    return {candidates, navigate}; 
} 

export default connect(mapStateToProps, {candidatesFetch, candidatePreviewNavigate})(CandidatesList); 

Mein Problem ist in der Funktion

renderRow(candidate, navigation) { 


    const onCandidatePress=()=>{ 

     const {navigate} = navigation; 
     console.log("The nav oooo is =>" , navigation); 
     this.props.candidatePreviewNavigate({navigate}).bind(this); 

    } 
    return <ListItemRedux onPress={()=>{onCandidatePress()}} candidate={candidate}/>; 
    } 

Die Navigation, die übergeben wird, ist sehr seltsam Wenn ich log ich bekomme etwas wie s1

Hier Ar die logs

09-07 16: 21: 33,240 3817 6762 W ReactNativeJS: (Saw SetTimeout mit Dauer 3299045ms)

09-07 16:21 : 39,825 3817 6762 I ReactNativeJS: 'The nav oooo ist =>' 's1'

09-07 16: 21: 39,826 3817 6762 E ReactNativeJS: undefiniert ist kein Objekt (Auswertung '_this2.props.candidatePreviewNavigate')

09-07 16: 22: 36,893 3817 6762 W ReactNativeJS: einen Zeitgeber für einen langen Zeitraum einstellen, dh mehrere Minuten, eine Leistung und Korrektheit Problem bei Android, da das Timer-Modul aktiviert bleibt und Timer nur aufgerufen werden können, wenn die App im Vordergrund ist. Weitere Informationen finden Sie unter https://github.com/facebook/react-native/issues/12981.

09-07 16: 22: 36,893 3817 6762 W ReactNativeJS:

(Saw SetTimeout mit der Dauer 154116ms)

09-07 16: 25: 11.020 3817 6762 W ReactNativeJS: Einstellen eines Timers für einen langen Zeitraum, dh mehrere Minuten, ist eine Leistung und Korrektheit Problem auf Android, wie es das Timer-Modul wach hält, und Timer können nur aufgerufen werden, wenn die App im Vordergrund ist. Weitere Informationen finden Sie unter https://github.com/facebook/react-native/issues/12981.

09-07 16: 25: 11.020 3817 6762 W ReactNativeJS: (Saw SetTimeout mit Dauer 429359ms)

Diese Linie ist, wo ich um die log Navigationsobjekt

The nav oooo is =>', 's1' 

zu sehen,

Aber der Fehler hält auf beharren:

undefined is not an object (evaluating '_this2.props.candidatePreviewNavigate') 

Wie löse ich das?

Answer 1

können Sie versuchen, diese

const onCandidatePress=()=>{ 
      const {navigate} = navigation; 
      console.log("The nav oooo is =>" , navigation); 
      this.props.candidatePreviewNavigate({navigate}); 
     } 
    renderRow(candidate, navigation) { 
     return <ListItemRedux onPress={()=>{onCandidatePress()}} candidate={candidate}/>; 
     }