使用 StackNavigator 反应本机导航不起作用

Question

我为此付出了很大的努力。 我正在尝试导航到另一个页面..

这是我来自的页面

CandidateList.js

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

我的问题出在函数中

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

传入的导航很奇怪 当我登录时，我会得到类似 s1

的东西

这是日志

09-07 16:21:33.240 3817 6762 W ReactNativeJS：（看到 setTimeout 与 持续时间 3299045ms)

09-07 16:21:39.825 3817 6762 我 ReactNativeJS：'导航 oooo 是 =>'， 's1'

09-07 16:21:39.826 3817 6762 E ReactNativeJS：未定义不是 对象（评估 '_this2.props.candidatePreviewNavigate'）

09-07 16:22:36.893 3817 6762 W ReactNativeJS：为 很长一段时间，即几分钟，是一种表演， Android 上的正确性问题，因为它使计时器模块保持唤醒状态，以及 定时器只能在应用程序处于前台时调用。看 https://github.com/facebook/react-native/issues/12981 了解更多信息。

09-07 16:22:36.893 3817 6762 W ReactNativeJS：

（看到 setTimeout 持续时间为 154116 毫秒）

09-07 16:25:11.020 3817 6762 W ReactNativeJS：为 很长一段时间，即几分钟，是一种表演， Android 上的正确性问题，因为它使计时器模块保持唤醒状态，以及 定时器只能在应用程序处于前台时调用。看 https://github.com/facebook/react-native/issues/12981 了解更多信息。

09-07 16:25:11.020 3817 6762 W ReactNativeJS：（看到 setTimeout 与 持续时间 429359ms)

这一行是我为了查看导航对象

而登录的地方

The nav oooo is =>', 's1'

但错误一直坚持：

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

我该如何解决这个问题？

Answer 1

你可以试试这个

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