未定义不是用于反应导航的对象

Question

我的项目有两个组件，我已经完成了反应导航的所有步骤，如下所示：

// App.js
import React from 'react';
import Main from './app/componenets/Main'
import details from './app/componenets/details'
import { createStackNavigator, createAppContainer } from 'react-navigation'
const mainNavigator = createStackNavigator(
  {
    MainScreen: Main,
    detailsScreen: details,
  },
  {
   initialRouteName :'MainScreen'
  }
);
const AppContainer = createAppContainer(mainNavigator);
export default class App extends React.Component{
render() {
return(
  <AppContainer />
);
}
}

然后我有我的 Main .js我有一个如下方法：

    import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
    } from 'react-native'
import Note from './Note'
import detail from './details'
import { createStackNavigator, createAppContainer } from "react-navigation";

export default class Main extends React.Component {
  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };
  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    }
  }
render() {
    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val}
      goToDetailPage= {() => this.goToNoteDetail(key)} />
    });
    const { navigation } = this.props;
    return(
        <View style={styles.container}>
            <View style={styles.footer}>
                <TextInput
                onChangeText={(noteText) => this.setState({noteText})}
                style={styles.textInput}
                placeholder='What is your next Task?'
                placeholderTextColor='white'
                underlineColorAndroid = 'transparent'
                >
                </TextInput>
            </View>
            <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
                <Text style={styles.addButtonText}> + </Text>
            </TouchableOpacity>
        </View>
      );
    }
    //This method is declared in my Note.js
    goToNoteDetail=(key)=>{   
      this.props.navigation.navigate('detailsScreen')
      }
}

我在这里没有发布的样式代码很短但是当我尝试进行导航时，出现此错误：'undefined is not and object(evaluate 'this.props.val.date'(我需要以某种方式传递道具吗？还是我应该做其他事情？我是 React 原生的新手，很困惑！

Answer 1

为了访问this.props make arrow function或在构造函数中绑定函数。

goToDetail=()=>{   
this.props.navigation.navigate('detailsScreen')
}

Answer 2

只需删除createAppContainer

const AppContainer = mainNavigator;

并告诉我您使用的react-navigation