未定义不是反应导航的对象答案

【问题标题】：Undefined is not an object for react navigation未定义不是反应导航的对象
【发布时间】：2019-05-29 10:34:24
【问题描述】：

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

// 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')
      }
}

//我没有在这里发布的样式是简短的代码但是当我尝试进行导航时，我得到了这个错误： '未定义不是和对象（评估'this.props.val.date'）我需要以某种方式传递道具吗？还是我应该做其他事情？我是 React Native 的新手，很困惑！

【问题讨论】：

标签： react-native navigation react-props

【解决方案1】：

为了访问 this.props 制作箭头函数或在构造函数中绑定函数。

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

【讨论】：

谢谢，但这并没有改变我的错误，我仍然得到同样的错误。

【解决方案2】：

只需删除createAppContainer

const AppContainer = mainNavigator;

告诉我你使用的是什么react-navigation

【讨论】：

我做到了，但我收到了这个错误：'此导航器缺少导航道具。在 react-navigation 3 中，你必须直接设置你的应用容器'
好的，在v3中你需要createAppContainer你能分享主代码吗？并尝试在那里控制台日志导航并告诉输出是什么
我已经编辑了我的问题并发布了 Main.js 代码。我忽略了一些我的问题不需要的代码
请在goToDetails 中尝试控制台日志this.props.navigation 并告诉我你得到了什么
它说未定义！