React-Native：undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;）

Question

我正处于尝试构建应用程序的最初阶段，并且是React-Native新手。我收到以下导航错误：undefined is not an object (evaluating 'this.props.navigation.navigate')。

我尝试过：

我已经阅读了this question和this one的答案。我知道问题是我没有将导航作为道具正确地传递给我的组件。我只是不知道如何解决这个问题。我试图确保所有组件都是主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 }
});

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,
    },
})

到目前为止的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>
        );
    }
}

提前感谢您的帮助。