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 I ReactNativeJS：＆＃39;导航oooo =＆gt;＆＃39;，     ＆＃39; S1＆＃39;

09-07 16：21：39.826 3817 6762 E ReactNativeJS：undefined不是     对象（评估＆＃39; _this2.props.candidatePreviewNavigate＆＃39;）

09-07 16：22：36.893 3817 6762 W ReactNativeJS：为a设置计时器     长时间，即多分钟，是表演和     Android上的正确性问题，因为它使计时器模块保持清醒状态，并且     只有在应用程序位于前台时才能调用计时器。看到     https://github.com/facebook/react-native/issues/12981了解更多信息。

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


（看到setTimeout的持续时间为154116ms）

09-07 16：25：11.020 3817 6762 W ReactNativeJS：为a设置计时器   长时间，即多分钟，是表演和   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}/>;
      }

使用StackNavigator进行React Native导航无法正常工作

1 个答案: