react-native - 未定义不是反应导航的对象

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(evalating 'this.props.val.date') Do I need to以某种方式传递道具？还是我应该做其他事情？我是 React Native 的新手并且很困惑！

标签： react-nativenavigationreact-props

Answer 1

只需删除createAppContainer

const AppContainer = mainNavigator;

告诉我react-navigation你和什么一起工作