React native React Native:undefined不是对象（评估'；this.props.navigation.navigate'；）

我正处于尝试开发应用程序的初始阶段，是一个新手。我收到以下导航错误：

undefined不是对象（评估'this.props.navigation.navigate'）

我所尝试的：

我已经阅读了和的答案。我知道问题在于我没有将导航作为道具正确地传递给我的组件。我只是不知道怎么解决这个问题。我试图确保我的所有组件都是主App.js文件中的屏幕。我肯定我做得不对，但我不确定正确的方法

以下是我目前的主要App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from "firebase";
import TodoList from './components/TodoList'
import AddTask from './components/AddTask'
import { StackNavigator } from 'react-navigation'

// Initialize Firebase
var config = {
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  databaseURL: "<databaseURL>",
  storageBucket: "<storageBucket>"
};
firebase.initializeApp(config);

export default class Home extends React.Component {

  constructor(props) {
    super(props)

    this.state = {todos: []}
  }

  componentDidMount() {
    firebase.database().ref('/tasks').on('value', data => {
      console.log(data.val())
      this.setState({ todos: (data.val()) })
    })

  }

  render() {
    return (
      <View style={styles.container}>
        <TodoList database={database} todos={this.state.todos} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const App = StackNavigator({
  Home: { screen: Home },
  TodoList: { screen: TodoList },
  AddTask: { screen: AddTask }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“firebase”导入*作为firebase；
从“./components/TodoList”导入TodoList
从“./components/AddTask”导入AddTask
从“反应导航”导入{StackNavigator}
//初始化Firebase
变量配置={
apiKey:“，
authDomain:“”，
数据库URL:“”，
存储桶：“
};
firebase.initializeApp（配置）；
导出默认类Home扩展React.Component{
建造师（道具）{
超级（道具）
this.state={todos:[]}
}
componentDidMount（）{
firebase.database（）.ref（'/tasks'）.on（'value'，data=>{
console.log（data.val（））
this.setState（{todos:（data.val（））}）
})
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
const App=StackNavigator({
主页：{screen:Home}，
TodoList:{screen:TodoList}，
AddTask:{屏幕：AddTask}
});

TodoList组件：

import React from 'react';
import { StyleSheet, Text, View, FlatList, Button } from 'react-native';
import * as firebase from "firebase";
import AddTask from './AddTask'
import { StackNavigator } from 'react-navigation'

export default class TodoList extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            todos: [],
            database: this.props.database
        }
    }

    static navigationOptions = {
        title: 'To Do List',
    };

    _keyExtractor = (item) => item.name

    render() {
        const { navigate } = this.props.navigation;
        return (

            <View style={styles.container}>
                <FlatList
                    data={this.props.todos}
                    keyExtractor={this._keyExtractor}
                    renderItem={({ item }) => <Text style={styles.item}>{item.name}</Text>}
                />
                <Button
                    onPress={() =>
                        navigate('AddTask')
                    }
                    title="Add a Task"
                    color="#841584"
                />
            </View>
        )
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

从“React”导入React；
从“react native”导入{样式表、文本、视图、平面列表、按钮}；
从“firebase”导入*作为firebase；
从“./AddTask”导入AddTask
从“反应导航”导入{StackNavigator}
导出默认类TodoList扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
待办事项：[]，
数据库：this.props.database
}
}
静态导航选项={
标题：“待办事项列表”，
};
_keyExtractor=（项）=>item.name
render（）{
const{navigate}=this.props.navigation；
返回(
{item.name}
/>
导航（'AddTask'）
}
title=“添加任务”
color=“#841584”
/>
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
加油站：22
},
项目：{
填充：10，
尺码：18，
身高：44，
},
})

到目前为止，AddTask组件：

import React from 'react';

export default class AddTask extends React.Component {

    static navigationOptions = {
        title: 'Add a Task',
    };

    render() {
        return (
            <View>
                <Text>This is the Add Task Page</Text>
            </View>
        );
    }
}

从“React”导入React；
导出默认类AddTask扩展React.Component{
静态导航选项={
标题：“添加任务”，
};
render（）{
返回(
这是添加任务页面
);
}
}

---

提前感谢您的帮助。

您似乎缺少AppRegistry.registerComponent（'YourAppName'，（）=>App）；在App.js文件中。我不确定你是否有index.js文件。如果是这样的话，堆栈导航应该在那里启动。我用我的理解，可能不正确，在这种情况下，您没有包括AppRegistry行。我没有index.js文件。据我所知，运行Create-React-Native应用程序的示例样板从App.js开始。不过我是一个极端的新手，所以我会接受更正。（只是为了记录，我尝试添加了它，但没有改变问题。）在渲染中尝试return（）。你的app const似乎没有被使用。如果我在类Home的return语句中的任何地方（你的意思是什么？），我会得到超过最大调用堆栈大小的值，可能是因为app正在尝试呈现Home，而Home正在尝试呈现app。这对我来说很神秘，我试图深入了解它，但create-react-native应用程序样板似乎知道如何深入查找app.js并尝试在其中呈现应用程序常量。